/* ===================================
   GLOBAL STYLES & RESET
   =================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===================================
   SKELETON LOADING
   =================================== */
@keyframes skeletonShimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-tertiary, #f0f0f0) 25%,
        var(--bg-secondary, #e8e8e8) 50%,
        var(--bg-tertiary, #f0f0f0) 75%
    );
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-md, 8px);
}

.skeleton-text {
    height: 14px;
    margin-bottom: 8px;
    border-radius: 4px;
}

.skeleton-text.short {
    width: 60%;
}

.skeleton-text.medium {
    width: 80%;
}

.skeleton-text.long {
    width: 100%;
}

.skeleton-title {
    height: 24px;
    width: 40%;
    margin-bottom: 12px;
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-card {
    padding: 16px;
    border-radius: var(--radius-lg, 12px);
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-subtle, #eee);
}

.skeleton-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: var(--radius-lg, 12px);
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-subtle, #eee);
}

.skeleton-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md, 8px);
}

.skeleton-stat-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.skeleton-stat-number {
    height: 28px;
    width: 50px;
}

.skeleton-stat-label {
    height: 14px;
    width: 80px;
}

.skeleton-message {
    display: flex;
    gap: 12px;
    padding: 12px 0;
}

.skeleton-message-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skeleton-spreadsheet-card {
    padding: 20px;
    border-radius: var(--radius-lg, 12px);
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-subtle, #eee);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.skeleton-spreadsheet-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.skeleton-spreadsheet-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md, 8px);
}

.skeleton-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.skeleton-calendar-day {
    aspect-ratio: 1;
    border-radius: var(--radius-sm, 6px);
}

.skeleton-section {
    display: none;
}

.skeleton-section.loading {
    display: block;
}

/* Hide real content when skeleton is loading */
.content-loading .real-content {
    display: none !important;
}

.content-loading .skeleton-section {
    display: block;
}

/* Dark mode skeleton */
body.dark-mode .skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-secondary, #2a2a2a) 25%,
        var(--bg-tertiary, #333) 50%,
        var(--bg-secondary, #2a2a2a) 75%
    );
    background-size: 200% 100%;
}

body.dark-mode .skeleton-card,
body.dark-mode .skeleton-stat-card,
body.dark-mode .skeleton-spreadsheet-card {
    background: var(--bg-secondary, #1e1e1e);
    border-color: var(--border-subtle, #333);
}

/* 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 - use dark grey, not pure black */
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: #1C1C1E;
    border-color: var(--border-subtle);
    color: var(--text-main);
}

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background: #1C1C1E;
    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: #2C2C2E;
    border-color: var(--accent);
    color: var(--text-main);
}

/* Fix dark mode select dropdown arrow - single custom arrow */
body.dark-mode select {
    -webkit-appearance: none;
    -moz-appearance: none;
    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='%2398989D' 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;
    background-size: 12px;
    padding-right: 36px;
}

body.dark-mode input[type="file"] {
    background: #1C1C1E;
    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: #1C1C1E;
    border-color: var(--border-subtle);
}

body.dark-mode .custom-dropdown-selected,
body.dark-mode .custom-dropdown-options,
body.dark-mode .custom-dropdown-option {
    background: #1C1C1E;
    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: #1C1C1E;
    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: #1C1C1E;
    color: var(--text-main);
    border-color: var(--border-subtle);
}

/* Ensure modal selects have single dropdown arrow in dark mode */
body.dark-mode .modal-content select {
    -webkit-appearance: none;
    -moz-appearance: none;
    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='%2398989D' 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;
    background-size: 12px;
    padding-right: 36px;
}

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: #2C2C2E;
    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;
}

/* No-window (full-bleed) mode */
body.no-window .app-container {
    max-width: 100vw;
    width: 100vw;
    height: 100vh;
    margin: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
}

body.no-window .sidebar {
    border-radius: 0;
}

body.no-window .main-content {
    border-radius: 0;
}

/* ===================================
   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;
    overflow: visible;
}

.search-wrapper {
    flex: 1;
    max-width: 600px;
    position: relative;
}

.topbar-avatar {
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-subtle);
    flex-shrink: 0;
}

.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;
}

.project-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;
}

.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;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.search-result-title > :first-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.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;
}

/* Status pill on task search results */
.search-task-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    vertical-align: middle;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}
.search-task-status .pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* 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);
    align-items: center;
    overflow: visible;
}

.top-bar-actions > div {
    overflow: visible;
}

#notificationsBtn {
    overflow: visible;
}

.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;
    overflow: visible;
    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);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    min-width: 200px;
    padding: 6px;
    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: 10px;
    padding: 10px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 500;
    background: transparent;
    border: none;
    width: 100%;
}

.dropdown-item:hover {
    background: var(--bg-hover, rgba(0, 0, 0, 0.04));
}

.dropdown-item i {
    width: 18px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

/* My Account icon — blue */
.settings-dropdown .dropdown-item:first-child i {
    color: var(--accent, #0A84FF);
}

/* Sign Out icon — red */
.settings-dropdown .dropdown-item:last-child i {
    color: #ef4444;
}

.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:hover {
    background: rgba(0, 112, 243, 0.08);
}

/* 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-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);
    z-index: 1000;
}

/* ===================================
   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 */
}
#chat-section.content-section {
    padding: 10px;
    padding-bottom: 10px;
    overflow: hidden;
}

.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;
    }
    
    .nav-item {
        padding: 8px 8px;
        max-width: 56px;
    }

    .search-bar {
        padding: 6px 10px;
        min-height: 34px;
    }
    
    .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.activity-clickable {
    cursor: pointer;
}

.activity-item.activity-clickable:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.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,
.activity-icon.sheet-icon,
.activity-icon.doc-icon,
.activity-icon.project-icon {
    background: var(--accent-soft);
    color: var(--accent);
}

/* Milestone icon - special golden styling */
.activity-icon.milestone-icon {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #d97706;
}

/* 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;
    position: relative;
    overflow: hidden;
}

.message-avatar-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    position: absolute;
    inset: 0;
}

.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);
}

/* ---- System event messages ("Alice added Bob to the group" etc.) ---- */
.chat-system-msg {
    display: flex;
    align-items: center;
    margin: 14px 0;
    pointer-events: none;
    user-select: none;
}
.chat-system-msg::before,
.chat-system-msg::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-subtle);
}
.chat-system-msg-text {
    padding: 0 12px;
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    max-width: 70%;
}
.sys-msg-name {
    font-weight: 500;
    color: var(--text-main);
    cursor: pointer;
    pointer-events: auto;
}
.sys-msg-name:hover {
    text-decoration: underline;
}

/* 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 — hidden on phones, shown on tablet+ */
.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;
}
@media (max-width: 768px) {
    .chat-emoji-btn,
    .chat-emoji-popover {
        display: none !important;
    }
}

.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: flex-start;
    padding: 4px 18px 6px;
    animation: fadeIn 0.2s ease;
}

.typing-bubble {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-body);
    padding: 10px 16px;
    border-radius: 6px 18px 18px 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    max-width: 200px;
}

.typing-indicator .typing-dots {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.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 {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    white-space: nowrap;
}

/* Dark mode typing indicator */
body.dark-mode .typing-bubble {
    background: var(--bg-surface);
}

body.dark-mode .typing-indicator .typing-dots span {
    background: var(--text-light);
}

/* ===================================
   SWIPE-TO-REPLY (mobile)
   =================================== */
.chat-two-pane .message {
    overflow: visible;
}

.swipe-reply-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) scale(0.5);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-surface-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 14px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s, transform 0.1s;
    z-index: 1;
}

.swipe-reply-icon.ready {
    color: var(--accent);
    background: var(--accent-ghost);
}

body.dark-mode .swipe-reply-icon {
    background: var(--bg-surface);
}

body.dark-mode .swipe-reply-icon.ready {
    color: var(--accent);
    background: rgba(var(--accent-rgb, 79, 70, 229), 0.2);
}

/* ===================================
   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 MENTION DROPDOWN
   @-trigger mention picker for the new chat system
   =================================== */

/* Mention dropdown — portalled to body, positioned above composer */
/* Styled to match .settings-dropdown */
.chat-mention-dropdown {
    display: none;
    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.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    max-height: 200px;
    max-width: 240px;
    min-width: 180px;
    overflow-y: auto;
    padding: 6px;
    z-index: 10002;
    animation: chatMentionIn 0.15s ease;
}

@keyframes chatMentionIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.chat-mention-dropdown .mention-dropdown-header {
    padding: 6px 10px 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0;
}

.chat-mention-dropdown .mention-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
    border: none;
    width: 100%;
}

.chat-mention-dropdown .mention-item:hover,
.chat-mention-dropdown .mention-item.selected {
    background: var(--bg-hover, rgba(0, 0, 0, 0.04));
}

.chat-mention-dropdown .mention-item-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

.chat-mention-dropdown .mention-item-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-mention-dropdown .mention-dropdown-empty {
    padding: 10px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 12px;
}

/* Dark mode */
body.dark-mode .chat-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 .chat-mention-dropdown .mention-item:hover,
body.dark-mode .chat-mention-dropdown .mention-item.selected {
    background: var(--bg-hover, rgba(255, 255, 255, 0.06));
}

/* ===================================
   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);
}

@media (max-width: 768px) {
    /* Pillier reactions on mobile for clearer tap targets */
    .reactions-bar {
        border-radius: 999px;
        padding: 10px 16px;
        gap: 8px;
    }

    .reaction-emoji-btn {
        width: 40px;
        height: 40px;
    }

    .message-reactions-display {
        gap: 8px;
    }

    .reaction-chip {
        border-radius: 999px;
        padding: 6px 12px;
        font-size: 13px;
    }
}

/* 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;
}

/* Search highlight — outline ring, safe for both sent (blue) and received bubbles */
.chat-two-pane .message.search-highlight .message-text {
    animation: chatSearchRing 2.8s ease-out forwards;
}
/* Also highlight ref blocks / chips / file-tiles in file-only messages */
.chat-two-pane .message.search-highlight .chat-ref-block,
.chat-two-pane .message.search-highlight .chat-ref-chip,
.chat-two-pane .message.search-highlight .chat-ref-file-tile {
    animation: chatSearchRing 2.8s ease-out forwards;
    border-radius: var(--radius-sm, 8px);
}

@keyframes chatSearchRing {
    0% {
        outline: 2.5px solid var(--accent);
        outline-offset: 3px;
        box-shadow: 0 0 0 6px rgba(0,112,243,0.22);
    }
    40% {
        outline: 2.5px solid var(--accent);
        outline-offset: 3px;
        box-shadow: 0 0 0 3px rgba(0,112,243,0.10);
    }
    100% {
        outline: 2.5px solid transparent;
        outline-offset: 3px;
        box-shadow: none;
    }
}

@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;
}

body.dark-mode .chat-two-pane .message.search-highlight .message-text {
    animation: chatSearchRingDark 2.8s ease-out forwards;
}
body.dark-mode .chat-two-pane .message.search-highlight .chat-ref-block,
body.dark-mode .chat-two-pane .message.search-highlight .chat-ref-chip,
body.dark-mode .chat-two-pane .message.search-highlight .chat-ref-file-tile {
    animation: chatSearchRingDark 2.8s ease-out forwards;
}

@keyframes chatSearchRingDark {
    0% {
        outline: 2.5px solid var(--accent);
        outline-offset: 3px;
        box-shadow: 0 0 0 6px rgba(10,132,255,0.30);
    }
    40% {
        outline: 2.5px solid var(--accent);
        outline-offset: 3px;
        box-shadow: 0 0 0 3px rgba(10,132,255,0.12);
    }
    100% {
        outline: 2.5px solid transparent;
        outline-offset: 3px;
        box-shadow: none;
    }
}

/* 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: 10px 16px;
        border-radius: 999px;
        gap: 8px;
    }
    
    .reaction-emoji-btn {
        min-width: 44px;
        height: 36px;
        padding: 0 12px;
        font-size: 18px;
        border-radius: 999px;
    }
    
    .message-reactions-display {
        gap: 8px;
        margin-top: 6px;
    }
    
    .reaction-chip {
        padding: 6px 12px;
        border-radius: 999px;
        font-size: 13px;
        height: auto;
        line-height: 1.2;
    }
    
    .reaction-emoji {
        font-size: 13px;
    }
    
    .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);
}

/* ===================================
   CHAT TWO-PANE LAYOUT — Redesigned
   =================================== */

/* ---- Container ---- */
.chat-two-pane {
    display: flex;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 24px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

/* ===== LEFT: Sidebar ===== */
.chat-sidebar {
    width: 300px;
    min-width: 300px;
    border-right: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    background: var(--bg-body);
}

.chat-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 12px;
}
.chat-sidebar-title-row { display: flex; align-items: baseline; gap: 8px; }
.chat-sidebar-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
    letter-spacing: -0.02em;
}

.chat-new-btn {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--border-subtle);
    color: var(--text-muted);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    transition: all var(--transition-fast);
}
.chat-new-btn:hover {
    background: var(--border-medium);
    color: var(--text-main);
    transform: scale(1.04);
}

/* Search */
.chat-sidebar-search {
    padding: 0 14px 10px;
}
.chat-search-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: 999px;
    padding: 10px 18px;
    transition: all var(--transition-fast);
}
.chat-search-box:focus-within {
    border-color: var(--accent);
}
.chat-search-icon {
    font-size: 14px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.chat-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    padding: 0;
    color: var(--text-main);
    font-family: var(--font-family);
}
.chat-search-input::placeholder { color: var(--text-muted); }

/* Room list */
.chat-room-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 8px 8px;
    min-height: 0;
}

/* ─── Slack sidebar section ──────────────────────────────────────────── */
.chat-slack-section {
    flex-shrink: 0;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    max-height: 42%;
    min-height: 0;
}
.chat-slack-header {
    display: flex;
    align-items: center;
    padding: 10px 16px 6px;
    gap: 8px;
}
.chat-slack-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}
.chat-slack-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.chat-slack-title i { font-size: 13px; color: #E01E5A; }
.chat-slack-link-btn,
.chat-slack-connect-btn,
.chat-slack-disconnect-btn {
    width: 24px; height: 24px;
    border-radius: 50%;
    border: none;
    background: var(--border-subtle);
    color: var(--text-muted);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}
.chat-slack-link-btn:hover { background: var(--border-medium); color: var(--text-main); }
.chat-slack-connect-btn { background: #4A154B; color: #fff; }
.chat-slack-connect-btn:hover { opacity: .85; }
.chat-slack-disconnect-btn:hover { background: var(--danger-soft, #fde8ea); color: var(--danger, #e53935); }
/* User-link button (appears inline in header actions) */
.chat-slack-userlink--connect {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    padding: 2px 6px;
    font-family: inherit;
    transition: color .15s;
    display: flex;
    align-items: center;
    gap: 4px;
}
.chat-slack-userlink--connect:hover { color: var(--text-main); }
.chat-slack-list {
    overflow-y: auto;
    padding: 0 8px 8px;
}
.chat-slack-channel-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background var(--transition-fast);
    user-select: none;
    position: relative;
}
.chat-slack-channel-item:hover { background: var(--bg-alt); }
.chat-slack-channel-item.active { background: var(--accent-soft); }
.chat-slack-channel-icon {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: #4A154B;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}
.chat-slack-channel-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-slack-channel-item.active .chat-slack-channel-name { color: var(--accent); }
.chat-slack-unlink-btn {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
    opacity: 0;
    transition: opacity var(--transition-fast), background var(--transition-fast);
}
.chat-slack-channel-item:hover .chat-slack-unlink-btn { opacity: 1; }
.chat-slack-unlink-btn:hover { background: var(--danger-soft, #fde8ea); color: var(--danger, #e53935); }
.chat-slack-empty {
    padding: 10px 12px 4px;
    font-size: 13px;
    color: var(--text-muted);
}
/* Empty state when Slack is connected but no channels are linked */
.chat-slack-channels-empty {
    padding: 20px 14px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.chat-slack-empty-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(74, 21, 75, 0.08);
    color: #4A154B;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 4px;
}
body.dark-mode .chat-slack-empty-icon {
    background: rgba(74, 21, 75, 0.25);
    color: #c79ec9;
}
.chat-slack-empty-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}
.chat-slack-empty-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
    max-width: 220px;
}
/* Connect prompt shown when Slack is not yet connected */
.chat-slack-connect-prompt {
    padding: 16px 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.chat-slack-connect-prompt strong { font-size: 13px; color: var(--text-main); }
.chat-slack-connect-prompt p { font-size: 12px; color: var(--text-muted); margin: 0; line-height: 1.4; }
.chat-slack-cta-btn {
    margin-top: 8px;
    padding: 7px 16px;
    border-radius: 20px;
    border: none;
    background: #4A154B;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: opacity .15s;
}
.chat-slack-cta-btn:hover { opacity: .85; }

/* Slack message indicator in main area */
.chat-slack-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: #E01E5A;
    background: #fce8ef;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 8px;
}
body.dark-mode .chat-slack-badge { background: rgba(224,30,90,.18); }

/* Slack message bubble */
.message.slack-msg .message-avatar {
    background: #4A154B !important;
}
.message.slack-msg .message-bubble-row .message-text {
    border-left: 3px solid #E01E5A;
}

/* Link-channel modal channel list */
.slack-pick-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 320px;
    overflow-y: auto;
    padding: 4px 0;
}
.slack-pick-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.slack-pick-item:hover { background: var(--bg-alt); }
.slack-pick-item .slack-pick-icon {
    width: 28px; height: 28px;
    border-radius: 6px;
    background: #4A154B;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}
.slack-pick-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main);
}
.slack-pick-meta {
    font-size: 12px;
    color: var(--text-muted);
}
.chat-room-list-empty {
    padding: 40px 18px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

/* ---- Search results section ---- */
.chat-search-section {
    border-top: 1px solid var(--border-subtle);
    margin-top: 6px;
    padding-top: 6px;
}
.chat-search-section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: 4px 12px 6px;
}
.chat-room-icon-search {
    background: var(--accent-soft);
    color: var(--accent);
}

/* ---- Settings danger zone ---- */
.chat-settings-danger-zone {
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
}

/* ---- Group icon + color picker in settings ---- */
.chat-icon-picker-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 20px;
    background: var(--bg-alt);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
    color: var(--text-main);
    white-space: nowrap;
}
.chat-icon-picker-pill:hover {
    border-color: var(--border-medium);
    background: var(--bg-surface);
}
.chat-icon-picker-pill.active {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}
.chat-icon-picker-pill-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    background: var(--accent-soft);
    color: var(--accent);
    flex-shrink: 0;
}
.chat-icon-picker-pill-icon svg { display: block; }
.chat-icon-picker-pill.active .chat-icon-picker-pill-icon {
    background: white;
}

.chat-color-pill-swatch {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--border-default);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-muted);
}
.chat-color-pill-swatch svg { display: block; }

.chat-icon-picker,
.chat-color-picker {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 10px;
    z-index: 10020;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.chat-icon-picker {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100px;
}
.chat-color-picker {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    place-items: center;
    width: 100px;
}
.chat-icon-picker.visible,
.chat-color-picker.visible {
    display: grid;
}

.chat-icon-emoji-grid {
    display: contents;
}
.chat-icon-emoji-btn {
    width: 28px; height: 28px;
    border-radius: 6px;
    border: 2px solid transparent;
    background: var(--bg-alt);
    cursor: pointer;
    font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    transition: border-color 0.1s, background 0.1s;
    color: var(--text-sub);
    padding: 0;
    line-height: 1;
}
.chat-icon-emoji-btn:hover { background: var(--accent-soft); }
.chat-icon-emoji-btn.active {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.chat-icon-color-row {
    display: contents;
}
.chat-icon-color-swatch {
    width: 20px; height: 20px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: outline-color 0.15s, transform 0.1s;
}
.chat-icon-color-swatch:hover { transform: scale(1.15); }
.chat-icon-color-swatch.active { outline-color: var(--accent); }
.picker-empty-state {
    background: transparent;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}
.picker-empty-state:hover { color: var(--accent); }
.picker-empty-state.active { outline: 2px solid var(--accent); }
.chat-room-icon-emoji {
    font-size: 18px;
    line-height: 1;
}

/* Connection / offline error banner in sidebar */
.chat-connection-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 18px 20px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-surface);
}
.chat-conn-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 4px;
}
.chat-conn-sub {
    font-size: 12px;
    color: var(--text-light);
    line-height: 1.5;
}

/* Room item */
.chat-room-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
    margin-bottom: 2px;
}
.chat-room-item:hover {
    background: rgba(0,0,0,0.035);
}
.chat-room-item.active {
    background: var(--accent-soft);
}
.chat-room-item.has-unread .chat-room-name { font-weight: 700; }

.chat-room-icon {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    position: relative;
}
.chat-room-icon-avatar {
    border-radius: 50%;
    color: white;
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.3px;
    overflow: hidden;
}
.chat-room-icon-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.chat-room-item.active .chat-room-icon {
    background: var(--accent);
    color: white;
}
.chat-room-item.active .chat-room-icon-avatar {
    box-shadow: 0 0 0 2px var(--accent);
}

.chat-room-info { flex: 1; min-width: 0; }
.chat-room-name-row {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.chat-room-name {
    font-size: 14px; font-weight: 500;
    color: var(--text-main);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-room-time {
    font-size: 11px; color: var(--text-light);
    flex-shrink: 0; font-weight: 400;
}
.chat-room-item.has-unread .chat-room-time {
    color: var(--accent); font-weight: 600;
}
.chat-room-preview-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-top: 3px;
}
.chat-room-preview {
    font-size: 12.5px; color: var(--text-light);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1; min-width: 0;
}
.chat-room-badge {
    background: var(--accent);
    color: white;
    font-size: 10px; font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    min-width: 18px; text-align: center;
    flex-shrink: 0;
    line-height: 1.5;
}

/* ===== RIGHT: Main area ===== */
.chat-main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
    background: var(--bg-surface);
}

/* Header bar */
.chat-main-header {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    z-index: 2;
}
.chat-back-btn {
    display: none;
    width: 32px; height: 32px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    font-size: 15px;
    align-items: center; justify-content: center;
}
.chat-main-header-info { flex: 1; min-width: 0; }
.chat-header-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 12px; font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.3px;
    position: relative;
    overflow: hidden;
}
.chat-header-avatar-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.chat-main-header-name {
    font-size: 15px; font-weight: 700;
    color: var(--text-main);
    display: block;
    letter-spacing: -0.01em;
}
.chat-main-header-meta {
    font-size: 12px; color: var(--text-light);
    margin-top: 1px;
}
.chat-main-header-meta:empty { display: none; }
.chat-header-actions { display: flex; gap: 4px; }
.chat-room-settings-btn {
    width: 34px; height: 34px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--transition-fast);
}
.chat-room-settings-btn:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

/* Empty state */
.chat-empty-state {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 6px;
    padding: 48px 24px;
}
.chat-empty-illustration { margin-bottom: 12px; }
.chat-empty-circle {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: var(--accent-soft);
    display: flex; align-items: center; justify-content: center;
    font-size: 32px;
    color: var(--accent);
}
.chat-empty-state h3 {
    font-size: 17px; font-weight: 700;
    color: var(--text-main); margin: 0;
}
.chat-empty-state p {
    font-size: 13.5px; color: var(--text-light); margin: 0;
}

/* Slack channel empty state */
.slack-empty-state {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 6px;
    padding: 48px 24px;
    text-align: center;
}
.slack-empty-illustration { margin-bottom: 12px; }
.slack-empty-circle {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: #E8E5FF;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px;
    color: #4A154B;
}
body.dark-mode .slack-empty-circle {
    background: rgba(74, 21, 75, 0.2);
    color: #D8BFD8;
}
.slack-empty-state h3 {
    font-size: 17px; font-weight: 700;
    color: var(--text-main); margin: 0;
}
.slack-empty-state p {
    font-size: 13px; color: var(--text-light); margin: 0;
    max-width: 280px;
}

/* Chat intro banner — WhatsApp-style header at top of conversation */
.chat-intro-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 28px 16px 18px;
    text-align: center;
}

.chat-intro-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

.chat-intro-avatar.chat-intro-group {
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 24px;
}

.chat-intro-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.chat-intro-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.3;
}

.chat-intro-role {
    font-size: 13px;
    color: var(--text-muted);
    font-style: italic;
}

/* Message container */
.chat-msg-container {
    flex: 1;
    padding: 24px 24px 8px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex; flex-direction: column;
    gap: 4px;
}

/* Date separator */
.chat-two-pane .date-separator {
    display: flex; align-items: center; justify-content: center;
    margin: 18px 0 12px;
}
.chat-two-pane .date-separator span {
    padding: 4px 14px;
    background: var(--bg-body);
    border-radius: 999px;
    color: var(--text-light);
    font-size: 11px; font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Message bubbles */
.chat-two-pane .message {
    display: flex;
    padding: 5px 0;
    animation: chatMsgIn 0.18s ease-out;
}
@keyframes chatMsgIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.chat-two-pane .message-avatar {
    width: 18px; height: 18px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: white; flex-shrink: 0;
    font-weight: 700; font-size: 8px;
    letter-spacing: 0.2px;
    position: relative;
    overflow: hidden;
}
.chat-two-pane .message-content {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    position: relative;
    gap: 0;
}
.chat-two-pane .message-header {
    display: flex; flex-direction: row; align-items: center; gap: 6px;
    margin-bottom: 8px;
    width: fit-content;
}
.chat-two-pane .message-author {
    font-weight: 600; font-size: 13.5px;
    color: var(--text-main);
}
.chat-two-pane .message-time {
    font-size: 11px; color: var(--text-light);
    font-weight: 400;
    margin-top: 1px;
    display: block;
}

/* Bubble: received */
.chat-two-pane .message-text {
    background: var(--bg-body);
    border: none;
    padding: 10px 16px;
    border-radius: 6px 18px 18px 18px;
    line-height: 1.55;
    max-width: 100%;
    width: fit-content;
    word-wrap: break-word; word-break: break-word; overflow-wrap: break-word;
    color: var(--text-main);
    font-size: 14px;
    position: relative;
}

/* Bubble: sent — content right-aligned, avatar stays left in header */
.chat-two-pane .message.sent .message-text {
    background: var(--accent);
    color: white;
    border-radius: 18px 6px 18px 18px;
}

/* Mention pill inside sent (blue) bubbles — white-on-blue */
.chat-two-pane .message.sent .mention-pill {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}
.chat-two-pane .message.sent .mention-pill:hover {
    background: rgba(255, 255, 255, 0.35);
}
.chat-two-pane .message.sent .mention-pill.mention-me {
    background: rgba(255, 255, 255, 0.30);
    font-weight: 600;
}
.chat-two-pane .message.sent .message-content {
    align-items: flex-end;
}

/* Bubble style: minimal/outline (from settings) */
.chat-two-pane.bubble-style-minimal .message-text {
    background: transparent;
    border: 1.5px solid var(--border-subtle);
    color: var(--text-main);
}
.chat-two-pane.bubble-style-minimal .message.sent .message-text {
    background: transparent;
    border-color: var(--accent);
    color: var(--accent);
}

/* Timestamp style: subtle */
.chat-two-pane.timestamp-subtle .message-time {
    font-size: 10px;
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.chat-two-pane.timestamp-subtle .message:hover .message-time { opacity: 1; }
.chat-two-pane.timestamp-subtle .message-header { margin-bottom: 1px; }

/* Compact mode */
.chat-two-pane.chat-compact .message { padding: 2px 0; gap: 5px; }
.chat-two-pane.chat-compact .message-avatar {
    width: 20px; height: 20px; font-size: 8px;
    border-radius: 50%;
    margin-top: 0;
}
.chat-two-pane.chat-compact .message-text {
    padding: 7px 14px; font-size: 13px;
    border-radius: 4px 14px 14px 14px;
}
.chat-two-pane.chat-compact .message.sent .message-text {
    border-radius: 14px 14px 14px 4px;
}
.chat-two-pane.chat-compact .message-header { margin-bottom: 1px; }
.chat-two-pane.chat-compact .message-author { font-size: 12px; }
.chat-two-pane.chat-compact .date-separator { margin: 10px 0 8px; }

/* Hide avatars preference */
.chat-two-pane.chat-hide-avatars .message-avatar { display: none; }

/* Message bubbles are clickable to open reaction + action toolbar */
.chat-two-pane .message-text { cursor: pointer; }

/* ---- Message bubble row: wraps bubble + inline reply button ---- */
.chat-two-pane .message-bubble-row {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
}
/* Sent: reverse so reply btn appears on the LEFT (inner side) of the bubble */
.chat-two-pane .message.sent .message-bubble-row {
    flex-direction: row-reverse;
}
/* File-only message — no text bubble, just float reaction badges if any */
.chat-two-pane .message-bubble-row.file-only {
    padding: 0;
    min-height: 0;
}

/* Row wrapper: file ref block + reply button side-by-side */
.chat-two-pane .message-ref-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.chat-two-pane .message.sent .message-ref-row {
    flex-direction: row-reverse;
}

/* ---- Reply button (hover, inline) ---- */
.chat-two-pane .chat-reply-btn {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    color: var(--text-muted);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--transition-fast), background var(--transition-fast);
    z-index: 4;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    flex-shrink: 0;
    padding: 0;
}
.chat-two-pane .message { position: relative; }
.chat-two-pane .message:hover .chat-reply-btn { opacity: 1; }
.chat-two-pane .chat-reply-btn:hover {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}

/* ---- Reaction + action pill toolbar ---- */
.chat-msg-toolbar {
    position: fixed;
    z-index: 10001;
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    padding: 4px 6px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    animation: chatToolbarIn 0.12s ease-out;
}
@keyframes chatToolbarIn {
    from { opacity: 0; transform: scale(0.92) translateY(4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.chat-msg-toolbar-emojis {
    display: flex;
    align-items: center;
    gap: 2px;
}
.chat-msg-toolbar-emoji {
    width: 32px; height: 32px;
    border: none;
    background: transparent;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--transition-fast), transform 0.1s ease;
}
.chat-msg-toolbar-emoji:hover {
    background: var(--bg-body);
    transform: scale(1.18);
}
.chat-msg-toolbar-divider {
    width: 1px;
    height: 22px;
    background: var(--border-subtle);
    margin: 0 4px;
    flex-shrink: 0;
}
.chat-msg-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}
.chat-msg-toolbar-action {
    width: 30px; height: 30px;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--transition-fast);
}
.chat-msg-toolbar-action:hover {
    background: var(--accent-soft);
    color: var(--accent);
}
.chat-msg-toolbar-action-danger:hover {
    background: var(--danger-soft, rgba(239,68,68,0.08));
    color: var(--danger, #ef4444);
}
body.dark-mode .chat-msg-toolbar {
    background: var(--bg-elevated, #1e1e1e);
    border-color: var(--border-subtle);
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

/* ---- Reaction badges (below bubble) ---- */
.chat-reactions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    position: absolute;
    bottom: -12px;
    z-index: 4;
}
.chat-reactions-row:empty {
    display: none;
}

/* Received: reactions anchored to bottom-right of the text bubble */
.chat-two-pane .message:not(.sent) .chat-reactions-row {
    right: -10px;
}
/* Sent: reactions anchored to bottom-left of the text bubble */
.chat-two-pane .message.sent .chat-reactions-row {
    left: -10px;
}

/* Add bottom clearance only when reactions are present */
.chat-two-pane .message:has(.chat-reactions-row:not(:empty)) {
    padding-bottom: 14px;
}
.chat-reaction-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-body);
    font-size: 14px;
    cursor: pointer;
    transition: all var(--transition-fast);
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    padding: 0;
}

/* Single reaction — just the emoji, circle */
.chat-reaction-badge.reaction-single {
    width: 28px;
    height: 28px;
    justify-content: center;
    padding: 0;
}
.chat-reaction-badge.reaction-single .reaction-emoji {
    font-size: 13px;
}

/* Multi reaction — emoji + avatars, pill */
.chat-reaction-badge.reaction-multi {
    padding: 3px 6px 3px 5px;
    height: 26px;
    gap: 4px;
}
.chat-reaction-badge.reaction-multi .reaction-emoji {
    font-size: 13px;
}

/* Stacked avatar initials inside multi badge */
.reaction-avatars {
    display: flex;
    align-items: center;
}
.reaction-avatar {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7px;
    font-weight: 700;
    color: #fff;
    border: 1.5px solid var(--bg-body);
    margin-left: -4px;
    position: relative;
}
.reaction-avatar:first-child {
    margin-left: 0;
}
.reaction-avatar-overflow {
    background: var(--bg-elevated, #e0e0e0);
    color: var(--text-muted);
    font-size: 7px;
    font-weight: 600;
}

.chat-reaction-badge .chat-reaction-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}
.chat-reaction-badge:hover {
    border-color: var(--accent);
    background: var(--bg-surface);
    opacity: 1;
}
.chat-reaction-badge.active {
    border-color: var(--accent);
    background: #dbe9fd;
}
.chat-reaction-badge.active .reaction-emoji {
    filter: none;
}
.chat-reaction-badge.active .chat-reaction-count {
    color: var(--accent);
}

/* ---- Reply preview in message ---- */
.chat-reply-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: var(--bg-body);
    border-left: 3px solid var(--accent);
    border-radius: 6px 12px 12px 6px;
    margin-bottom: 4px;
    font-size: 12.5px;
    color: var(--text-muted);
    cursor: pointer;
    max-width: 80%;
    width: fit-content;
    overflow: hidden;
    transition: all var(--transition-fast);
}
.chat-reply-preview:hover {
    background: var(--accent-soft);
}
.chat-reply-preview i { font-size: 10px; color: var(--accent); flex-shrink: 0; }
.chat-reply-preview-name { font-weight: 600; color: var(--accent); white-space: nowrap; }
.chat-reply-preview-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-light);
}

/* Sent: preview sits above the blue bubble — uses faint blue tint */
.message.sent .chat-reply-preview {
    background: var(--accent-soft);
    border-left-color: var(--accent);
}
.message.sent .chat-reply-preview:hover {
    background: rgba(0, 112, 243, 0.18);
}
.message.sent .chat-reply-preview-name { color: var(--accent); }
.message.sent .chat-reply-preview-text { color: var(--text-muted); }
.message.sent .chat-reply-preview i { color: var(--accent); }

body.dark-mode .chat-reply-preview {
    background: rgba(255, 255, 255, 0.06);
    border-left-color: var(--accent);
}
body.dark-mode .chat-reply-preview:hover {
    background: rgba(255, 255, 255, 0.10);
}
body.dark-mode .message.sent .chat-reply-preview {
    background: rgba(0, 112, 243, 0.14);
}
body.dark-mode .message.sent .chat-reply-preview:hover {
    background: rgba(0, 112, 243, 0.22);
}
body.dark-mode .chat-reaction-badge.active {
    background: #1a3a5c;
}

/* ---- Reply bar — pill above composer ---- */
.chat-reply-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px 6px 14px;
    margin: 0 18px 6px;
    background: var(--bg-body);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    animation: chatToolbarIn 0.12s ease-out;
    min-width: 0;
}
.chat-reply-bar-body {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}
.chat-reply-bar-icon {
    font-size: 12px;
    color: var(--accent);
    flex-shrink: 0;
}
.chat-reply-bar-text {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 12.5px;
}
.chat-reply-bar-name {
    font-weight: 600;
    color: var(--accent);
    white-space: nowrap;
}
.chat-reply-bar-preview {
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-reply-bar-close {
    width: 24px; height: 24px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}
.chat-reply-bar-close:hover {
    background: var(--bg-body);
    color: var(--text-main);
}

/* Edited indicator */
.msg-edited {
    font-size: 10px;
    color: var(--text-muted);
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.1px;
    text-transform: none;
    margin-left: 6px;
    opacity: 0.8;
    vertical-align: middle;
}
.message.sent .msg-edited {
    color: rgba(255, 255, 255, 0.7);
}

/* Inline edit textarea */
/* Inline edit textarea — sits seamlessly inside the bubble */
.chat-inline-edit-input {
    width: 100%;
    min-height: 1.55em;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.5;
    outline: none;
    box-shadow: none;
    resize: none;
    overflow: hidden;
    box-sizing: border-box;
}

/* Bubble in edit mode — keep same shape, just add a subtle accent ring */
.message-text[data-editing="true"] {
    box-shadow: 0 0 0 2px var(--accent), 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Sent bubble turns white when editing for contrast */
.message.sent .message-text[data-editing="true"] {
    background: #fff;
    color: var(--text-main);
}
.message.sent .message-text[data-editing="true"] .chat-inline-edit-input {
    color: var(--text-main);
}

/* ---- Composer ---- */
.chat-composer {
    display: flex;
    flex-direction: column;
    padding: 12px 18px 14px;
    background: var(--bg-surface);
    overflow: visible;
}
.chat-composer-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: var(--bg-body);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    padding: 5px 10px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.chat-composer-inner:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0,112,243,0.08);
}
/* When textarea wraps to multiple lines, drop pill shape and pin buttons to bottom */
.chat-composer-inner.multiline {
    border-radius: var(--radius-lg);
    align-items: flex-end;
}
.chat-composer-ref-btn {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-light);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}
.chat-composer-ref-btn:hover {
    color: var(--accent);
    background: var(--accent-soft);
}
.chat-composer-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    font-family: inherit;
    padding: 8px 4px;
    color: var(--text-main);
    min-width: 0;
    resize: none;
    overflow: hidden;
    line-height: 1.55;
    max-height: 120px;
    overflow-y: auto;
}
.chat-composer-input::placeholder { color: var(--text-light); }
.chat-composer-send {
    width: 34px; height: 34px;
    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);
    flex-shrink: 0;
}
.chat-composer-send:hover {
    background: var(--accent-hover);
    transform: scale(1.06);
}

/* ---- In-pane panel (settings / new chat replace the main area) ---- */
.chat-two-pane .chat-inpane-view {
    display: none;
    flex-direction: column;
    position: absolute;
    inset: 0;
    z-index: 10;
    overflow: hidden;
    background: var(--bg-surface);
}

.chat-inpane-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
    background: var(--bg-surface);
}

.chat-inpane-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

.chat-inpane-back-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    transition: background var(--transition-fast);
}

.chat-inpane-back-btn:hover {
    background: var(--bg-hover, rgba(0, 0, 0, 0.05));
}

.chat-inpane-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* Group settings identity header */
.chat-settings-identity {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 4px;
}
.chat-settings-big-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
}
.chat-settings-big-avatar svg {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}
.chat-settings-identity-info {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    min-width: 0;
}
.chat-settings-name-input {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-main);
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    width: 100%;
    letter-spacing: -0.02em;
}
.chat-settings-name-input:focus {
    border-bottom: 2px solid var(--accent);
}

.chat-inpane-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-shrink: 0;
    background: var(--bg-surface);
}

body.dark-mode .chat-inpane-back-btn:hover {
    background: var(--bg-hover, rgba(255, 255, 255, 0.06));
}

/* ---- Reference block in messages ---- */
.chat-ref-block {
    display: flex; align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--accent-soft);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    font-size: 13px;
    max-width: 72%;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid transparent;
}
.chat-ref-block:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(0,112,243,0.1);
}
.chat-ref-block .ref-open-icon {
    margin-left: auto; font-size: 11px;
    color: var(--text-light);
    opacity: 0; transition: opacity var(--transition-fast);
    flex-shrink: 0;
}
.chat-ref-block:hover .ref-open-icon { opacity: 1; }
.ref-icon { color: var(--accent); font-size: 14px; flex-shrink: 0; }
.ref-body {
    display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.ref-title {
    font-weight: 600; color: var(--text-main);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ref-subtitle {
    font-size: 12px; color: var(--text-light);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-ref-restricted {
    background: var(--bg-body);
    cursor: default; opacity: 0.65;
    border-color: transparent;
}
.chat-ref-restricted:hover { border-color: transparent; box-shadow: none; }
.chat-ref-restricted .ref-icon { color: var(--text-light); }
.chat-ref-restricted .ref-title { color: var(--text-light); font-style: italic; }

/* Highlight flash (from reference click navigation) */
@keyframes refHighlight {
    0%   { box-shadow: 0 0 0 3px var(--accent); }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.highlighted { animation: refHighlight 2s ease-out; }

/* ===== Shared Modal System ===== */
.chat-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;
    z-index: 10010;
    animation: chatOverlayIn 0.15s ease-out;
}
@keyframes chatOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.chat-modal-panel {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    width: 400px;
    max-width: 92vw;
    max-height: 85vh;
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,0.18), 0 8px 24px rgba(0,0,0,0.08);
    animation: chatPanelIn 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.0);
}
@keyframes chatPanelIn {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-modal-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-subtle);
}
.chat-modal-bar h3 {
    margin: 0; font-size: 16px; font-weight: 700;
    letter-spacing: -0.01em;
}
.chat-modal-close {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: none;
    background: var(--bg-body);
    color: var(--text-muted);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    transition: all var(--transition-fast);
}
.chat-modal-close:hover {
    background: var(--danger-soft);
    color: var(--danger);
}
.chat-modal-body {
    padding: 18px 22px;
    overflow-y: auto;
    flex: 1;
}
.chat-modal-footer {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--border-subtle);
}
/* Downsize Teamster buttons when inside chat modals/empty states */
.chat-modal-footer .btn-primary,
.chat-modal-footer .btn-secondary,
.chat-modal-footer .btn-danger,
.chat-empty-state .btn-primary,
.chat-room-list-empty .btn-primary {
    padding: 10px 22px;
    font-size: 14px;
}

/* Shared field components */
.chat-field-label {
    display: block;
    font-size: 11.5px; font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 6px;
}
.chat-field-input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: 14px;
    background: var(--bg-body);
    color: var(--text-main);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.chat-field-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0,112,243,0.08);
    background: var(--bg-surface);
}
.chat-field-input::placeholder { color: var(--text-light); }

/* ---- New Chat Modal ---- */
.chat-new-panel { width: 420px; }
.chat-new-panel .chat-modal-body {
    padding: 20px 24px;
    display: flex; flex-direction: column;
    gap: 16px;
}
.chat-new-panel .chat-field-input {
    border-radius: var(--radius-md);
    padding: 12px 16px;
    font-size: 15px;
}
.chat-new-type-toggle {
    display: inline-flex; gap: 4px;
    width: fit-content;
    background: var(--bg-surface);
    border-radius: 999px;
    padding: 4px;
    border: 1px solid var(--border-subtle);
}
.chat-type-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.chat-type-btn:hover {
    color: var(--text-main);
    background: var(--bg-body);
}
.chat-type-btn.active {
    background: rgb(183, 183, 183);
    color: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
.chat-new-section-label {
    font-size: 12px; font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.chat-new-members-list {
    display: flex; flex-direction: column;
    gap: 0;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-body);
}
.chat-new-member-item {
    display: flex; align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background var(--transition-fast);
    border-bottom: 1px solid var(--border-subtle);
}
.chat-new-member-item:last-child { border-bottom: none; }
.chat-new-member-item:hover { background: rgba(0,0,0,0.025); }
.chat-new-member-item input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 20px; height: 20px;
    border: 2px solid var(--border-medium);
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}
.chat-new-member-item input[type="checkbox"]:checked {
    background: var(--accent);
    border-color: var(--accent);
}
.chat-new-member-item input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px; font-weight: 700;
    color: white;
}
.chat-new-member-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
    color: white; flex-shrink: 0;
}
.chat-new-member-name {
    font-size: 14px; font-weight: 500;
    color: var(--text-main);
    flex: 1;
}
.chat-new-no-members {
    text-align: center; color: var(--text-light);
    font-size: 13px; padding: 32px 16px;
}

/* ---- Reference picker modal ---- */
.chat-ref-panel { width: 380px; }
.chat-ref-modal-hint {
    font-size: 13px; color: var(--text-light);
    margin: 0 0 16px;
}
.chat-ref-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.chat-ref-type-btn {
    display: flex; flex-direction: column;
    align-items: center; gap: 8px;
    padding: 18px 8px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    cursor: pointer;
    font-size: 12.5px; font-weight: 500;
    color: var(--text-main);
    transition: all var(--transition-fast);
}
.chat-ref-type-btn:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.chat-ref-type-icon {
    width: 40px; height: 40px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    background: hsl(var(--ref-hue, 210) 85% 95%);
    color: hsl(var(--ref-hue, 210) 70% 45%);
}

/* ---- Delete confirmation modal ---- */
.chat-delete-panel { width: 360px; }
.chat-delete-hint {
    font-size: 14px; color: var(--text-muted);
    line-height: 1.55; margin: 0;
}

/* ---- Room settings modal ---- */
.chat-settings-panel { width: 420px; }
.chat-settings-members {
    display: flex; flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
}
.chat-settings-member {
    display: flex; align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}
.chat-settings-member:hover { background: rgba(0,0,0,0.03); }
.chat-settings-member-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.chat-settings-member-name {
    flex: 1; font-size: 14px; color: var(--text-main);
}
.chat-settings-remove-btn {
    background: none; border: none; cursor: pointer;
    color: var(--text-light); font-size: 13px;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: all var(--transition-fast);
}
.chat-settings-member:hover .chat-settings-remove-btn { opacity: 1; }
.chat-settings-remove-btn:hover {
    background: var(--danger-soft);
    color: var(--danger);
}
.chat-settings-add-members {
    display: flex; flex-direction: column;
    gap: 2px;
    max-height: 180px;
    overflow-y: auto;
}
.chat-settings-add-item {
    display: flex; align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    transition: background var(--transition-fast);
}
.chat-settings-add-item:hover { background: rgba(0,0,0,0.03); }
.chat-settings-add-item input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px; height: 18px;
    border: 2px solid var(--border-medium);
    border-radius: 6px;
    cursor: pointer; position: relative;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}
.chat-settings-add-item input[type="checkbox"]:checked {
    background: var(--accent);
    border-color: var(--accent);
}
.chat-settings-add-item input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px; font-weight: 700;
    color: white;
}
.chat-settings-add-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 10px; font-weight: 700; flex-shrink: 0;
}
.chat-settings-add-name { color: var(--text-main); }
.chat-settings-no-add {
    font-size: 13px; color: var(--text-light); margin: 0; padding: 12px 0;
    text-align: center;
}

/* ---- Chat background picker grid ---- */
.chat-bg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 4px;
}
.chat-bg-option {
    width: 100%;
    aspect-ratio: 1.3;
    border-radius: var(--radius-md);
    border: 2px solid var(--border-subtle);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--text-muted);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    background: var(--bg-body);
}
.chat-bg-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-light);
    pointer-events: none;
    text-align: center;
    line-height: 1.3;
}
.chat-bg-option:hover {
    border-color: var(--text-light);
    transform: scale(1.04);
}
.chat-bg-option.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(0, 112, 243, 0.18);
}
.chat-bg-option.active::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 9px;
    color: white;
    position: absolute;
    top: 5px;
    right: 5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
body.dark-mode .chat-bg-option {
    border-color: rgba(255,255,255,0.08);
    background-color: var(--bg-elevated, #1e1e1e);
}
body.dark-mode .chat-bg-option:hover {
    border-color: rgba(255,255,255,0.2);
}
body.dark-mode .chat-bg-option.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.25);
}
body.dark-mode .chat-bg-option.active::after {
    background: var(--accent);
}

/* ---- Chat bg picker: thumbnail previews ---- */
.chat-bg-option[data-bg="bg1"] {
    background-image: url('/img/auth-background.png');
    background-size: cover;
    background-position: center top;
}
.chat-bg-option[data-bg="bg1"] .chat-bg-label {
    color: rgba(20, 55, 100, 0.9);
    text-shadow: 0 1px 3px rgba(255,255,255,0.7);
    font-weight: 600;
}

/* ---- Chat main area: applied backgrounds ---- */
/* The ::before covers both the message list AND the composer.
   mask-image fades it smoothly at the top and bottom edges.    */
/* isolation:isolate creates a contained stacking context so z-index:-1 on
   ::before stays above the element's own background but below its children. */
.chat-main-area[data-chat-bg] {
    isolation: isolate;
}
.chat-main-area[data-chat-bg]::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 9%,
        black 88%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 9%,
        black 88%,
        transparent 100%
    );
}
.chat-main-area[data-chat-bg="bg1"]::before {
    background-image: url('/img/auth-background.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}
/* Composer background must be transparent so the ::before shows through */
.chat-main-area[data-chat-bg] .chat-composer {
    background: transparent;
}
body.dark-mode .chat-main-area[data-chat-bg="bg1"]::before {
    background-image:
        linear-gradient(rgba(0,0,0,0.38), rgba(0,0,0,0.38)),
        url('/img/auth-background.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

/* ===== Dark Mode ===== */
body.dark-mode .chat-sidebar {
    background: var(--bg-surface);
    border-right-color: var(--border-subtle);
}
body.dark-mode .chat-two-pane {
    box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
body.dark-mode .chat-search-box {
    background: transparent;
    border-color: var(--border-subtle);
}
body.dark-mode .chat-search-box:focus-within {
    border-color: var(--accent);
}
body.dark-mode .chat-room-item:hover { background: rgba(255,255,255,0.05); }
body.dark-mode .chat-room-item.active { background: var(--accent-soft); }
body.dark-mode .chat-room-icon { background: rgba(255,255,255,0.06); }
body.dark-mode .chat-room-item.active .chat-room-icon {
    background: var(--accent); color: white;
}
body.dark-mode .chat-composer-inner {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}
body.dark-mode .chat-two-pane .message-text {
    background: rgba(255,255,255,0.06);
}
body.dark-mode .chat-two-pane .message.sent .message-text {
    background: var(--accent);
    color: white;
}
body.dark-mode .chat-two-pane .message-actions {
    background: var(--bg-surface);
    border-color: rgba(255,255,255,0.08);
}
body.dark-mode .chat-empty-circle {
    background: rgba(10,132,255,0.12);
}
body.dark-mode .chat-modal-panel {
    box-shadow: 0 32px 80px rgba(0,0,0,0.5);
}
body.dark-mode .chat-modal-close {
    background: rgba(255,255,255,0.06);
}
body.dark-mode .chat-field-input {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}
body.dark-mode .chat-field-input:focus {
    background: rgba(255,255,255,0.06);
}
body.dark-mode .chat-icon-picker-pill {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.8);
}
body.dark-mode .chat-icon-picker-pill:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.15);
}
body.dark-mode .chat-icon-picker-pill.active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}
body.dark-mode .chat-icon-picker {
    background: var(--bg-alt);
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
body.dark-mode .chat-color-picker {
    background: var(--bg-alt);
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
body.dark-mode .chat-new-type-toggle {
    background: var(--bg-surface);
    border-color: var(--border-subtle);
}
body.dark-mode .chat-type-btn.active {
    background: var(--accent);
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
}
body.dark-mode .chat-new-member-item:hover,
body.dark-mode .chat-settings-member:hover,
body.dark-mode .chat-settings-add-item:hover { background: rgba(255,255,255,0.04); }
body.dark-mode .chat-new-member-item input[type="checkbox"],
body.dark-mode .chat-settings-add-item input[type="checkbox"] {
    border-color: rgba(255,255,255,0.15);
}
body.dark-mode .chat-ref-type-btn {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
}
body.dark-mode .chat-ref-type-btn:hover {
    background: rgba(10,132,255,0.12);
    border-color: var(--accent);
}
body.dark-mode .chat-ref-type-icon {
    background: hsla(var(--ref-hue, 210), 60%, 30%, 0.3);
    color: hsl(var(--ref-hue, 210) 80% 65%);
}
body.dark-mode .chat-two-pane .date-separator span {
    background: rgba(255,255,255,0.06);
    color: var(--text-light);
}
body.dark-mode .chat-inline-edit-input {
    background: transparent;
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
    .chat-two-pane {
        max-height: calc(100vh - 80px);
        border-radius: var(--radius-lg);
    }
    .chat-sidebar {
        width: 100%; min-width: unset;
        position: absolute; inset: 0; z-index: 2;
        transition: transform var(--transition-medium);
    }
    .chat-main-area {
        position: absolute; inset: 0; z-index: 1;
        background: var(--bg-surface);
        transform: translateX(100%);
        transition: transform var(--transition-medium);
    }
    .chat-two-pane { position: relative; overflow: hidden; }
    .chat-two-pane.show-main .chat-main-area {
        transform: translateX(0); z-index: 3;
    }
    .chat-back-btn { display: flex; }
    .chat-msg-container { padding: 16px 14px 8px; }
    .chat-two-pane .message-text { max-width: 85%; }
    .chat-composer-inner { padding: 4px 8px; border-radius: 999px; }
    .chat-composer-input {
        padding: 0 4px;
        height: 34px;
        min-height: 34px;
        max-height: 34px;
        line-height: 34px;
        overflow: hidden;
        font-size: 14px;
        box-sizing: border-box;
    }
    .chat-search-box { }
    .chat-search-input { }
    .chat-sidebar-search { }
}

/* ===================================
   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: auto;
    max-height: none;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    overflow: visible; /* Allow full grid height so last row shows */
    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);
    flex-shrink: 0; /* Don't shrink on mobile */
    width: 100%; /* Always viewport width */
    overflow: visible; /* Allow dropdowns to extend */
}

.calendar-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.calendar-title-section {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    gap: 12px;
    justify-items: center;
    position: relative;
    width: clamp(280px, 32vw, 360px); /* Keep nav arrows fixed in place across month widths */
}

.calendar-month-selector {
    position: relative;
    display: inline-block;
}

.calendar-month-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 1.5rem;
    font-weight: 700;
    border: none;
    background: transparent;
    color: var(--text-main);
    cursor: pointer;
    letter-spacing: -0.02em;
    border-radius: 8px;
    transition: all 0.15s ease;
}

.calendar-month-trigger:hover {
    background: var(--light-gray);
}

.calendar-month-trigger i {
    font-size: 12px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
    margin-left: 4px;
}

.calendar-month-selector.open .calendar-month-trigger i {
    transform: rotate(180deg);
}

.calendar-title {
    /* Legacy - kept for compatibility */
    display: none;
}

.calendar-title span {
    font-weight: 700;
}

.calendar-month-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 260px;
    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: 2000;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.calendar-month-selector.open .calendar-month-dropdown {
    opacity: 1;
    visibility: visible;
    max-height: 420px;
    overflow-y: auto;
}
.calendar-dropdown-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 12px;
}

.calendar-dropdown-group-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
}

.calendar-month-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 4px;
}

.calendar-month-option,
.calendar-year-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    font-size: 0.9rem;
    color: var(--text-main);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    border: none;
    background: transparent;
    border-radius: 10px;
    width: 100%;
}

.calendar-month-option:hover,
.calendar-year-option:hover {
    background: var(--bg-hover);
}

.calendar-month-option i,
.calendar-year-option i {
    font-size: 10px;
    color: var(--accent);
    opacity: 0;
    transition: opacity 0.15s ease;
    width: 10px;
    text-align: center;
}

.calendar-month-option.selected,
.calendar-year-option.selected {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

.calendar-month-option.selected i,
.calendar-year-option.selected i {
    opacity: 1;
}

.calendar-year-list {
    max-height: 320px;
    overflow-y: auto;
    padding-right: 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

body.dark-mode .calendar-month-trigger {
    color: var(--text-main);
}

body.dark-mode .calendar-month-trigger:hover {
    background: rgba(255, 255, 255, 0.1);
}

body.dark-mode .calendar-month-dropdown {
    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 .calendar-month-option:hover {
    background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .calendar-month-option.selected {
    background: rgba(0, 122, 255, 0.2);
    color: var(--accent);
}

/* 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;
}

/* Mobile: Compact calendar header */
@media (max-width: 768px) {
    .calendar-header {
        padding: 8px 12px;
        gap: 8px;
        flex-wrap: nowrap; /* Keep all items on one row */
    }

    .calendar-title-section {
        display: grid;
        grid-template-columns: 32px auto 32px;
        align-items: center;
        gap: 8px;
        justify-items: center;
        width: clamp(240px, 60vw, 320px);
    }

    .calendar-month-trigger {
        font-size: 0.95rem;
        padding: 6px 10px;
        cursor: default;
    }

    .calendar-month-trigger i {
        display: none;
    }

    .calendar-month-selector {
        pointer-events: none;
    }

    .calendar-month-dropdown {
        display: none;
    }

    .calendar-title {
        font-size: 0.95rem;
        margin: 0;
        white-space: nowrap;
    }

    .calendar-nav-btn {
        width: 28px;
        height: 28px;
        font-size: 12px;
        flex-shrink: 0;
    }

    .calendar-view-toggle {
        padding: 2px;
        gap: 2px;
        flex-shrink: 0;
        margin-left: auto; /* Push to right edge */
    }

    .view-toggle-btn {
        padding: 7px 14px;
        font-size: 12px;
        gap: 3px;
        min-height: auto;
        min-width: auto;
    }

    .calendar-add-btn {
        width: 32px;
        height: 32px;
        font-size: 12px;
        flex-shrink: 0;
    }
}

.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; /* Allow content to be visible */
    min-height: auto; /* Remove fixed min-height */
    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),
.calendar-grid:has(.week-view-scroll-container),
.calendar-grid.week-view-active {
    display: block;
    border: none;
    background: transparent;
    gap: 0;
}

/* Hide day headers when week view is showing */
.calendar-grid:has(.week-colview) > .calendar-day-header,
.calendar-grid:has(.week-view-scroll-container) > .calendar-day-header,
.calendar-grid.week-view-active > .calendar-day-header {
    display: none !important;
}

.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-surface);
    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;
    /* Ensures calendar days flow directly in parent grid */
}

#calendarDays:has(.week-colview) {
    display: block;
}

/* Force calendar days to be direct grid children */
#calendarDays > .calendar-day {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* 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;
}

/* Mobile/Tablet: larger day tiles with horizontal scroll */
@media (max-width: 900px) {
    .calendar-container {
        overflow-x: auto !important; /* Allow horizontal scroll */
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
        display: flex;
        flex-direction: column;
    }

    /* Header stays fixed at viewport width, never scrolls */
    .calendar-header {
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        max-width: 100vw;
        z-index: 10;
        background: var(--bg-surface);
        box-sizing: border-box;
    }

    .calendar-grid {
        display: grid !important; /* Force grid layout */
        grid-template-columns: repeat(7, 140px) !important; /* Fixed width columns */
        overflow: visible !important; /* Let container handle scroll */
        width: max-content;
        min-width: calc(7 * 140px);
        gap: 4px;
        padding: 10px;
        min-height: auto;
        padding-bottom: 60px;
    }

    .calendar-day-header {
        min-width: 140px;
        width: 140px;
        padding: 10px;
        font-size: 12px;
    }

    .calendar-day {
        min-width: 140px;
        width: 140px;
        min-height: 110px;
        padding: 8px 10px;
        border-radius: 10px;
    }
    
    /* Ensure calendarDays children flow into grid */
    #calendarDays {
        display: contents !important;
    }
    
    #calendarDays > .calendar-day {
        min-width: 140px;
        width: 140px;
    }
}

/* 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);
}

/* ===================================
   CALENDAR TASK DOTS
   Tasks with due dates shown as small icon circles
   =================================== */

/* Month view: dots row aligned left, positioned after day-number */
/* Header row: day number + task dots inline */
.day-header-row {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    justify-content: flex-end;
}

.day-header-row .day-number {
    order: 0;
}

.day-header-row .calendar-task-dots {
    order: -1;
    flex: 1;
    justify-content: flex-end;
}

.calendar-task-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 0;
    align-items: center;
}

/* Individual task dot */
.cal-task-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cal-task-dot:hover {
    transform: scale(1.25);
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    z-index: 2;
}

/* SVG icon inside the dot */
.cal-task-dot-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 10px;
    color: #fff;
}

.cal-task-dot-icon svg {
    width: 100%;
    height: 100%;
    stroke: #fff;
    fill: none;
}

/* Lock icon for private sheet tasks */
.cal-task-lock {
    position: absolute;
    bottom: -2px;
    right: -2px;
    font-size: 6px;
    color: #fff;
    background: rgba(0,0,0,0.55);
    border-radius: 50%;
    width: 10px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.cal-task-lock::before {
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(2px);
}

/* Overflow count badge */
.cal-task-dot-overflow {
    font-size: 8px;
    font-weight: 600;
    color: var(--text-muted);
    padding-left: 1px;
}

/* ===================================
   CALENDAR TASK DOT TOOLTIP
   =================================== */
.cal-task-tooltip {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-subtle, rgba(0,0,0,0.1));
    border-radius: 10px;
    padding: 9px 12px;
    min-width: 150px;
    max-width: 240px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.13), 0 1.5px 5px rgba(0,0,0,0.07);
    opacity: 0;
    transform: scale(0.94) translateY(3px);
    transition: opacity 0.13s ease, transform 0.13s ease;
}

.cal-task-tooltip.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.cal-tooltip-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.35;
    margin-bottom: 5px;
    word-break: break-word;
}

.cal-tooltip-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;
}

.cal-tooltip-pri-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cal-tooltip-pri-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cal-tooltip-sheet,
.cal-tooltip-due {
    font-size: 11.5px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-tooltip-sheet i,
.cal-tooltip-due i {
    font-size: 10px;
    flex-shrink: 0;
    opacity: 0.7;
}

body.dark-mode .cal-task-tooltip {
    background: #2c2c2e;
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 6px 24px rgba(0,0,0,0.4), 0 1.5px 5px rgba(0,0,0,0.25);
}

/* Event tooltip extras (color dot, time, description, visibility) */
.cal-tooltip-color-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}

.cal-tooltip-time {
    font-size: 11.5px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 3px;
}
.cal-tooltip-time i {
    font-size: 10px;
    opacity: 0.7;
    flex-shrink: 0;
}

.cal-tooltip-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.35;
    margin-top: 3px;
    margin-bottom: 2px;
    word-break: break-word;
    opacity: 0.85;
}

.cal-tooltip-vis {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
}
.cal-tooltip-vis i {
    font-size: 10px;
    opacity: 0.7;
    flex-shrink: 0;
}

/* Week view header: task dots inline after day number */
.calendar-task-dots-week {
    padding: 2px 0 0;
    gap: 2px;
    justify-content: center;
}

.cal-task-dot-week {
    width: 16px;
    height: 16px;
}

.cal-task-dot-week .cal-task-dot-icon {
    width: 9px;
    height: 9px;
}

/* Mobile agenda tasks row */
.day-agenda-tasks-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-subtle);
}

.day-agenda-tasks-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.day-agenda-tasks-row .calendar-task-dots-week {
    padding: 0;
}

/* 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% {
        background: var(--accent-soft);
        box-shadow: 0 0 0 0 var(--accent);
    }
    50% {
        background: var(--accent-soft);
        box-shadow: 0 0 0 6px rgba(0, 112, 243, 0.15);
    }
    100% {
        background: var(--bg-surface);
        box-shadow: 0 0 0 0 rgba(0, 112, 243, 0.0);
    }
}

.highlight-row {
    animation: highlight-pulse 1.6s ease;
    scroll-margin-top: 120px; /* Account for sticky headers */
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* 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 — replaced by floating tooltip */
.week-event-hover-details {
    display: none !important;
}

.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: mobile week view uses day agenda */
@media (max-width: 899px) {
    /* Hide column view on small screens */
    .week-colview {
        display: none !important;
    }

    /* Make sure the mobile agenda is visible and full width */
    .day-agenda {
        display: flex !important;
    }

    .calendar-grid:has(.day-agenda) {
        display: block;
        width: 100%;
        padding: 0;
        overflow: visible;
    }

    #calendarDays:has(.day-agenda) {
        display: block;
    }
}

@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.4;
    cursor: grabbing;
    transform: scale(0.98);
    box-shadow: none;
    z-index: 1;
}

/* Calendar Drag Preview - Floating element during drag */
.calendar-drag-preview {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--event-color, #007AFF);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    min-width: 140px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.drag-preview-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.drag-preview-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    letter-spacing: -0.01em;
}

.drag-preview-time {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    padding: 4px 8px;
    background: var(--bg-body);
    border-radius: 6px;
    width: fit-content;
}

.drag-preview-time::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--event-color, #007AFF);
    border-radius: 50%;
    flex-shrink: 0;
}

/* Time indicator in time column */
.calendar-drag-time-indicator {
    position: fixed;
    z-index: 9999;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Target column highlight during drag */
.week-day-column.drag-target-column {
    background: rgba(0, 122, 255, 0.04);
}

.week-day-column.drag-target-column .week-day-grid {
    background: rgba(0, 122, 255, 0.02);
}

/* Target time slot highlight */
.week-grid-cell.drag-target-slot {
    background: rgba(0, 122, 255, 0.12) !important;
    border: 1px dashed rgba(0, 122, 255, 0.4);
}

/* Body state during drag */
body.calendar-dragging {
    cursor: grabbing !important;
    user-select: none;
}

body.calendar-dragging * {
    cursor: grabbing !important;
}

/* Dark mode styles for drag preview */
body.dark-mode .calendar-drag-preview {
    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), 0 2px 8px rgba(0, 0, 0, 0.25);
}

body.dark-mode .calendar-drag-time-indicator {
    background: rgba(40, 40, 45, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .week-day-column.drag-target-column {
    background: rgba(0, 122, 255, 0.08);
}

body.dark-mode .week-day-column.drag-target-column .week-day-grid {
    background: rgba(0, 122, 255, 0.04);
}

body.dark-mode .week-grid-cell.drag-target-slot {
    background: rgba(0, 122, 255, 0.2) !important;
    border: 1px dashed rgba(0, 122, 255, 0.5);
}

/* Event resize handle */
.week-event-resize-handle {
    position: absolute;
    left: 0;
    right: 0;
    height: 8px;
    cursor: ns-resize;
    background: transparent;
    transition: background 0.15s ease;
    z-index: 2;
}

.week-event-resize-top {
    top: 0;
    border-radius: 6px 6px 0 0;
}

.week-event-resize-bottom {
    bottom: 0;
    border-radius: 0 0 6px 6px;
}

.week-event-resize-handle::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.week-event-resize-top::after {
    top: 2px;
}

.week-event-resize-bottom::after {
    bottom: 2px;
}

.week-col-event:hover .week-event-resize-handle::after {
    opacity: 1;
}

.week-event-resize-handle:hover {
    background: rgba(0, 122, 255, 0.1);
}

.week-event-resize-handle:hover::after {
    background: var(--accent);
    opacity: 1;
}

/* Resizing state */
.week-col-event.resizing {
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    transition: none;
}

.week-col-event.resizing .week-event-resize-handle {
    background: rgba(0, 122, 255, 0.2);
}

.week-col-event.resizing .week-event-resize-handle::after {
    background: var(--accent);
    opacity: 1;
}

/* Month view event dragging */
.month-event-item[draggable="true"] {
    cursor: grab;
}

.month-event-item[draggable="true"]:active {
    cursor: grabbing;
}

.month-event-item.dragging {
    opacity: 0.5;
    transform: none;
    width: 100%;
    max-width: 100%;
}

/* Task dot dragging state */
.cal-task-dot[draggable="true"] {
    cursor: grab;
}
.cal-task-dot[draggable="true"]:active {
    cursor: grabbing;
}
.cal-task-dot.dragging {
    opacity: 0.35;
    transform: scale(0.85);
}

/* Allow drag events to pass through to calendar-day during drag */
.calendar-day .month-events,
.calendar-day .month-event-item:not(.dragging) {
    pointer-events: auto;
}

/* When dragging over a calendar day, ALL children must be transparent to pointer events */
.calendar-day.drag-over * {
    pointer-events: none !important;
}

/* Calendar day drag-over state (month view) */
.calendar-day.drag-over {
    background: rgba(0, 122, 255, 0.1) !important;
    position: relative;
}

.calendar-day.drag-over::after {
    content: '';
    position: absolute;
    inset: 2px;
    border: 2px dashed var(--accent);
    border-radius: 6px;
    pointer-events: none;
    z-index: 5;
}

body.dark-mode .calendar-day.drag-over {
    background: rgba(0, 122, 255, 0.15) !important;
}

.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);
    }
    
    /* Mobile calendar header: [< Month >] [Week|Month toggle] [+ btn] - single row */
    .calendar-header {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
    }
    
    /* Title section comes first (left side) with nav arrows */
    .calendar-title-section {
        order: 1;
        flex: 0 0 auto;
        display: flex;
        width: auto;
    }

    .calendar-header-actions {
        order: 2;
    }
    
    .calendar-title-section > div {
        gap: 4px !important;
    }
    
    .calendar-title {
        font-size: 0.9rem;
        white-space: nowrap;
    }
    
    /* Hide year on mobile - show only month */
    .calendar-title span {
        display: none;
    }
    
    .calendar-nav-btn {
        width: 24px;
        height: 24px;
        font-size: 10px;
    }
    
    /* View toggle - compact */
    .calendar-view-toggle {
        order: 2;
        flex-shrink: 0;
        margin-left: auto;
        border-radius: 999px !important;
        padding: 2px !important;
        width: auto;
    }
    
    .view-toggle-btn {
        padding: 7px 12px;
        font-size: 12px;
        border-radius: 999px !important;
        min-height: auto;
        min-width: auto;
    }
    
    /* Add button comes last (right side) */
    .calendar-add-btn {
        order: 3;
        width: 28px;
        height: 28px;
        flex-shrink: 0;
    }
    
    .calendar-today-btn {
        padding: 4px 8px;
        font-size: 10px;
    }
    
    .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: rgba(0, 0, 0, 0.4);
    text-transform: none;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.detail-label i {
    color: rgba(0, 0, 0, 0.4);
    width: 14px;
}

body.dark-mode .detail-label {
    color: rgba(255, 255, 255, 0.38);
}

body.dark-mode .detail-label i {
    color: rgba(255, 255, 255, 0.38);
}

.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%;
}

/* Project Back Button */
.project-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.project-back-btn:hover {
    background: var(--bg-hover);
    color: var(--text-main);
    border-color: var(--border-medium);
}

.project-back-btn i {
    font-size: 12px;
}

/* Dark mode for project back button */
body.dark-mode .project-back-btn {
    background: var(--bg-tertiary);
    border-color: var(--border-subtle);
    color: var(--text-secondary);
}

body.dark-mode .project-back-btn:hover {
    background: var(--bg-hover);
    color: var(--text-main);
    border-color: var(--accent);
}

/* Dark mode for btn-primary */
body.dark-mode .btn-primary {
    background: var(--accent);
    color: white;
}

body.dark-mode .btn-primary:hover {
    background: var(--accent-hover);
}

/* Unified Project Empty State */
.project-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
    color: var(--text-muted);
    grid-column: 1 / -1;
}

.project-empty-state i {
    font-size: 56px;
    margin-bottom: 20px;
    opacity: 0.4;
    color: var(--text-muted);
}

.project-empty-state h4 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-main);
    margin: 0 0 8px 0;
}

.project-empty-state p {
    font-size: 14px;
    margin: 0;
    color: var(--text-muted);
}


.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);
}

.card-badge-row {
    position: absolute;
    right: 12px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    pointer-events: auto;
    z-index: 4;
}

.card-badge-row .spreadsheet-private-tag,
.card-badge-row .doc-private-badge {
    position: static;
    margin: 0;
}

.card-pin-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(142, 142, 147, 0.12);
    color: var(--text-muted);
    font-size: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.card-pin-badge i {
    transform: rotate(-12deg);
}

.card-pin-badge.pinned {
    color: var(--text-muted);
    border-color: var(--border-medium);
    background: var(--bg-body);
}

.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-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
}

.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 Panel - Inline View
   =================================== */

/* Hide ALL cards/headers when spreadsheet panel is open */
#tasks-section.spreadsheet-open .spreadsheet-header,
#tasks-section.spreadsheet-open .spreadsheet-cards,
#tasks-section.spreadsheet-open .docs-header,
#tasks-section.spreadsheet-open .doc-cards,
#tasks-section.spreadsheet-open .project-view-header,
#tasks-section.spreadsheet-open #projectViewHeader,
#tasks-section.spreadsheet-open #projectEmptyState {
    display: none !important;
}

/* 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;
}

/* Panel header buttons: pill for text+icon, circle for icon-only */
.panel-header-right .icon-btn {
    width: auto;
    height: 36px;
    padding: 8px 14px;
    border-radius: 999px;
}

.panel-header-right .icon-btn.icon-only {
    width: 36px;
    padding: 0;
    border-radius: 50%;
}

/* 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;
    overflow: visible;
    position: relative;
}

.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-icon-preview svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
}

.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: 180px;
    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: 16px 20px 0 20px;
    overflow: hidden;
    background: var(--bg-main);
    display: flex;
    flex-direction: column;
}

.table-container {
    background: var(--bg-surface);
    border-radius: 12px 12px 14px 14px;
    overflow-x: auto;
    overflow-y: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border-subtle);
    flex: 1;
    min-height: 0;
    margin-bottom: 20px;
}

/* ===================================
   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;
}

/* 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;
}

/* Multi-assignee avatar stack */
.assignee-avatar-stack {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.assignee-avatar-stack .assignee-avatar {
    margin-right: -8px;
    box-shadow: 0 0 0 2px var(--bg-surface, #fff);
}
.assignee-avatar-stack .assignee-avatar:last-child {
    margin-right: 0;
}
.assignee-avatar.assignee-stack-more {
    background: var(--bg-surface-soft, #E5E5EA);
    color: var(--text-muted, #6B7280);
    font-size: 9px;
    font-weight: 700;
}
.assignee-cell .assignee-avatar-stack + .assignee-name {
    margin-left: 8px;
}

/* 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: 130px;
    cursor: pointer;
}

/* ===================================
   PROGRESS SLIDER - Gradient Colors
   Fixed gradient revealed by gray overlay from right
   =================================== */
.progress-range-slider {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 6px;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    /* Fixed full-width gradient as bottom layer, gray overlay covering unrevealed portion */
    background:
        linear-gradient(to right, transparent 0%, transparent var(--progress, 0%), #e5e5ea var(--progress, 0%), #e5e5ea 100%),
        linear-gradient(90deg, #FF3B30 0%, #FF9500 33%, #FFCC00 66%, #34C759 100%);
    background-size: 100% 100%, 100% 100%;
    /* Prevent touch scroll interference on mobile */
    touch-action: none;
}

.progress-range-slider::-webkit-slider-container {
    height: 6px;
}

.progress-range-slider::-webkit-slider-runnable-track {
    height: 6px;
    background: transparent;
    border-radius: 3px;
}

.progress-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    margin-top: -4px; /* Center the thumb vertically: (thumb_height - track_height) / 2 = (14-6)/2 = 4 */
    background: white;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: none;
}

.progress-range-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}

.progress-range-slider::-webkit-slider-thumb:active {
    background: white;
    transform: scale(1.1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.progress-range-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: white;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.progress-range-slider::-moz-range-thumb:active {
    background: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.progress-range-slider::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background:
        linear-gradient(to right, transparent 0%, transparent var(--progress, 0%), #e5e5ea var(--progress, 0%), #e5e5ea 100%),
        linear-gradient(90deg, #FF3B30 0%, #FF9500 33%, #FFCC00 66%, #34C759 100%);
    background-size: 100% 100%, 100% 100%;
}

.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;
}

/* Team Avatar with icon - unified black circle */
.assignee-option-avatar.team-avatar,
.assignee-avatar.team-avatar {
    background: #000;
    border-radius: 50%;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
}

.assignee-option-avatar.team-avatar i,
.assignee-avatar.team-avatar i {
    font-size: 11px;
    color: white;
    margin: 0;
    padding: 0;
    line-height: 1;
}

/* Customer Dropdown Styles */
.customer-dropdown {
    min-width: 240px;
    max-width: 320px;
    max-height: 340px;
}

.customer-dropdown-search {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-subtle);
    position: sticky;
    top: 0;
    background: white;
    z-index: 1;
    border-radius: 12px 12px 0 0;
}

.customer-search-input {
    width: 100%;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    outline: none;
    background: var(--bg-secondary);
    color: var(--text-main);
    transition: border-color 0.15s ease;
}

.customer-search-input:focus {
    border-color: var(--accent);
}

.customer-dropdown-options {
    max-height: 260px;
    overflow-y: auto;
}

.customer-company-tag {
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 400;
    margin-left: auto;
    padding-right: 4px;
}

.customer-add-new-option {
    border-top: 1px solid var(--border-subtle);
    color: var(--text-main);
    font-weight: 500;
}

.customer-add-new-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: white;
    flex-shrink: 0;
    background: var(--accent);
}

.customer-add-new-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.customer-add-new-label strong {
    color: var(--text-main);
    font-weight: 600;
}

body.dark-mode .customer-dropdown-search {
    background: var(--bg-primary);
}

body.dark-mode .customer-search-input {
    background: var(--bg-tertiary);
    border-color: var(--border-subtle);
    color: var(--text-main);
}

/* 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 with reveal overlay */
body.dark-mode .progress-range-slider {
    background:
        linear-gradient(to right, transparent 0%, transparent var(--progress, 0%), #3a3a3c var(--progress, 0%), #3a3a3c 100%),
        linear-gradient(90deg, #FF3B30 0%, #FF9500 33%, #FFCC00 66%, #34C759 100%) !important;
    background-size: 100% 100%, 100% 100% !important;
}

body.dark-mode .custom-slider-range {
    background:
        linear-gradient(to right, transparent 0%, transparent var(--progress, 0%), #3a3a3c var(--progress, 0%), #3a3a3c 100%),
        linear-gradient(90deg, var(--slider-color, #9CA3AF) 0%, var(--slider-color, #9CA3AF) 100%) !important;
    background-size: 100% 100%, 100% 100% !important;
}

body.dark-mode .progress-range-slider::-webkit-slider-thumb {
    background: #f5f5f7;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

body.dark-mode .progress-range-slider::-webkit-slider-thumb:active {
    background: #f5f5f7;
}

body.dark-mode .progress-range-slider::-moz-range-thumb {
    background: #f5f5f7;
}

body.dark-mode .progress-range-slider::-moz-range-track {
    background:
        linear-gradient(to right, transparent 0%, transparent var(--progress, 0%), #3a3a3c var(--progress, 0%), #3a3a3c 100%),
        linear-gradient(90deg, #FF3B30 0%, #FF9500 33%, #FFCC00 66%, #34C759 100%);
    background-size: 100% 100%, 100% 100%;
}

/* 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;
}

/* Circular button overrides for project add and create doc buttons */
#projectAddBtn,
#createDocBtn {
    border-radius: 50% !important;
    padding: 10px !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    gap: 0 !important;
    gap: 0 !important;
}

.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);
    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: var(--bg-surface);
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
}

body.dark-mode .task-modal-content {
    background: var(--bg-surface);
    box-shadow: var(--shadow-soft);
}

.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 {
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.dropdown-icon svg,
.unified-dropdown-icon svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
}

.unified-dropdown-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.dropdown-menu-option .dropdown-icon {
    color: var(--text-muted);
}

.dropdown-menu-option.active .dropdown-icon {
    color: var(--accent);
}

.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 (shared across inline + options) */
.dropdown-assignee-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

/* Team avatar - unified black circle */
.dropdown-assignee-avatar.team-avatar,
.assignee-option-avatar.team-avatar,
.assignee-avatar.team-avatar {
    background: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown-assignee-avatar.team-avatar i,
.assignee-option-avatar.team-avatar i,
.assignee-avatar.team-avatar i {
    font-size: 11px;
    color: white;
    line-height: 1;
    margin: 0;
    padding: 0;
}

/* Modal Progress Container - bigger version of table slider (Safari-compatible) */
.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::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
}

.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 edit style modal panel */
.ss-edit-panel .chat-inpane-header .unified-modal-close {
    margin-left: auto;
}

.ss-edit-panel {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    width: 460px;
    max-width: 96vw;
    min-height: 420px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,0.18), 0 8px 24px rgba(0,0,0,0.08);
    animation: chatPanelIn 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.0);
}
.ss-edit-panel .chat-inpane-body {
    overflow: visible;
    position: relative;
    z-index: 2;
}
.ss-edit-panel .chat-inpane-footer {
    position: relative;
    z-index: 1;
}
/* Sheet icon picker buttons (SVG-based) */
.ss-icon-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 2px solid transparent;
    background: var(--bg-alt);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    transition: border-color 0.1s, background 0.1s;
    color: var(--text-main);
}
.ss-icon-btn svg { width: 100%; height: 100%; display: block; }
.ss-icon-btn:hover { background: var(--accent-soft); }
.ss-icon-btn.active { border-color: var(--accent); background: var(--accent-soft); }
/* Sheet color swatch buttons */
.ss-color-swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: outline-color 0.1s, transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}
.ss-color-swatch:hover { transform: scale(1.15); }
.ss-color-swatch.active { outline-color: var(--accent); }
/* Icon pill preview for SVG icons */
.ss-icon-pill-preview {
    display: flex;
    align-items: center;
    justify-content: center;
}
.ss-icon-pill-preview svg { width: 12px; height: 12px; display: block; }

/* Vertical grid for the sheet icon picker (2-col narrow dropdown) */
.ss-icon-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    width: auto !important;
}
/* Narrow vertical dropdowns for sheet edit panel */
.ss-edit-panel .chat-icon-picker {
    width: 88px;
    grid-template-columns: repeat(2, 1fr);
    place-items: center;
    gap: 8px;
}
.ss-edit-panel .chat-color-picker {
    width: 70px;
    grid-template-columns: repeat(2, 1fr);
    place-items: center;
    gap: 10px;
}
/* Narrow vertical dropdowns for sheet create modal (same layout as edit panel) */
#spreadsheetModal .chat-icon-picker {
    width: 88px;
    grid-template-columns: repeat(2, 1fr);
    place-items: center;
    gap: 8px;
}
#spreadsheetModal .chat-color-picker {
    width: 70px;
    grid-template-columns: repeat(2, 1fr);
    place-items: center;
    gap: 10px;
}
#spreadsheetModal .unified-modal-body {
    overflow: visible;
    position: relative;
    z-index: 2;
}
#spreadsheetModal .unified-modal-footer {
    position: relative;
    z-index: 1;
}
.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);
}


.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;
}

@media (max-width: 480px) {
    .event-color-picker {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 2px;
    }
    .event-color-picker::-webkit-scrollbar { display: none; }
    .event-color-option {
        width: 30px;
        height: 30px;
        flex-shrink: 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: 88px;
        padding: 16px 10px;
    }
    
    .sidebar-header .logo span,
    .nav-item span:not(.notification-badge),
    .user-info {
        display: none;
    }
    
    .sidebar-nav {
        align-items: center;
        gap: 4px;
    }
    
    .nav-item {
        justify-content: center;
        align-items: center;
        padding: 0;
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
        aspect-ratio: 1 / 1;
        box-sizing: border-box;
        border-radius: 50%;
        border: none;
    }

    .nav-item.active {
        border: 1px solid var(--accent);
        background: var(--accent-soft);
        color: var(--accent);
    }
    
    .nav-item i {
        margin: 0;
    }
    
    .sidebar-footer {
        padding: 12px 6px;
    }

    .user-profile {
        justify-content: center;
    }

    .user-avatar {
        margin: 0 auto;
        width: 44px;
        height: 44px;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
    }

    /* Hide finance metric subtitles on tablet */
    .finance-metric-sub {
        display: none;
    }
}

/* ===================================
   MOBILE LAYOUT (768px and below)
   =================================== */
@media (max-width: 768px) {
    /* FINANCE: Mobile Toggle for Revenue/Expenses */
    .finance-mobile-toggle {
        display: inline-flex;
        background: var(--bg-surface);
        border-radius: 999px;
        padding: 3px;
        gap: 0;
        border: 1px solid var(--border-subtle);
        margin: 0 auto 16px auto;
    }
    
    /* Container to center the toggle */
    #financeMobileToggle {
        display: flex;
        justify-content: center;
    }
    
    .finance-mobile-toggle .toggle-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        border: none;
        background: transparent;
        color: var(--text-muted);
        font-size: 13px;
        font-weight: 600;
        border-radius: 999px;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .finance-mobile-toggle .toggle-btn:hover {
        color: var(--text-main);
        background: var(--bg-body);
    }
    
    .finance-mobile-toggle .toggle-btn.active[data-view="revenue"] {
        background: #34C759;
        color: white;
        box-shadow: 0 2px 8px rgba(52, 199, 89, 0.3);
    }
    
    .finance-mobile-toggle .toggle-btn.active[data-view="expenses"] {
        background: #FF3B30;
        color: white;
        box-shadow: 0 2px 8px rgba(255, 59, 48, 0.3);
    }
    
    .finance-mobile-toggle .toggle-btn i {
        font-size: 12px;
    }
    
    /* Hide columns based on toggle state */
    .finances-columns.show-revenue .expenses-column {
        display: none !important;
    }
    
    .finances-columns.show-expenses .revenue-column {
        display: none !important;
    }

    /* FINANCE: Stack columns vertically on mobile */
    .finances-columns {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .finance-column-header {
        padding: 12px 14px;
    }

    .finance-column .column-icon {
        display: none;
    }

    /* FINANCE METRICS: 2x2 grid on mobile, smaller cards */
    .finances-metrics-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 16px;
    }

    .finance-metric-card {
        padding: 12px;
        gap: 10px;
        flex-direction: column;
        align-items: flex-start;
    }

    .finance-metric-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .finance-metric-value {
        font-size: 18px;
    }

    .finance-metric-label {
        font-size: 10px;
    }

    .finance-metric-sub {
        display: none;
    }

    /* SUBSCRIPTIONS: Simplified row on mobile */
    .subscriptions-section {
        padding: 12px;
        margin-top: 16px;
    }

    .subscriptions-header {
        margin-bottom: 12px;
    }

    .subscriptions-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .subscriptions-title h2 {
        font-size: 15px;
    }

    .subscription-row {
        padding: 12px;
        gap: 10px;
        border-radius: 12px;
    }

    .subscription-info {
        flex: 1;
        min-width: 0;
    }

    .subscription-logo {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .subscription-details {
        flex: 1;
        min-width: 0;
    }

    .subscription-name {
        font-size: 13px;
    }

    /* Hide extra meta info on mobile subscriptions */
    .subscription-meta {
        display: none;
    }

    .subscription-amount-col {
        gap: 4px;
    }

    .subscription-amount {
        font-size: 14px;
    }

    .subscription-frequency {
        font-size: 10px;
    }

    .subscription-actions {
        margin-left: 8px;
        gap: 2px;
    }

    .subscription-action-btn {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    /* Hide link button, keep only edit/delete */
    .subscription-action-btn.link {
        display: none;
    }

    /* Settings padding on mobile */
    #settings-section {
        padding-top: 16px;
        padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 20px);
    }
    .settings-container {
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 0;
        padding-bottom: 0;
    }
    .settings-page-layout {
        padding-left: 0;
        padding-right: 0;
    }

    /* 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%;
        overflow-x: hidden;
        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 - no scroll on body */
    body {
        padding: 0;
        margin: 0;
        overflow: hidden; /* Prevent body from scrolling */
        position: fixed;
        width: 100%;
        height: 100%;
    }
    
    /* Mobile bottom navigation - always visible with safe area support */
    .sidebar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
        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, 0px); /* iOS home indicator safe area */
        box-sizing: border-box;
        z-index: 9000; /* High z-index to stay above content but below modals */
        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;
        transform: translateZ(0); /* Force GPU layer for smooth sticky behavior */
    }
    
    /* 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: 1px solid var(--accent);
    }
    
    /* 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 */
        /* Use internal padding instead of outer margin to avoid page overscroll */
        margin-bottom: 0;
    }
    
    /* Top bar - fixed at top on mobile */
    .top-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        padding-left: max(12px, env(safe-area-inset-left) + 10px);
        padding-right: max(12px, env(safe-area-inset-right) + 10px);
        padding-top: calc(8px + env(safe-area-inset-top));
        border-radius: 0;
        z-index: 8000;
        background: var(--bg-surface);
        border-bottom: 1px solid var(--border-subtle);
    }
    
    /* Content sections - account for fixed top bar and bottom nav */
    .content-section {
        padding-left: 10px;
        padding-right: 10px;
        padding-top: calc(56px + env(safe-area-inset-top)); /* Space for fixed top bar */
        width: 100%;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        /* Bottom padding ensures content is never hidden behind fixed nav */
        padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 20px);
    }

    /* Calendar section should not scroll, only grid inside */
    #calendar-section {
        overflow-x: hidden;
    }
    
    /* 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%;
        height: 44px;
        padding: 0 14px;
    }

    .search-wrapper {
        width: 100%;
        max-width: calc(100vw - 140px);
    }

    .topbar-avatar {
        display: inline-flex;
        width: 36px;
        height: 36px;
        cursor: pointer;
    }
    
    /* 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; /* Allow vertical scrolling */
        overflow-x: hidden; /* Section never scrolls horizontally */
        -webkit-overflow-scrolling: touch;
        padding-bottom: 120px; /* Extra scroll room to avoid cutoff */
    }
    
    #calendar-section .calendar-container {
        overflow: hidden; /* Container doesn't scroll */
        height: auto;
        max-height: none;
        min-height: auto;
        width: 100%; /* Container is viewport width */
        max-width: 100vw;
    }
    
    #calendar-section .calendar-header {
        width: 100%; /* Header is always full viewport width */
        max-width: 100vw;
        overflow: hidden;
        position: sticky;
        top: 0;
        left: 0;
        z-index: 10;
        background: var(--bg-surface);
    }
    
    #calendar-section .calendar-grid {
        overflow-x: auto; /* Only grid scrolls horizontally */
        -webkit-overflow-scrolling: touch;
    }
    
    /* Calendar view toggle mobile - keep compact */
    .calendar-view-toggle {
        margin-bottom: 0;
        gap: 2px;
        padding: 2px;
    }
    
    .view-toggle-btn {
        padding: 8px 16px;
        font-size: 13px;
        border-radius: 999px;
        min-height: auto;
        min-width: auto;
    }
    
    /* 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
       =================================== */
    
    /* Core action buttons — 44px touch target for primary interactive elements */
    .btn-primary,
    .btn-secondary,
    .btn-danger,
    .btn-icon,
    .icon-btn,
    .nav-item,
    .modal-footer button,
    .spreadsheet-controls button,
    .task-item-actions button,
    .event-actions button,
    .message-actions button {
        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: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    
    .header-toggle-row .sheets-docs-toggle {
        flex: 0 0 auto; /* Don't grow, don't shrink, auto width */
    }
}

/* ===================================
   SMALL MOBILE (480px and below)
   =================================== */
@media (max-width: 480px) {
    .nav-item span:not(.notification-badge) {
        display: none;
    }
    
    .nav-item {
        padding: 8px 8px;
        max-width: 56px;
    }

    .search-bar {
        height: 44px;
        padding: 0 12px;
    }
    
    .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;
}

.event-modal-footer-clean .unified-btn,
.event-modal-footer-clean .btn-clean {
    border-radius: 999px !important;
    padding: 10px 22px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
}

.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 {
    padding: 32px;
}

/* Meta row: code badge + member count on left, leave team on right */
.team-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    gap: 16px;
    flex-wrap: wrap;
}

.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
   =================================== */
.btn-leave-team {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 20px;
    line-height: 1;
    transition: all var(--transition-fast);
    border: 1.5px solid var(--danger);
    color: var(--danger);
    background: transparent;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.btn-leave-team:hover {
    background: rgba(255, 59, 48, 0.08);
}

.btn-leave-team i {
    font-size: 13px;
    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-surface-soft);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-subtle);
    margin-bottom: 20px;
    overflow: hidden;
}

.role-info-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
    list-style: none;
}

.role-info-summary::-webkit-details-marker {
    display: none;
}

.role-info-summary:hover {
    color: var(--text-main);
}

.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: 13px;
    color: var(--accent);
}

.role-info-card[open] .role-info-summary {
    border-bottom: 1px solid var(--border-subtle);
}

.role-info-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px 16px;
}

.role-info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.role-info-item:hover {
    background: var(--bg-surface-soft);
    border-color: var(--border-medium);
}

.role-info-icon {
    width: auto;
    height: auto;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    background: transparent;
    line-height: 1;
}

.role-info-icon.owner {
    color: #d4a017;
}

.role-info-icon.admin {
    color: var(--accent);
}

.role-info-icon.member {
    color: #8E8E93;
}

.role-info-icon i {
    font-size: 1em;
    filter: none;
}

.role-info-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.role-info-name {
    width: fit-content;
}

.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);
    border-color: var(--border-medium);
}

body.dark-mode .role-info-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .role-info-icon.owner {
    color: #f5c542;
}

body.dark-mode .role-info-icon.member {
    color: #A1A1AA;
}

body.dark-mode .role-info-card[open] .role-info-summary {
    border-bottom-color: var(--border-medium);
}

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: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.team-code-display {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-surface-soft, #f0f0f0);
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 700;
    color: var(--text-main);
    font-size: 14px;
    letter-spacing: 0.5px;
    border: 1px solid var(--border-subtle);
}

.btn-copy-code {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    font-size: 13px;
}

.btn-copy-code:hover {
    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 Outer Container */
.team-members-container {
    margin-top: 24px;
}

/* 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(200px, 1fr));
    gap: 14px;
}

.team-member-card {
    background: white;
    border: none;
    border-radius: 14px;
    padding: 16px;
    transition: all 0.2s ease;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.team-member-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

/* 3-dot menu button */
.member-card-menu-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.team-member-card:hover .member-card-menu-btn {
    opacity: 1;
}

.member-card-menu-btn:hover {
    background: var(--bg-surface-soft, #f0f0f0);
    color: var(--text-main);
}

/* Dropdown menu */
.member-card-dropdown {
    position: absolute;
    top: 38px;
    right: 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 100;
    min-width: 170px;
    padding: 4px;
    overflow: hidden;
}

.member-card-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main);
    border-radius: 8px;
    transition: background 0.15s ease;
    text-align: left;
}

.member-card-dropdown-item:hover {
    background: #f0f0f0;
    color: var(--text-main);
}

.member-card-dropdown-item:hover i {
    color: var(--accent);
}

.member-card-dropdown-item i {
    width: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* Member Activity Modal */
.member-activity-modal-content {
    background: var(--bg-surface);
    border-radius: 16px;
    width: 420px;
    max-width: 90vw;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    overflow: hidden;
}

.member-activity-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-subtle);
}

.member-activity-modal-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}

.member-activity-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.member-activity-close:hover {
    background: var(--bg-surface-soft, #f0f0f0);
}

.member-activity-list {
    overflow-y: auto;
    padding: 8px 12px;
    flex: 1;
}

.member-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 8px;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.member-activity-item:hover {
    background: var(--bg-surface-soft, #f5f5f5);
}

.member-activity-icon {
    color: var(--accent);
    font-size: 13px;
    margin-top: 3px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.member-activity-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.member-activity-desc {
    font-size: 13px;
    color: var(--text-main);
    line-height: 1.4;
}

.member-activity-time {
    font-size: 11px;
    color: var(--text-muted);
}

.member-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.member-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}
.member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.member-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 4px;
}

.member-detail-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.member-detail-value {
    font-size: 14px;
    color: var(--text-main);
    font-weight: 600;
}

/* Role Management Actions */
.member-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-subtle);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.team-member-card:hover .member-actions {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.btn-role-action {
    flex: 1;
    min-width: 60px;
    max-width: 110px;
    padding: 6px 10px;
    border: none;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.btn-role-action:hover {
    opacity: 0.85;
}

.btn-role-action:active {
    transform: scale(0.97);
}

.btn-role-action.promote {
    background: rgba(0, 112, 243, 0.12);
    color: var(--accent);
}

.btn-role-action.promote:hover {
    background: rgba(0, 112, 243, 0.2);
}

.btn-role-action.demote {
    background: rgba(255, 193, 7, 0.18);
    color: #b8860b;
}

.btn-role-action.demote:hover {
    background: rgba(255, 193, 7, 0.28);
}

.btn-role-action.remove {
    background: rgba(255, 59, 48, 0.12);
    color: #d62a2a;
}

.btn-role-action.remove:hover {
    background: rgba(255, 59, 48, 0.2);
}

/* Join Requests */
.join-requests-heading {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.join-requests-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.join-requests-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    transition: color var(--transition-fast);
}

.join-requests-toggle:hover {
    color: var(--text-main);
}

.join-requests-toggle i {
    font-size: 10px;
    transition: transform 0.2s ease;
}

.join-requests-toggle.expanded i {
    transform: rotate(90deg);
}

.join-request-item {
    background: #f9f9f9;
    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);
}

body.dark-mode .no-team-card {
    background: #1c1c1e;
    color: var(--text-main);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.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: 900px) {
    .team-members-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .team-members-grid {
        grid-template-columns: 1fr;
    }
    
    .team-meta-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .no-team-actions {
        grid-template-columns: 1fr;
    }
}

/* ===================================
   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;
}

@media (max-width: 480px) {
    .avatar-color-picker-flat {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 7px;
        padding-bottom: 2px;
        justify-content: flex-start;
    }
    .avatar-color-picker-flat::-webkit-scrollbar { display: none; }
    .avatar-color-picker-flat .color-circle {
        width: 28px;
        height: 28px;
        flex-shrink: 0;
    }
}

.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);
}

/* Profile Badges Container - Compact */
.profile-badges-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.badges-progress {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg-body);
    border-radius: 20px;
    font-size: 11px;
}

.badges-progress-info {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.badges-progress-label {
    color: var(--text-muted);
    font-weight: 500;
}

.badges-progress-count {
    color: var(--text-main);
    font-weight: 600;
    font-feature-settings: 'tnum' on;
}

.badges-progress-bar {
    width: 60px;
    height: 4px;
    background: var(--border-subtle);
    border-radius: 2px;
    overflow: hidden;
}

.badges-progress-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.badges-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.badge-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px 4px 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    transition: all 0.15s ease;
}

.badge-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.badge-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
}

.badge-name {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-main);
    white-space: nowrap;
}

.badges-empty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-body);
    border-radius: 16px;
    color: var(--text-muted);
    font-size: 12px;
}

.badges-empty i {
    font-size: 12px;
    opacity: 0.5;
}

.badges-locked {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.badge-item.badge-locked {
    opacity: 0.4;
    background: transparent;
    border-style: dashed;
    padding: 3px 8px 3px 3px;
}

.badge-item.badge-locked .badge-icon {
    background: var(--bg-body);
    color: var(--text-muted);
}

/* Badge item tooltips - white background with dark text - NOT transparent */
.badge-item[data-tooltip]::after {
    background: #ffffff !important;
    color: #333333 !important;
    opacity: 1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.badge-item.badge-locked[data-tooltip]::after {
    background: #ffffff !important;
    color: #333333 !important;
    opacity: 1 !important;
}

/* ===================================
   ACHIEVEMENTS TAB STYLES
   =================================== */

/* Two-column hero grid - matches Duolingo style */
.achievements-hero-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    gap: 32px;
}

/* XP Section - Left side */
.achievements-xp-section {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.xp-info {
    flex: 1;
    min-width: 0;
}

.xp-level-text {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.level-number-blue {
    color: #0052CC;
    font-weight: 700;
}

.xp-progress-container {
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
    width: 100%;
}

.xp-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #60efff, #0061ff);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.xp-text {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Streak Section - Right side */
.achievements-streak-section {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.streak-fire-icon {
    position: relative;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.streak-fire-icon i {
    font-size: 48px;
    color: #FF6B35;
}

.streak-fire-icon .streak-number {
    position: absolute;
    bottom: 6px;
    right: 6px;
    font-size: 20px;
    font-weight: 700;
    color: white;
    background: #FF6B35;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.streak-info {
    text-align: left;
}

.streak-label {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
}

.best-streak {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 2px;
}

/* Responsive - stack on small screens */
@media (max-width: 500px) {
    .achievements-hero-grid {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        position: relative;
    }

    .achievements-xp-section {
        width: 100%;
        position: relative;
        padding-right: 72px;
    }

    .xp-info {
        display: flex;
        flex-direction: column;
    }

    .xp-progress-container {
        width: 100%;
        height: 8px;
        order: 1;
    }

    .xp-text {
        order: 2;
        align-self: flex-start;
        font-size: 11px;
        margin-top: 6px;
    }

    .achievements-streak-section {
        position: absolute;
        top: 16px;
        right: 0;
        width: auto;
        justify-content: flex-end;
    }

    .streak-fire-icon {
        width: 44px;
        height: 44px;
    }

    .streak-fire-icon i {
        font-size: 30px;
    }

    .streak-fire-icon .streak-number {
        width: 20px;
        height: 20px;
        font-size: 13px;
    }

    .streak-info {
        display: none;
    }
}
    .achievements-hero-grid {
        grid-template-columns: 1fr;
    }


/* Achievement badges container */
.achievements-badges-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.badge-category {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.badge-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.badge-category-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.badge-category-title i {
    font-size: 12px;
    opacity: 0.7;
}

.badge-category-count {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.badge-category .badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}

.badge-category .badge-item {
    flex-direction: column;
    text-align: center;
    padding: 12px 8px;
    border-radius: 12px;
    gap: 6px;
}

.badge-category .badge-item .badge-icon {
    width: 36px;
    height: 36px;
    font-size: 14px;
}

.badge-category .badge-item .badge-name {
    font-size: 10px;
    line-height: 1.2;
}

.badge-category .badge-item.locked {
    opacity: 0.5;
}

.badge-category .badge-item.locked .badge-icon {
    background: var(--bg-tertiary) !important;
    color: var(--text-muted);
}

.badge-xp {
    font-size: 9px;
    color: var(--text-muted);
    font-weight: 500;
}

.badge-item.earned .badge-xp {
    color: #34C759;
}

/* Achievement stats list (rows format) */
.achievements-stats-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.achievement-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: none;
}

.achievement-stat-row .stat-label {
    font-size: 14px;
    color: #666666;
    font-weight: 400;
}

.achievement-stat-row .stat-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

/* Achievements disabled message */
.achievements-disabled-message {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
}

.achievements-disabled-message i {
    font-size: 48px;
    opacity: 0.3;
    margin-bottom: 16px;
    display: block;
}

.achievements-disabled-message p {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.achievements-disabled-message span {
    font-size: 13px;
}

/* Settings row hint text */
.settings-row-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Dark mode adjustments */
body.dark-mode .xp-progress-container {
    background: rgba(255, 255, 255, 0.15);
}

body.dark-mode .badge-category {
    background: var(--bg-elevated);
}

body.dark-mode .achievements-stats-list {
    background: transparent;
}

body.dark-mode .achievement-stat-row .stat-label {
    color: #999999;
}

body.dark-mode .streak-fire-icon .streak-number {
    color: #FF6B35;
}

/* 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;
}

/* Slack connect button in Settings > Profile */
.slack-connect-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: #fff;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #1D1C1D;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.slack-connect-btn:hover {
    border-color: #aaa;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.slack-connect-btn--linked {
    border-color: #2eb67d;
    color: #2eb67d;
}
.slack-connect-btn--linked:hover {
    border-color: #27a06d;
    box-shadow: 0 2px 6px rgba(46,182,125,.15);
}
body.dark-mode .slack-connect-btn {
    background: var(--bg-surface);
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

.theme-btn {
    flex: 0 0 auto;
    padding: 10px 18px;
    background: var(--bg-surface);
    border: 2px solid var(--border-subtle);
    border-radius: 24px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

.theme-btn:hover {
    background: var(--bg-body);
    border-color: var(--border-medium);
    color: var(--text-main);
}

.theme-btn.active {
    background: #ffffff;
    border-color: #b0b0b3;
    border-width: 2px;
    color: var(--text-main);
    padding: 10px 18px 10px 18px;
}

.theme-btn.active::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 13px;
    color: #34C759;
    -webkit-text-stroke: 0.5px #34C759;
    margin-right: 6px;
    margin-top: -2px;
    margin-bottom: -2px;
    line-height: 1;
    order: -1;
}

.theme-btn i {
    font-size: 12px;
}

.theme-selector-minimal {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Accent Color Picker Minimal */
.accent-color-picker-minimal {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.accent-color-picker-minimal::-webkit-scrollbar { display: none; }

@media (max-width: 480px) {
    .accent-color-picker-minimal .accent-dot {
        width: 28px;
        height: 28px;
        flex-shrink: 0;
    }
}

.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: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;
}

/* Help Tab FAQ Accordion */
.help-faq-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.help-faq-item {
    border-radius: 8px;
    background: var(--bg-secondary);
    overflow: hidden;
}

.help-faq-item summary {
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: background 0.15s;
    user-select: none;
}

.help-faq-item summary:hover {
    background: var(--bg-surface-soft);
}

.help-faq-item summary::-webkit-details-marker {
    display: none;
}

.help-faq-item summary::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.help-faq-item[open] summary::after {
    transform: rotate(180deg);
}

.help-faq-item p {
    padding: 0 16px 14px;
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.65;
}

/* Minimal Toggle */
.toggle-minimal {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}

.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);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 2px solid var(--border-subtle);
    border-radius: 50%;
    background: transparent;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
}

.mini-radio input:checked {
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: inset 0 0 0 2.5px var(--bg-surface);
}

.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;
    flex-shrink: 0;
    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="%23808080" 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-footer .footer-legal {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
}
.settings-footer .footer-legal a {
    color: var(--text-muted);
    font-weight: 400;
    text-decoration: none;
    transition: color .15s;
}
.settings-footer .footer-legal a:hover { color: var(--accent); }
.settings-footer .footer-legal-sep { opacity: .45; }

.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;
}

.settings-btn-outline.success {
    color: white;
    background: #34C759;
    border-color: #34C759;
}

.settings-btn-outline.success:hover {
    background: #30B854;
    border-color: #30B854;
}

/* ===== API Settings Pane ===== */
.api-section-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-medium);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 14px;
}

.api-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.api-section-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 14px;
    flex-shrink: 0;
}

.api-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.2;
}

.api-section-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.api-field-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.api-url-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.api-url-input {
    flex: 1;
    font-family: 'Menlo', 'Monaco', 'Consolas', monospace;
    font-size: 11.5px;
    background: var(--bg-body);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--text-muted);
    outline: none;
    cursor: default;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.api-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-body);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.api-icon-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-main);
}

.api-provider-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.api-chip-label {
    font-size: 11px;
    color: var(--text-light);
}

.api-chip-label code {
    font-family: monospace;
    background: var(--bg-body);
    padding: 1px 4px;
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-muted);
}

.api-chip {
    font-size: 11px;
    font-family: monospace;
    padding: 2px 8px;
    background: var(--bg-body);
    border: 1px solid var(--border-medium);
    border-radius: 20px;
    color: var(--text-muted);
    cursor: pointer;
    position: relative;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    -webkit-appearance: none;
    appearance: none;
}

.api-chip:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.api-chip.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.api-chip.active:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #fff;
}

.api-url-flash {
    animation: apiUrlFlash 0.55s ease-out;
}

@keyframes apiUrlFlash {
    0%   { background: var(--accent-soft); border-color: var(--accent); }
    100% { background: var(--bg-body);     border-color: var(--border-medium); }
}

.api-chip[title]:hover::after {
    content: attr(title);
    position: absolute;
    top: 120%;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 12px;
    background: var(--text-main);
    color: var(--bg-surface);
    border-radius: 6px;
    font-size: 11px;
    font-family: system-ui, -apple-system, sans-serif;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: tooltipFadeIn var(--transition-fast) ease-out;
}

.api-chip[title]:hover::before {
    content: '';
    position: absolute;
    top: 112%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid var(--text-main);
    z-index: 1000;
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.api-keys-list {
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
}

.api-empty-state {
    padding: 20px 16px;
    text-align: center;
    color: var(--text-light);
    font-size: 13px;
}

.api-key-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--border-subtle);
}

.api-key-row:last-child {
    border-bottom: none;
}

.api-key-info {
    flex: 1;
    min-width: 0;
}

.api-key-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}

.api-key-meta {
    font-size: 11px;
    color: var(--text-light);
    margin-top: 2px;
}

.api-key-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.api-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
}

.api-badge.active {
    background: var(--success-soft);
    color: #065F46;
}

.api-badge.revoked {
    background: var(--danger-soft);
    color: var(--danger);
}

.api-revoke-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.api-revoke-btn:hover {
    background: var(--danger-soft);
    color: var(--danger);
    border-color: rgba(255, 59, 48, 0.2);
}

.api-create-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Push Notification Settings Row */
.push-notif-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.push-notif-info span:first-child {
    color: var(--text-main);
}

.push-notif-status {
    font-size: 12px;
    color: var(--text-muted);
}

#pushNotificationRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

#pushNotificationRow .settings-btn-outline {
    flex-shrink: 0;
    padding: 8px 16px;
    font-size: 13px;
}

#pushNotificationRow .settings-btn-outline i {
    margin-right: 6px;
}

/* 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: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .theme-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .theme-btn.active {
    background: rgba(255, 255, 255, 0.95);
    border-color: #b0b0b3;
    color: #1c1c1e;
}

body.dark-mode .theme-btn.active::before {
    color: #30D158;
}

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: row;
        justify-content: flex-start;
    }
    
    .theme-btn {
        justify-content: center;
        padding: 6px 12px;
        font-size: 10px;
        gap: 4px;
        border-radius: 999px;
        flex: 0 0 auto;
    }
    
    .theme-btn.active::before {
        font-size: 9px;
    }

    .settings-footer {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 8px;
    }
    
    .settings-footer .footer-brand {
        flex: 1;
        min-width: 0;
    }
    
    .settings-footer .footer-brand span {
        font-size: 12px;
        white-space: nowrap;
    }
    
    .settings-footer .footer-links {
        flex-shrink: 0;
    }
    
    .settings-footer .footer-links a {
        width: 32px;
        height: 32px;
    }
    
    /* Settings section padding-bottom for mobile */
    .settings-section {
        padding-bottom: 40px;
    }
}

/* 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 WEEK PANEL (New Design)
   Left: merged task+event list  |  Right: mini month calendar
   =================================== */
.overview-week-panel {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-subtle);
}

/* Left column — task/event list */
.ov-week-left {
    flex: 1;
    min-width: 0;
}

.ov-week-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.ov-week-header h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}

/* Period toggle (Week / Month pills) */
.ov-period-toggle {
    display: flex;
    background: var(--bg-surface-soft);
    border-radius: 999px;
    padding: 3px;
    border: 1px solid var(--border-subtle);
}

.ov-period-btn {
    padding: 5px 16px;
    border-radius: 999px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.ov-period-btn.active {
    background: var(--bg-surface);
    color: var(--text-main);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.ov-period-btn:hover:not(.active) {
    color: var(--text-main);
}

/* Scrollable list */
.ov-week-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 380px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Individual item row — invisible at rest, pill on hover */
.ov-item-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease;
    outline: none;
    min-width: 0;
}

.ov-item-row:hover,
.ov-item-row:focus-visible {
    background: rgba(0, 0, 0, 0.045);
}

/* Priority / type dot — large enough to hold an icon */
.ov-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #fff;
}

.ov-dot-low { background: #22c55e; }
.ov-dot-medium { background: #f59e0b; }
.ov-dot-high { background: #ef4444; }
.ov-dot-event { background: var(--accent); }

/* Item title */
.ov-item-title {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Date label on the right */
.ov-item-date {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Row right-side indicator: assignee avatar (tasks) or visibility icon (events) */
.ov-item-indicator {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    letter-spacing: 0.3px;
    position: relative;
}
.ov-item-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.ov-item-event-icon {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-muted);
    font-size: 9px;
    width: 20px;
    height: 20px;
}
body.dark-mode .ov-item-event-icon {
    background: rgba(255, 255, 255, 0.12);
}

/* Empty state */
.ov-empty-state {
    text-align: center;
    color: var(--text-muted);
    padding: 32px 20px;
    font-size: 0.95rem;
}

/* --------- Mini Calendar (right column) --------- */
.overview-mini-calendar {
    flex: 0 0 252px;
    width: 252px;
    max-width: 252px;
    background: transparent;
    padding: 0;
    align-self: flex-start;
}

.ov-mini-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.ov-mini-cal-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
}

.ov-mini-cal-nav {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: background 0.15s ease, color 0.15s ease;
}

.ov-mini-cal-nav:hover {
    background: var(--bg-surface-soft);
    color: var(--text-main);
}

/* Day-of-week header row */
.ov-mini-cal-dow {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 4px;
}

.ov-mini-cal-dow span {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    padding: 4px 0;
}

/* Day grid */
.ov-mini-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.ov-mini-cal-day {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 auto;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s ease;
    user-select: none;
}

.ov-mini-cal-day:hover {
    background: var(--bg-surface-soft);
}

.ov-mini-cal-day.ov-mini-today {
    background: var(--accent);
    color: white;
    font-weight: 700;
}

.ov-mini-cal-day.ov-mini-today:hover {
    background: var(--accent);
    opacity: 0.85;
}

.ov-mini-cal-day.ov-mini-other {
    color: var(--text-muted);
    opacity: 0.45;
}

/* Event/task dot below day number */
.ov-mini-dot {
    position: absolute;
    bottom: 2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
}

.ov-mini-cal-day.ov-mini-today .ov-mini-dot {
    background: white;
}

/* ---- Dark mode ---- */
body.dark-mode .ov-item-row:hover,
body.dark-mode .ov-item-row:focus-visible {
    background: rgba(255, 255, 255, 0.07);
}

body.dark-mode .overview-mini-calendar {
    background: transparent;
}

body.dark-mode .ov-period-btn.active {
    background: var(--bg-surface);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* ---- Responsive: stack on narrow screens ---- */
@media (max-width: 900px) {
    .overview-week-panel {
        flex-direction: column;
    }
    .overview-mini-calendar {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 600px) {
    .ov-week-header h2 {
        font-size: 17px;
    }
    .overview-mini-calendar {
        padding: 12px;
    }
    .ov-mini-cal-day {
        height: 28px;
        font-size: 12px;
    }
    .ov-week-list {
        max-height: none;
        overflow-y: visible;
    }
}

/* ===================================
   LEGACY OVERVIEW STYLES (kept for skeleton compat)
   =================================== */
.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: repeat(auto-fit, minmax(320px, 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 {
        max-width: 100%;
        box-sizing: border-box;
    }

    .overview-two-col .overview-card {
        min-height: auto; /* Remove fixed height */
        max-width: 100%;
    }
    
    .overview-two-col .overview-tasks,
    .overview-two-col .overview-events {
        overflow-y: visible; /* Let page scroll naturally */
        max-height: none; /* Remove scroll trap */
        max-width: 100%;
    }
    
    .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%;
}

/* ===================================
   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);
}

/* Ghost preview shown during drag to keep cursor alignment tight */
.drag-ghost {
    pointer-events: none;
    opacity: 0.9;
    box-shadow: 0 6px 16px rgba(0,0,0,0.18);
    transform: scale(0.98);
}

/* 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: repeat(auto-fit, minmax(150px, 1fr));
        gap: 12px;
        margin-bottom: 20px;
    }

    .stat-card {
        padding: 12px;
        gap: 10px;
        border-radius: 12px;
    }

    .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .stat-number {
        font-size: 24px;
    }

    .stat-label {
        font-size: 12px;
    }
}

/* ===================================
   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: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 260px;
    max-width: 380px;
    animation: toastSlideIn 0.3s ease-out;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.toast.success .toast-icon {
    color: #22c55e;
}

.toast.error .toast-icon {
    color: #ef4444;
}

.toast.warning .toast-icon {
    color: #f59e0b;
}

.toast.info .toast-icon {
    color: #3b82f6;
}

.toast-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

.toast-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.toast-title {
    font-weight: 600;
    color: #1a1a1a;
    font-size: 14px;
    letter-spacing: -0.01em;
}

.toast-message {
    font-size: 13px;
    color: #666666;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.toast-close {
    background: none;
    border: none;
    font-size: 18px;
    color: #999999;
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease;
    flex-shrink: 0;
    line-height: 1;
    margin: 0;
}

.toast-close:hover {
    background-color: rgba(0, 0, 0, 0.06);
    color: #666666;
}

@keyframes toastSlideIn {
    0% {
        transform: translateX(100%) scale(0.9);
        opacity: 0;
    }
    100% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

@keyframes toastSlideOut {
    0% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateX(100%) scale(0.9);
        opacity: 0;
    }
}

.toast.closing {
    animation: toastSlideOut 0.25s cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* Dark mode toasts */
body.dark-mode .toast {
    background: #1f1f1f;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

body.dark-mode .toast-title {
    color: #ffffff;
}

body.dark-mode .toast-message {
    color: #a1a1aa;
}

body.dark-mode .toast-close {
    color: #71717a;
}

body.dark-mode .toast-close:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #a1a1aa;
}

@media (max-width: 768px) {
    #toastContainer {
        right: 12px;
        left: 12px;
        bottom: 12px;
        max-width: none;
    }
    
    .toast {
        min-width: 0;
        max-width: none;
        border-radius: 12px;
    }
}

/* ===================================
   XP TOAST — Styled like standard toasts (no purple)
   =================================== */
.toast.xp {
    align-items: flex-start;
    min-width: 320px;
    max-width: 460px;
    padding: 16px 18px;
}

.toast.xp .toast-title {
    display: flex;
    align-items: center;
    gap: 6px;
}

.toast-xp-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.toast-xp-level {
    font-size: 11px;
    font-weight: 600;
    color: #1f2937;
    background: rgba(96, 239, 255, 0.2);
    border: 1px solid rgba(0, 97, 255, 0.2);
    padding: 2px 6px;
    border-radius: 999px;
    white-space: nowrap;
}

.toast-xp-bar {
    flex: 1;
    min-width: 220px;
    height: 5px;
    background: #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
}

.toast-xp-bar-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #60efff, #0061ff);
    transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.toast-xp-amount {
    font-size: 12px;
    font-weight: 700;
    color: #3b82f6;
    white-space: nowrap;
    animation: xpAmountPulse 0.6s ease-out;
}

.toast.xp.level-up .toast-title {
    color: #f59e0b;
}

body.dark-mode .toast-xp-level {
    color: #e5e7eb;
    background: rgba(96, 239, 255, 0.15);
    border-color: rgba(0, 97, 255, 0.35);
}

body.dark-mode .toast-xp-bar {
    background: rgba(255, 255, 255, 0.15);
}

body.dark-mode .toast-xp-amount {
    color: #60a5fa;
}

@keyframes xpToastSlideIn {
    0% {
        transform: translateX(100%) scale(0.85);
        opacity: 0;
    }
    100% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

@keyframes xpToastSlideOut {
    0% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateX(110%) scale(0.85);
        opacity: 0;
    }
}

@keyframes xpAmountPulse {
    0% { transform: scale(1); }
    40% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

@keyframes xpBarShine {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes xpLevelPop {
    0% { transform: scale(0.6); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* ===================================
   CUSTOM TOOLTIPS (Reusable)
   =================================== */
[data-tooltip] {
    position: relative;
}

/* Exclude trend bar wrappers from global tooltip styling (they use custom JS tooltips) */
.trend-bar-wrapper[data-tooltip]::after {
    display: none;
}

.bar-chart-v3-bar-wrap[data-tooltip]::after {
    display: none;
}

.bar-chart-v4-bar-wrap[data-tooltip]::after {
    display: none;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #1c1c1e;
    color: #ffffff;
    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.2);
    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: 999px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

.delete-popup-btn.cancel {
    background: var(--bg-surface-soft);
    color: var(--text-main);
    border-color: var(--border-subtle);
}

.delete-popup-btn.cancel:hover {
    background: var(--bg-main);
    border-color: var(--border-medium);
}

.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;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(142, 142, 147, 0.12);
    color: var(--text-muted);
    font-size: 12px;
    padding: 0;
    border-radius: 50%;
    position: static;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.spreadsheet-private-tag i {
    font-size: 12px;
}

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: #2d2d30 !important;
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* 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-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 only - positioned from top */
    .settings-dropdown {
        position: fixed !important;
        top: 60px !important;
        right: 10px !important;
        left: 10px !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100vh - 80px) !important;
        overflow-y: auto !important;
        display: none;
    }
    
    .settings-dropdown.active {
        display: block !important;
    }
    
    /* Notifications dropdown - positioned as bottom sheet */
    /* (Main styling handled later in file at NOTIFICATIONS DROPDOWN MOBILE section) */
    
    /* Settings container on mobile */
    .settings-container {
        max-width: 100%;
        padding: 0 16px;
    }
    
    #settings-section {
        padding-top: 20px;
        padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 20px);
    }
    .settings-container {
        padding-left: 10px;
        padding-right: 10px;
    }
    .settings-page-layout {
        padding-left: 0;
        padding-right: 0;
    }
    
    .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:hover {
    background: rgba(10, 132, 255, 0.15);
}

/* ===================================
   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 {
}

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 - Dark Mode */
body.dark-mode .team-member-card {
    background: #1c1c1e;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

body.dark-mode .team-member-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

body.dark-mode .member-name {
    color: #f5f5f7;
}

body.dark-mode .member-detail-label {
    color: #8e8e93;
}

body.dark-mode .member-detail-value {
    color: #f5f5f7;
}

body.dark-mode .team-code-display {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-main);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .btn-copy-code {
    color: var(--text-muted);
}

body.dark-mode .btn-leave-team {
    border-color: #ff453a;
    color: #ff453a;
}

body.dark-mode .btn-leave-team:hover {
    background: rgba(255, 69, 58, 0.1);
}

body.dark-mode .member-card-menu-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .member-card-dropdown {
    background: #2c2c2e;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

body.dark-mode .join-request-item {
    background: rgba(255, 255, 255, 0.04);
}

body.dark-mode .member-card-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.09);
    color: #f5f5f7;
}

body.dark-mode .member-card-dropdown-item:hover i {
    color: var(--accent);
}

body.dark-mode .member-activity-modal-content {
    background: #2c2c2e;
}

body.dark-mode .member-activity-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* 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: transparent;
}

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: 480px;
    width: 95%;
    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 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: 6px;
}

/* Custom slider track uses the same reveal overlay as default progress slider */
.custom-slider-cell .custom-slider-range {
    background:
        linear-gradient(to right, transparent 0%, transparent var(--progress, 0%), #e5e5ea var(--progress, 0%), #e5e5ea 100%),
        var(--slider-gradient, linear-gradient(90deg, var(--slider-color, #9CA3AF) 0%, var(--slider-color, #9CA3AF) 100%));
    background-size: 100% 100%, 100% 100%;
}
    
.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;
}


/* ===================================
   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-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;
    margin-top: -4px;
    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::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;
}

/* Add spacing above doc cards when in project view (combined sheets + docs) */
.doc-cards.project-view-spacing {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid var(--border-subtle);
}

/* Hide ALL cards/headers when doc panel is open */
#tasks-section.doc-open .doc-cards,
#tasks-section.doc-open .docs-header,
#tasks-section.doc-open .spreadsheet-header,
#tasks-section.doc-open .spreadsheet-cards,
#tasks-section.doc-open .project-view-header,
#tasks-section.doc-open #projectEmptyState {
    display: none !important;
}

/* Remove padding from tasks section when doc is open for full use of space */
#tasks-section.doc-open {
    padding: 0;
    overflow: hidden;
    height: 100%;
    min-height: calc(100vh - 80px);
}

.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);
}

/* Skeleton shimmer shown for off-screen doc cards before IntersectionObserver hydrates them */
.doc-card.doc-card-skeleton {
    pointer-events: none;
    background: linear-gradient(90deg,
        var(--bg-surface) 25%,
        var(--bg-surface-soft, rgba(0,0,0,.04)) 50%,
        var(--bg-surface) 75%);
    background-size: 200% 100%;
    animation: docSkeletonShimmer 1.4s ease-in-out infinite;
}

@keyframes docSkeletonShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

body.dark-mode .doc-card.doc-card-skeleton {
    background: linear-gradient(90deg,
        var(--bg-surface) 25%,
        rgba(255,255,255,.05) 50%,
        var(--bg-surface) 75%);
    background-size: 200% 100%;
    animation: docSkeletonShimmer 1.4s ease-in-out infinite;
}

.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 counter (word/character toggle) */
.toolbar-spacer {
    flex: 1;
}

.doc-counter-wrapper {
    position: relative;
    cursor: pointer;
    margin-left: auto;
    flex-shrink: 0;
}

.doc-counter {
    font-size: 12px;
    color: var(--text-muted);
    opacity: 0.7;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.15s ease;
    user-select: none;
}

.doc-counter-wrapper:hover .doc-counter {
    opacity: 1;
    background: var(--bg-surface-soft);
}

.doc-counter.near-limit {
    color: #F59E0B;
    opacity: 1;
}

.doc-counter.over-limit {
    color: #EF4444;
    opacity: 1;
    font-weight: 600;
}

.doc-counter-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 6px;
    overflow: hidden;
    z-index: 50;
    min-width: 180px;
}

.doc-counter-dropdown.open {
    display: block;
}

.doc-counter-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main, #1a1a1a);
    text-align: left;
    transition: background 0.15s ease;
}

.doc-counter-option:hover {
    background: var(--bg-hover, rgba(0, 0, 0, 0.04));
}

.doc-counter-option.active {
    background: var(--accent-subtle, var(--accent) + '20');
    color: var(--accent);
    font-weight: 600;
}

.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;
    position: sticky;
    top: 0;
    z-index: 30;
}

.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);
}

/* Toolbar button with label (like Export) */
.toolbar-btn:has(.toolbar-btn-label) {
    width: auto;
    padding: 0 12px;
    gap: 6px;
}

.toolbar-btn-label {
    font-size: 13px;
    font-weight: 500;
}

/* ===================================
   PDF EXPORT OPTIMIZATION
   =================================== */

/* Page break prevention for PDF export */
.pdf-export-mode h1,
.pdf-export-mode h2,
.pdf-export-mode h3,
.pdf-export-mode h4,
.pdf-export-mode p,
.pdf-export-mode li,
.pdf-export-mode .doc-chip,
.pdf-export-mode .chip,
.pdf-export-mode .card,
.pdf-export-mode blockquote,
.pdf-export-mode pre,
.pdf-export-mode table,
.pdf-export-mode img {
    break-inside: avoid;
    page-break-inside: avoid;
}

/* Keep headings with their content */
.pdf-export-mode h1,
.pdf-export-mode h2,
.pdf-export-mode h3 {
    break-after: avoid;
    page-break-after: avoid;
}

/* Chip styling for PDF */
.pdf-export-mode .doc-chip {
    display: inline-flex;
    margin: 2px 0;
}

/* Clean background for PDF */
.pdf-export-mode {
    background: #ffffff !important;
    color: #000000 !important;
}

/* Hide interactive elements in PDF mode */
.pdf-export-mode .toolbar-btn,
.pdf-export-mode .doc-panel-toolbar,
.pdf-export-mode button:not(.doc-chip) {
    display: none !important;
}

/* Export Dropdown */
.export-dropdown {
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 6px;
    min-width: 180px;
}

.export-dropdown-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main, #1a1a1a);
    text-align: left;
    transition: background 0.15s ease;
}

.export-dropdown-option:hover {
    background: var(--bg-hover, rgba(0, 0, 0, 0.04));
}

.export-dropdown-option i {
    width: 18px;
    text-align: center;
    color: var(--text-secondary, #666666);
    font-size: 14px;
}

.export-dropdown-option:first-child i {
    color: #6b7280;
}

.export-dropdown-option:last-child i {
    color: #ef4444;
}

body.dark-mode .export-dropdown {
    background: #2d2d30;
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .export-dropdown-option:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* ===================================
   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;
}

/* Nested list styles - second level */
.doc-editor ul ul,
.doc-editor ol ol,
.doc-editor ul ol,
.doc-editor ol ul {
    margin: 4px 0 4px 0;
    padding-left: 20px;
}

/* Different bullet styles for nested levels */
.doc-editor ul {
    list-style-type: disc;
}

.doc-editor ul ul {
    list-style-type: circle;
}

.doc-editor ul ul ul {
    list-style-type: square;
}

/* Numbered list nested styles */
.doc-editor ol {
    list-style-type: decimal;
}

.doc-editor ol ol {
    list-style-type: lower-alpha;
}

.doc-editor ol ol ol {
    list-style-type: lower-roman;
}

.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;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    background: rgba(142, 142, 147, 0.12);
    border-radius: 50%;
    font-size: 12px;
    color: var(--text-muted);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.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, #ffffff);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    min-width: 140px;
    padding: 6px;
    z-index: 10000;
    display: none !important;
    text-align: left;
}

.doc-format-dropdown.visible {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
}

.doc-format-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main, #1a1a1a);
    text-align: left;
    justify-content: flex-start;
    transition: background 0.15s ease;
}

.doc-format-option:hover {
    background: var(--bg-hover, rgba(0, 0, 0, 0.04));
}

.doc-format-option.active {
    background: var(--bg-hover, rgba(0, 0, 0, 0.04));
    font-weight: 600;
}

.doc-format-option.active::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 12px;
    color: #34C759;
    margin-right: 8px;
    -webkit-text-stroke: 0.5px #34C759;
}

.doc-format-option span {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 13px;
}

body.dark-mode .doc-format-dropdown {
    background: #2d2d30;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
}

body.dark-mode .doc-format-option:hover,
body.dark-mode .doc-format-option.active {
    background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .doc-format-option.active {
    background: var(--accent-soft);
    border-color: var(--accent);
}

/* ===================================
   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;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.chip-icon svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
}

.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-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}

.doc-embed-icon svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
}

.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);
}
/* ===================================
   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;
    padding: 4px;
}

.reference-picker-item {
    padding: 12px 16px;
    background: var(--bg-surface);
    border: 2px solid var(--border-subtle);
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.reference-picker-item:hover {
    background: var(--bg-body);
    border-color: var(--border-medium);
}

.reference-picker-item.active {
    background: #ffffff;
    border-color: #b0b0b3;
}

.reference-picker-item.active::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 12px;
    color: #34C759;
    -webkit-text-stroke: 0.5px #34C759;
}

body.dark-mode .reference-picker-item {
    background: var(--bg-surface);
    border-color: var(--border-subtle);
}

body.dark-mode .reference-picker-item:hover {
    background: var(--bg-body);
    border-color: var(--border-medium);
}

body.dark-mode .reference-picker-item.active {
    background: var(--accent-soft);
    border-color: var(--accent);
}

.reference-item-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}

.reference-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    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;
    flex-shrink: 0;
}

.reference-item-icon svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
}

.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: auto;
        flex-shrink: 0;
        padding: 3px;
        border-radius: 999px;
    }
    
    .sheets-docs-toggle .toggle-btn {
        padding: 10px 20px;
        font-size: 14px;
        border-radius: 999px;
        min-height: auto;
        min-width: auto;
    }
    
    .doc-cards {
        grid-template-columns: 1fr;
    }
    
    .doc-panel-header {
        padding: 12px 16px;
    }
    
    .doc-toolbar {
        padding: 8px 12px;
        gap: 2px;
    }

    .toolbar-btn {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .toolbar-divider {
        display: none;
    }

    .doc-counter {
        font-size: 11px;
        padding: 3px 6px;
    }

    .doc-counter-dropdown {
        min-width: 110px;
    }
    
    .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;
    }
}

@media (max-width: 480px) {
    .doc-toolbar {
        padding: 6px 8px;
        gap: 1px;
    }

    .toolbar-btn {
        width: 28px;
        height: 28px;
        font-size: 12px;
        border-radius: 4px;
    }

    /* Hide Export label on very small screens */
    .toolbar-btn .toolbar-btn-label {
        display: none;
    }

    .toolbar-btn:has(.toolbar-btn-label) {
        width: 28px;
        padding: 0;
        gap: 0;
    }

    .doc-counter {
        font-size: 10px;
        padding: 2px 4px;
    }
}

/* ===================================
   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;
}

/* Finance Mobile Toggle Dark Mode */
body.dark-mode .finance-mobile-toggle {
    background: var(--bg-elevated);
    border-color: var(--border-medium);
}

body.dark-mode .finance-mobile-toggle .toggle-btn:hover {
    background: var(--bg-surface);
}

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-counter-dropdown {
    background: #2d2d30;
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .doc-counter-option:hover {
    background: rgba(255, 255, 255, 0.08);
}

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;
    position: relative;
    z-index: 1;
}

.metrics-card.settings-open {
    z-index: 50;
}

/* Ensure cards with active dropdowns are always on top */
.metrics-card:has(.graph-menu-dropdown.active),
.metrics-card:has(.metrics-dropdown.open),
.metrics-card:has(.dropdown-menu.show) {
    z-index: 100;
}

.metrics-card.edit-mode .metrics-edit-container {
    position: relative;
    overflow: visible;
}

@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;
    letter-spacing: 0.4px;
}

.metrics-card-header h3 i {
    color: #0A84FF;
    font-size: 0.75rem;
    opacity: 0.9;
}

.metrics-card-header-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main);
    margin-left: auto;
    margin-right: 8px;
    white-space: nowrap;
}
}

/* Card body */
.metrics-card-body {
    padding-top: 4px;
    overflow: visible;
}

/* 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;
}

/* Mini sparkline for stat cards */
.metrics-sparkline {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.metrics-sparkline svg {
    display: block;
}

.metrics-stat-card.has-sparkline {
    gap: 12px;
}

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: 10px;
    padding: 6px 4px;
}

.bar-row-clean {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bar-label-clean {
    width: 120px;
    min-width: 120px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.bar-track-clean {
    flex: 1;
    height: 12px;
    background: var(--border-subtle);
    border-radius: 6px;
    overflow: hidden;
    min-width: 90px;
    border: 1px solid var(--border-card);
}

.bar-fill-clean {
    height: 100%;
    border-radius: 6px;
    /* No gradients - solid color only, set via inline style */
    /* No transitions/animations */
}

.bar-value-clean {
    width: 60px;
    min-width: 60px;
    text-align: right;
    font-size: 0.8rem;
    font-weight: 700;
    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);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Bar chart toggle - for expanding/collapsing rows */
.bar-chart-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 10px;
    background: rgba(142, 142, 147, 0.15);
    border-radius: 10px;
    transition: all 0.15s ease;
    margin: 4px 0;
    align-self: flex-start;
}

.bar-chart-toggle:hover {
    background: rgba(142, 142, 147, 0.25);
    color: var(--text-main);
}

.bar-chart-extra {
    display: none;
    flex-direction: column;
    gap: 10px;
}

.bar-chart-clean[data-expanded="true"] .bar-chart-extra {
    display: flex;
}

.bar-chart-clean[data-expanded="true"] .bar-chart-toggle-text {
    display: none;
}

.bar-chart-clean[data-expanded="true"] .bar-chart-toggle::after {
    content: 'Show less';
}

body.dark-mode .bar-chart-toggle,
[data-theme="dark"] .bar-chart-toggle {
    background: rgba(255, 255, 255, 0.12);
}

body.dark-mode .bar-chart-toggle:hover,
[data-theme="dark"] .bar-chart-toggle:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* ===================================
   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);
}

/* ===================================
   BAR CHART V3 - COMPLETE REWRITE
   Grid-based layout for pixel-perfect alignment
   =================================== */

/* Main container - CSS Grid for perfect alignment */
.bar-chart-v3 {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto;
    gap: 0;
    height: 240px;
    width: 100%;
    position: relative;
}

.bar-chart-v3.tall {
    height: 320px;
}

/* Y-axis container - uses same grid row heights as chart area */
.bar-chart-v3-y-axis {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    padding-right: 8px;
    min-width: 36px;
}

.bar-chart-v3-y-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    font-feature-settings: 'tnum' on;
    line-height: 1;
    height: 0;
    display: flex;
    align-items: center;
}

/* Chart area - contains grid lines and bars */
.bar-chart-v3-area {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    overflow: visible;
}

/* Grid lines - absolutely positioned, same height as chart area */
.bar-chart-v3-grid {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

.bar-chart-v3-grid-line {
    height: 1px;
    background: var(--border-card, rgba(0, 0, 0, 0.08));
    width: 100%;
}

/* Bars container - fills chart area */
.bar-chart-v3-bars {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-evenly;
    padding: 0 8px;
    gap: 4px;
}

/* Individual bar wrapper */
.bar-chart-v3-bar-wrap {
    flex: 1;
    max-width: 48px;
    min-width: 6px;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

/* The actual bar */
.bar-chart-v3-bar {
    width: 100%;
    max-width: 32px;
    min-width: 4px;
    background: #2563EB;
    border-radius: 4px 4px 0 0;
    transition: height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
    min-height: 0;
}

.bar-chart-v3.rounded-week .bar-chart-v3-bar {
    border-radius: 10px 10px 0 0;
}

.bar-chart-v3.rounded-month .bar-chart-v3-bar {
    border-radius: 8px 8px 0 0;
}

.bar-chart-v3-bar.zero {
    height: 3px !important;
    border: none;
    min-height: 3px;
}

.bar-chart-v3-bar-wrap:hover .bar-chart-v3-bar {
    opacity: 0.85;
}

/* X-axis labels row */
.bar-chart-v3-x-axis {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    justify-content: space-evenly;
    padding: 6px 8px 0;
    gap: 4px;
}

.bar-chart-v3-x-label {
    flex: 1;
    max-width: 48px;
    min-width: 6px;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bar-chart-v3-x-label.hidden {
    visibility: hidden;
}

/* Tooltip - matches line chart tooltip styling */
.bar-chart-v3-tooltip {
    position: absolute;
    background: #FFFFFF;
    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;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.dark-mode .bar-chart-v3-tooltip {
    background: #1C1C1E;
}

.bar-chart-v3-tooltip.visible {
    opacity: 1;
}

/* ===================================
   BAR CHART V4 - TWO-ROW X-AXIS SYSTEM
   Perfect alignment with CSS Grid
   =================================== */

/* Main container - 3-row grid: y-axis | chart | x-axis */
.bar-chart-v4 {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto;
    gap: 0;
    height: 240px;
    width: 100%;
    position: relative;
}

.bar-chart-v4.tall {
    height: 320px;
}

/* Y-axis */
.bar-chart-v4-y-axis {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    padding-right: 8px;
    min-width: 36px;
}

.bar-chart-v4-y-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    font-feature-settings: 'tnum' on;
    line-height: 1;
    height: 0;
    display: flex;
    align-items: center;
}

/* Chart area */
.bar-chart-v4-area {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    overflow: visible;
}

/* Grid lines */
.bar-chart-v4-grid {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

.bar-chart-v4-grid-line {
    height: 1px;
    background: var(--border-card, rgba(0, 0, 0, 0.08));
    width: 100%;
}

/* Bars container - CSS Grid for alignment with X-axis */
.bar-chart-v4-bars {
    position: absolute;
    inset: 0;
    display: grid;
    align-items: flex-end;
    padding: 0 2% 0 5%;
    gap: 2px;
}

.bar-chart-v4-bar-wrap {
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

.bar-chart-v4-bar {
    width: 100%;
    max-width: 32px;
    min-width: 3px;
    background: #2563EB;
    border-radius: 10px 10px 0 0;
    transition: height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}

.bar-chart-v4-bar.zero {
    height: 3px !important;
    min-height: 3px;
}

.bar-chart-v4-bar-wrap:hover .bar-chart-v4-bar {
    opacity: 0.85;
}

/* ===================================
   TWO-ROW X-AXIS (for both V4 and standalone use)
   =================================== */

.bar-chart-x-axis-v2 {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    padding: 4px 0 0;
    gap: 0;
}

/* Segment row: thin pills dividing months/years */
.bar-chart-x-row-segments {
    height: 10px;
    align-items: center;
}

.bar-chart-x-segment {
    display: block;
    height: 6px;
    width: 100%;
    background: var(--segment-color-1, rgba(0,0,0,0.18));
    border-radius: 999px;
    margin: 0;
    box-shadow: inset 0 0 0 1px var(--bg-surface, #fff);
}

.bar-chart-x-segment-spacer {
    visibility: hidden;
}

/* Each row uses CSS Grid - column count set via inline style or CSS variable */
.bar-chart-x-row {
    display: grid;
    gap: 0;
    width: 100%;
}

/* Top row: Day numbers (30-day mode) or Month names (all-time mode) */
.bar-chart-x-row-top {
    font-size: 0.7rem;
}

/* Bottom row: Month names (30-day mode) or Years (all-time mode) */
.bar-chart-x-row-bottom {
    font-size: 0.64rem;
}

/* Individual label cell */
.bar-chart-x-cell {
    text-align: center;
    font-size: inherit;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    padding: 0;
    margin: 0;
}

.bar-chart-x-cell.hidden {
    visibility: hidden;
}

/* Group label (spans multiple columns) */
.bar-chart-x-group-label {
    font-size: 0.64rem;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* All-time year pills */
.bar-chart-v4[data-view-mode="allTime"] .bar-chart-x-row-bottom .bar-chart-x-group-label,
.line-chart-axis-wrap[data-view-mode="allTime"] .bar-chart-x-row-bottom .bar-chart-x-group-label {
    text-transform: none;
    letter-spacing: 0.02em;
}

.bar-chart-v4[data-view-mode="allTime"] .bar-chart-x-row-bottom .bar-chart-x-group-label-text,
.line-chart-axis-wrap[data-view-mode="allTime"] .bar-chart-x-row-bottom .bar-chart-x-group-label-text {
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-secondary);
    padding: 2px 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

body.dark-mode .bar-chart-v4[data-view-mode="allTime"] .bar-chart-x-row-bottom .bar-chart-x-group-label-text,
body.dark-mode .line-chart-axis-wrap[data-view-mode="allTime"] .bar-chart-x-row-bottom .bar-chart-x-group-label-text {
    background: rgba(255, 255, 255, 0.12);
}

/* Month pill styling for last7days and last30days views */
.bar-chart-v4[data-view-mode="last7days"] .bar-chart-x-row-bottom .bar-chart-x-group-label-text,
.bar-chart-v4[data-view-mode="last30days"] .bar-chart-x-row-bottom .bar-chart-x-group-label-text,
.line-chart-axis-wrap[data-view-mode="last7days"] .bar-chart-x-row-bottom .bar-chart-x-group-label-text,
.line-chart-axis-wrap[data-view-mode="last30days"] .bar-chart-x-row-bottom .bar-chart-x-group-label-text {
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-secondary);
    padding: 2px 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

body.dark-mode .bar-chart-v4[data-view-mode="last7days"] .bar-chart-x-row-bottom .bar-chart-x-group-label-text,
body.dark-mode .bar-chart-v4[data-view-mode="last30days"] .bar-chart-x-row-bottom .bar-chart-x-group-label-text,
body.dark-mode .line-chart-axis-wrap[data-view-mode="last7days"] .bar-chart-x-row-bottom .bar-chart-x-group-label-text,
body.dark-mode .line-chart-axis-wrap[data-view-mode="last30days"] .bar-chart-x-row-bottom .bar-chart-x-group-label-text {
    background: rgba(255, 255, 255, 0.12);
}

/* Line chart axis row (reuse bar chart axis styles) */
.line-chart-v2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.line-chart-v2 svg {
    width: 100%;
    height: auto;
}

.line-chart-axis-wrap {
    margin-top: 0;
}

.line-chart-axis-wrap .bar-chart-x-axis-v2 {
    grid-column: auto;
    grid-row: auto;
    padding: 4px 0;
}

.line-chart-axis-wrap .bar-chart-x-row-top {
    display: grid;
}

/* Line chart axis styling to match bar charts */
.line-chart-y-labels text,
.line-chart-y-labels.secondary text {
    font-size: 0.72rem;
    font-weight: 600;
    fill: var(--text-secondary);
    font-feature-settings: 'tnum' on;
}

/* Spacer cells for alignment */
.bar-chart-x-group-spacer {
    visibility: hidden;
}

/* Responsive: tablets */
@media (max-width: 768px) {
    .bar-chart-v4 {
        height: 200px;
    }
    .bar-chart-v4.tall {
        height: 280px;
    }
    .bar-chart-v4-y-axis {
        min-width: 28px;
        padding-right: 6px;
    }
    .bar-chart-v4-y-label {
        font-size: 0.65rem;
    }
    .bar-chart-x-cell {
        font-size: 0.6rem;
    }
    .bar-chart-x-group-label {
        font-size: 0.56rem;
    }
}

/* Responsive: mobile */
@media (max-width: 480px) {
    .bar-chart-v4 {
        height: 160px;
    }
    .bar-chart-v4.tall {
        height: 220px;
    }
    .bar-chart-v4-y-axis {
        min-width: 24px;
        padding-right: 4px;
    }
    .bar-chart-v4-y-label {
        font-size: 0.58rem;
    }
    .bar-chart-x-cell {
        font-size: 0.52rem;
    }
    .bar-chart-x-group-label {
        font-size: 0.48rem;
    }
}

/* Responsive: tablets */
@media (max-width: 768px) {
    .bar-chart-v3 {
        height: 200px;
    }
    .bar-chart-v3.tall {
        height: 280px;
    }
    .bar-chart-v3-y-axis {
        min-width: 28px;
        padding-right: 6px;
    }
    .bar-chart-v3-y-label {
        font-size: 0.65rem;
    }
    .bar-chart-v3-x-label {
        font-size: 0.6rem;
    }
    .bar-chart-v3-bar-wrap {
        max-width: 36px;
    }
    .bar-chart-v3-bar {
        max-width: 24px;
    }
}

/* Responsive: mobile */
@media (max-width: 480px) {
    .bar-chart-v3 {
        height: 160px;
    }
    .bar-chart-v3.tall {
        height: 220px;
    }
    .bar-chart-v3-y-axis {
        min-width: 24px;
        padding-right: 4px;
    }
    .bar-chart-v3-y-label {
        font-size: 0.58rem;
    }
    .bar-chart-v3-x-label {
        font-size: 0.52rem;
    }
    .bar-chart-v3-bars {
        padding: 0 4px;
        gap: 2px;
    }
    .bar-chart-v3-x-axis {
        padding: 4px 4px 0;
        gap: 2px;
    }
    .bar-chart-v3-bar-wrap {
        max-width: 24px;
    }
    .bar-chart-v3-bar {
        max-width: 16px;
        border-radius: 2px 2px 0 0;
    }
}

/* 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;
}

/* Disabled graph menu options */
.graph-menu-option.disabled,
.graph-menu-option:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: auto;
}

.graph-menu-option.disabled:hover,
.graph-menu-option:disabled:hover {
    background: transparent;
}

/* ===================================
   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);
    position: relative;
}

.graph-settings-panel.open {
    max-height: 2000px;
    opacity: 1;
    overflow: visible;
    z-index: 100;
}

.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;
    padding-bottom: 120px; /* Extra space for dropdown to expand */
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: visible;
}

.settings-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: visible;
}

.settings-subsection {
    position: relative;
    overflow: visible;
}

.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 - using avatar-color-picker-minimal pattern */
.color-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.color-option {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s;
}

.color-option:hover {
    transform: scale(1.15);
}

.color-option.active {
    border-color: var(--text-main);
}

/* 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 - using sheets-docs-toggle pattern */
.scale-mode-toggle {
    margin-top: 8px;
    margin-bottom: 12px;
    width: fit-content;
}

.scale-mode-toggle .toggle-btn {
    padding: 6px 14px;
    font-size: 0.7rem;
}

/* 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 toggle - using calendar-view-toggle pattern */
.density-toggle {
    width: 100%;
}

.density-toggle .view-toggle-btn {
    flex: 1;
    padding: 6px 10px;
    font-size: 0.7rem;
    text-align: center;
    justify-content: center;
}

/* 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 (theme-btn style) */
.graph-type-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.graph-type-option {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--bg-surface);
    border: 2px solid var(--border-subtle);
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
}

.graph-type-option:hover {
    background: var(--bg-body);
    border-color: var(--border-medium);
    color: var(--text-main);
}

.graph-type-option.active {
    background: #ffffff;
    border-color: #b0b0b3;
    color: var(--text-main);
}

.graph-type-option.active::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 14px;
    color: #34C759;
    -webkit-text-stroke: 0.5px #34C759;
}

.graph-type-option i {
    font-size: 14px;
    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.75rem;
    font-weight: 600;
    color: inherit;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.graph-type-option.active span {
    color: var(--accent);
}

/* Dark mode for graph type options */
body.dark-mode .graph-type-option {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .graph-type-option:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .graph-type-option.active {
    background: rgba(255, 255, 255, 0.95);
    border-color: #b0b0b3;
    color: #1c1c1e;
}

/* Settings select dropdown */
.settings-select {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    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.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 14px center;
    padding-right: 40px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.settings-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.settings-select:hover {
    border-color: var(--accent);
    background-color: var(--bg-body);
}

/* Settings select option styling */
.settings-select option {
    padding: 12px 16px;
    background: var(--bg-surface);
    color: var(--text-main);
    font-size: 0.85rem;
    font-weight: 500;
}

.settings-select option:hover,
.settings-select option:focus {
    background: var(--accent-soft);
    color: var(--accent);
}

.settings-select option:checked {
    background: var(--accent);
    color: white;
}

/* Metrics dropdown specific styling */
.graph-settings-panel .settings-select {
    background: var(--bg-body);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.8rem;
}

.graph-settings-panel .settings-select option {
    padding: 10px 14px;
    font-size: 0.8rem;
}

/* 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-select option {
    background: var(--bg-elevated);
    color: var(--text-main);
}

[data-theme="dark"] .settings-select option:checked {
    background: var(--accent);
    color: white;
}

[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;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.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;
}

/* Thin segment bars dividing months/years */
.line-chart-segment-bar {
    fill: var(--border-strong, rgba(0,0,0,0.18));
}

/* 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: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 2px 6px rgba(131, 58, 180, 0.35));
}

.line-chart-stroke.secondary {
    stroke-width: 1.5;
    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;
    pointer-events: all;
}

.line-chart-v2:hover .line-dot {
    opacity: 1;
}

.line-dot:hover {
    r: 5;
    filter: drop-shadow(0 2px 8px rgba(0, 112, 243, 0.4));
}

.line-dot.secondary:hover {
    r: 4;
    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: #FFFFFF;
    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;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.dark-mode .line-chart-tooltip {
    background: #1C1C1E;
}

.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;
    animation: pieSegmentIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    cursor: pointer;
    transition: filter 0.25s ease, opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center;
    transform-box: view-box;
}

@keyframes pieSegmentIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.pie-segment:hover {
    filter: brightness(1.1);
}

/* Dim other segments when one is hovered */
.metrics-pie-chart:has(.pie-segment:hover) .pie-segment:not(:hover) {
    opacity: 0.6;
    filter: brightness(0.92);
}

.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;
    cursor: pointer;
    transition: background 0.15s ease;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.pie-legend-item:hover,
.pie-legend-item:focus,
.pie-legend-item:focus-visible,
.pie-legend-item.highlighted {
    background: var(--bg-hover, rgba(0,0,0,0.04));
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.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;
}

/* Expandable pie legend - elegant inline toggle */
.pie-legend-extra {
    display: none;
    flex-direction: column;
    gap: 6px;
}

.pie-legend[data-expanded="true"] .pie-legend-extra {
    display: flex;
}

.pie-legend {
    position: relative;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.pie-legend::-webkit-scrollbar {
    width: 4px;
}

.pie-legend::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 2px;
}

.pie-legend-toggle {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    background: rgba(142, 142, 147, 0.15);
    border-radius: 10px;
    transition: all 0.15s ease;
    margin: 4px 0;
    margin-right: auto;
    box-shadow: 0 0 8px 6px #fff, 0 0 16px 10px #fff;
}

.pie-legend-toggle:hover {
    background: rgba(142, 142, 147, 0.25);
    color: var(--text-main);
}

.pie-legend[data-expanded="true"] .pie-legend-toggle-text {
    display: none;
}

.pie-legend[data-expanded="true"] .pie-legend-toggle::after {
    content: 'Less';
}

body.dark-mode .pie-legend-toggle {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 8px 6px var(--bg-surface), 0 0 16px 10px var(--bg-surface);
}

body.dark-mode .pie-legend-toggle:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* 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 .bar-chart-v3-grid-line {
    background: rgba(255, 255, 255, 0.1);
}

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;
    }
    
    .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;
    }
    
    .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;
}

/* ===================================
   METRICS DRAG & DROP
   Visual feedback for pointer-based reordering
   =================================== */

/* Draggable items get a grab cursor ONLY in edit mode */
body.metrics-edit-mode .custom-metrics-row .metrics-stat-card[data-metric-id],
body.metrics-edit-mode .metrics-charts-row .metrics-drag-item[data-metric-id] {
    cursor: grab;
    touch-action: none;
}

/* Placeholder shown where the item will be dropped */
.metrics-drag-placeholder {
    border: 2px dashed var(--accent);
    border-radius: 16px;
    background: var(--accent-soft);
    opacity: 0.5;
    flex-shrink: 0;
    transition: all 0.15s ease;
    box-sizing: border-box;
}

/* Floating preview — looks like the real card being moved */
.metrics-drag-preview {
    border-radius: 16px;
    cursor: grabbing;
    will-change: transform;
    backface-visibility: hidden;
    filter: brightness(1.03);
}

/* While any drag is active */
body.metrics-dragging {
    cursor: grabbing !important;
    user-select: none;
    -webkit-user-select: none;
}

body.metrics-dragging * {
    cursor: grabbing !important;
}

/* Graph card drag wrapper */
.metrics-drag-item {
    display: contents;
}

.metrics-charts-row .metrics-drag-item {
    display: block;
    flex: 1;
    min-width: 0;
}

.metrics-charts-row .metrics-drag-item .metrics-card {
    height: 100%;
}

/* 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;
        width: 40px;
        height: 40px;
        justify-content: center;
    }
    
    .metrics-edit-btn-header i,
    .metrics-edit-btn-header svg {
        margin: 0;
    }
    
    .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: nowrap;
        gap: 8px;
    }
    
    .calendar-title {
        font-size: 0.95rem;
    }

    /* Hide year on mobile */
    .calendar-title span {
        display: none;
    }
    
    .calendar-view-toggle {
        order: 2;
        width: auto;
        padding: 2px;
    }
    
    .view-toggle-btn {
        padding: 8px 16px;
        font-size: 13px;
        border-radius: 999px;
        min-height: auto;
        min-width: auto;
    }
    
    /* Month view scroll wrapper - allow horizontal scroll */
    .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;
        width: 100%;
    }
    
    .calendar-container {
        overflow-x: auto;
        overflow-y: visible;
    }
    
    .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;
    }

    /* Task dots on mobile - smaller */
    .cal-task-dot {
        width: 14px;
        height: 14px;
    }
    .cal-task-dot-icon {
        width: 8px;
        height: 8px;
    }
    .cal-task-lock {
        width: 8px;
        height: 8px;
        font-size: 5px;
    }
    .calendar-task-dots {
        gap: 2px;
    }
    
    .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;
    }
}

/* ===================================
   MOBILE DROPDOWN FIXES (FINAL OVERRIDES)
   Force full-width, on-screen bottom sheets for notifications
   and a full-width top-anchored sheet for settings.
   =================================== */
@media (max-width: 900px) {
    .notifications-dropdown {
        position: fixed !important;
        top: 64px !important;
        left: 8vw !important;
        right: 8vw !important;
        bottom: auto !important;
        width: auto !important;
        max-width: 84vw !important;
        max-height: calc(100vh - 88px) !important;
        overflow-y: auto !important;
        border-radius: 14px !important;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2) !important;
        transform: none !important;
        display: none !important;
        z-index: 10001 !important;
    }

    .notifications-dropdown.active,
    .notifications-dropdown[style*="display:block"],
    .notifications-dropdown[style*="display: block"] {
        display: flex !important;
    }

    .notifications-header {
        position: sticky;
        top: 0;
        background: var(--bg-surface);
        z-index: 2;
        border-bottom: 1px solid var(--border-subtle);
        padding: 12px 16px !important;
    }

    .notifications-header h3 {
        font-size: 15px !important;
        margin: 0 !important;
    }

    .mark-read-btn {
        padding: 4px 8px !important;
        font-size: 11px !important;
        border-radius: 16px !important;
    }

    .notifications-list {
        max-height: calc(min(70vh, 520px) - 80px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .settings-dropdown {
        position: fixed !important;
        top: 64px !important;
        left: 8vw !important;
        right: 8vw !important;
        bottom: auto !important;
        width: auto !important;
        max-width: 84vw !important;
        max-height: calc(100vh - 88px) !important;
        overflow-y: auto !important;
        border-radius: 14px !important;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2) !important;
        transform: none !important;
        display: none !important;
    }

    .settings-dropdown.active,
    .settings-dropdown[style*="display:block"],
    .settings-dropdown[style*="display: block"] {
        display: block !important;
    }
}

/* ===================================
   SPREADSHEET CONTEXT MENU
   Right-click menu for sheet actions
   =================================== */
.spreadsheet-context-menu,
.doc-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,
.doc-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-item.danger:hover i {
    color: #FF3B30;
    opacity: 1;
}

.project-context-menu .context-menu-item.danger:hover,
.project-context-menu .context-menu-item.danger:hover i {
    color: #FF3B30;
}

.context-menu-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 4px 0;
}

/* Dark mode */
body.dark-mode .spreadsheet-context-menu,
body.dark-mode .doc-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 .project-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);
}

/* Selection Context Menu */
.selection-context-menu {
    min-width: 220px;
}

.selection-context-menu .context-menu-item span:last-child {
    opacity: 0.5;
}

body.dark-mode .selection-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.danger:hover i {
    color: #FF3B30;
    opacity: 1;
}

/* ===================================
   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;
}

body.dark-mode .unified-modal {
    background: rgba(0, 0, 0, 0.6);
}

.unified-modal.active {
    display: flex;
}

/* Modal Container - Clean, solid background */
.unified-modal-container {
    background: var(--bg-surface);
    border-radius: 14px;
    width: 100%;
    max-width: 540px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-soft);
    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;
}

/* ===================================
   COMPACT TASK MODAL
   Fast-create layout with chip controls
   =================================== */
.task-modal-compact {
    max-width: 600px;
    overflow: visible;
}
@media (max-width: 600px) {
    .task-modal-compact {
        max-width: 100%;
        width: 100%;
        border-radius: 14px !important;
        overflow: hidden !important;
    }
    .task-modal-compact .unified-modal-footer {
        margin: 0 !important;
        border-radius: 0 0 14px 14px !important;
    }
}
.task-modal-compact .unified-modal-header {
    border-radius: 14px 14px 0 0;
    background: var(--bg-surface);
}
.task-modal-compact .unified-modal-footer {
    border-radius: 0 0 14px 14px;
    background: var(--bg-surface);
}
.task-modal-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 20px !important;
    background: var(--bg-surface);
    overflow: visible !important;
    max-height: none !important;
}

/* ---------- Override unified-modal !important resets for compact modal ---------- */
.task-modal-compact .task-title-input {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid var(--border-subtle) !important;
    border-radius: 0 !important;
    padding: 8px 2px !important;
    box-shadow: none !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}
.task-modal-compact .task-title-input:focus {
    border-bottom-color: var(--accent) !important;
    box-shadow: none !important;
    transform: none !important;
}
.task-modal-compact .task-title-input:hover {
    box-shadow: none !important;
    transform: none !important;
}

.task-modal-compact .task-desc-input {
    min-height: 34px !important;
    max-height: 120px !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
    font-size: 13.5px !important;
    box-shadow: none !important;
    background: transparent !important;
    resize: none !important;
    line-height: 1.5 !important;
}
.task-modal-compact .task-desc-input:hover {
    box-shadow: none !important;
    transform: none !important;
}
.task-modal-compact .task-desc-input:focus {
    box-shadow: none !important;
    transform: none !important;
}

/* Date input stays fully hidden — taskDueDateBtn chip handles interaction */
.task-modal-compact .task-date-hidden {
    pointer-events: none !important;
    z-index: -1 !important;
}

/* Override label styles inside compact task modal */
.task-modal-compact .task-option-toggle {
    display: inline-flex !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--text-light) !important;
    margin-bottom: 0 !important;
}

/* Prevent chip/field buttons from inheriting modal input styles */
.task-modal-compact .task-chip,
.task-modal-compact .task-field-btn,
.task-modal-compact .task-option-btn {
    box-shadow: none !important;
}
.task-modal-compact .task-chip:hover,
.task-modal-compact .task-field-btn:hover,
.task-modal-compact .task-option-btn:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Hero title input — transitions & placeholder only (overrides in .task-modal-compact above) */
.task-title-input {
    width: 100%;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}
.task-title-input::placeholder {
    color: var(--text-muted);
    font-weight: 500;
    opacity: 0.6;
}
body.dark-mode .task-title-input {
    color: #fff !important;
}
body.dark-mode .task-title-input::placeholder {
    color: rgba(255,255,255,0.35);
}

/* Compact description — transitions & placeholder only */
.task-desc-input {
    width: 100%;
    font-family: inherit;
    color: var(--text-main);
    outline: none;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}
.task-desc-input:focus {
    border-color: var(--accent) !important;
}
.task-desc-input::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}
body.dark-mode .task-desc-input {
    color: #fff !important;
    border-color: var(--border-subtle) !important;
}

/* Quick-set row — 2×2 labeled grid */
.task-quick-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 16px;
    align-items: start;
    padding: 2px 0;
}

/* Labeled field wrapper */
.task-labeled-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

/* Small label above each field */
.task-field-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text-muted);
    opacity: 0.75;
    padding-left: 2px;
    user-select: none;
    white-space: nowrap;
}

/* Stretch option-btn (options row) to fill its labeled column */
.task-labeled-field .task-option-btn {
    width: 100%;
    justify-content: flex-start;
}

/* Per-field accent + soft tint variables */
.task-field--assignee { --field-accent: var(--accent); --field-accent-soft: var(--accent-soft); }
.task-field--date     { --field-accent: var(--accent); --field-accent-soft: var(--accent-soft); }
.task-field--priority { --field-accent: var(--text-secondary); --field-accent-soft: rgba(0,0,0,0.04); }
.task-field--status   { --field-accent: var(--text-secondary); --field-accent-soft: rgba(0,0,0,0.04); }

/* Colored label per field — Assignee/Date blue, Priority/Status grey */
.task-field--assignee .task-field-label,
.task-field--date .task-field-label {
    color: var(--accent);
    opacity: 1;
}
.task-field--priority .task-field-label,
.task-field--status .task-field-label {
    color: var(--text-muted);
    opacity: 1;
}

/* Chip field — dropdown wrapper */
.task-chip-field {
    position: relative;
}

/* Shared base for both field-btn and chip — looks like a compact select input */
.task-field-btn,
.task-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 13px;
    font-size: 13px;
    font-family: inherit;
    font-weight: 500;
    color: var(--text-secondary);
    background: #fff;
    border: 1.5px solid rgba(0, 112, 243, 0.12);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
    line-height: 1;
    width: 100%;
    justify-content: flex-start;
    height: 38px;
    box-sizing: border-box;
}

/* Dropdown arrow inside chips — pushed right */
.task-chip-arrow {
    font-size: 9px;
    color: var(--text-muted);
    margin-left: auto;
    opacity: 0.6;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.task-field-btn:hover .task-chip-arrow,
.task-chip:hover .task-chip-arrow {
    opacity: 1;
    color: var(--accent);
}

/* Icon inside field-btn */
.task-field-btn i {
    font-size: 12px;
    color: var(--text-muted);
    transition: color 0.18s ease;
}

/* Dot size in chip */
.task-chip .unified-priority-dot,
.task-chip .unified-status-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
}
.task-chip i {
    font-size: 12px;
}

/* Hover — soft, light tint only */
.task-field-btn:hover,
.task-chip:hover {
    background: rgba(0, 112, 243, 0.04);
    border-color: rgba(0, 112, 243, 0.18);
    color: var(--text-main);
}
.task-field-btn:hover i {
    color: var(--text-secondary);
}

/* Has-value — gentle highlight, not aggressive */
.task-field-btn.has-value,
.task-chip.has-value {
    background: rgba(0, 112, 243, 0.04);
    border-color: rgba(0, 112, 243, 0.18);
    color: var(--text-main);
    font-weight: 500;
}
.task-field-btn.has-value i {
    color: var(--text-secondary);
}

/* Dark mode base */
body.dark-mode .task-field-btn,
body.dark-mode .task-chip {
    background: rgba(255,255,255,0.06);
    border-color: rgba(10,132,255,0.25);
    color: var(--text-muted);
}
body.dark-mode .task-field-btn i {
    color: var(--text-muted);
}
body.dark-mode .task-chip-arrow {
    color: rgba(255,255,255,0.3);
}

/* Mini avatar inside assignee pill */
.task-chip-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

/* Hidden native date input — fully invisible, JS showPicker() opens it */
.task-date-chip-field {
    position: relative;
}
.task-date-hidden {
    position: absolute;
    top: 0; left: 0;
    width: 0; height: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: -1;
}

/* Dropdown menus anchored to chips */
.task-chip-field .unified-dropdown-menu {
    top: calc(100% + 4px);
    left: 0;
    min-width: 200px;
    z-index: 100001;
}

/* Options row — 3-column labeled grid */
.task-options-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 10px;
    align-items: start;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
}

.task-option-item {
    position: relative;
}

.task-option-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 12px;
    font-family: inherit;
    font-weight: 500;
    color: var(--text-light);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.task-option-btn:hover {
    background: var(--bg-body);
    border-color: var(--border-subtle);
    color: var(--text-main);
}
.task-option-btn i:first-child {
    font-size: 11px;
    color: var(--accent);
}
.task-option-arrow {
    font-size: 8px !important;
    color: var(--text-light) !important;
    margin-left: 2px;
}
body.dark-mode .task-option-btn:hover {
    background: rgba(255,255,255,0.06);
}

/* Calendar toggle inline in options row */
.task-option-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-light);
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.task-option-toggle:hover {
    background: var(--bg-body);
    color: var(--text-main);
}
.task-toggle-text {
    font-size: 12px;
    color: var(--text-secondary);
}
.task-option-toggle .mini-toggle {
    transform: scale(0.8);
    margin: -2px 0;
}

/* Dropdown menus from option row */
.task-option-item .unified-dropdown-menu {
    top: calc(100% + 4px);
    left: 0;
    min-width: 180px;
    z-index: 100001;
}

/* Word counter in footer */
.task-word-count {
    font-size: 11px;
    color: var(--text-light);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.task-word-count.warning {
    color: var(--warning);
}
.task-word-count.limit {
    color: var(--danger, #ef4444);
}

/* Recurrence hint — compact */
.task-modal-body .recurrence-hint {
    font-size: 11.5px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Mobile adjustments */
@media (max-width: 540px) {
    .task-modal-compact {
        max-width: 100%;
        margin: 0 8px;
    }
    .task-quick-row {
        gap: 6px;
    }
    .task-chip {
        padding: 5px 10px;
        font-size: 12px;
    }
    .task-field-btn {
        padding: 5px 10px;
        font-size: 11.5px;
        gap: 5px;
    }
    .task-field-btn i {
        font-size: 10px;
    }
    .task-chip-avatar {
        width: 18px;
        height: 18px;
        font-size: 8px;
    }
    .task-chip-label {
        display: none;
    }
    .task-field-btn.has-value .task-chip-label {
        display: inline;
    }
    .task-chip .task-chip-value {
        display: inline !important;
    }
    .task-options-row {
        gap: 4px;
    }
    .task-option-btn span,
    .task-option-toggle span {
        display: none;
    }
}

body.dark-mode .unified-modal-container {
    background: var(--bg-surface);
    box-shadow: var(--shadow-soft);
}

/* Modal Header - Minimal */
.unified-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px 12px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
    background: var(--bg-surface);
}

body.dark-mode .unified-modal-header {
    background: var(--bg-surface);
    border-bottom-color: var(--border-subtle);
}

.unified-modal-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.unified-modal-title h2 {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.01em;
}

body.dark-mode .unified-modal-title h2 {
    color: var(--text-main);
}

.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: var(--bg-body);
    color: var(--text-muted);
    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: var(--bg-surface-soft);
    color: var(--text-muted);
}

/* Modal Body */
.unified-modal-body {
    padding: 16px 24px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100vh - 180px);
}

.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);
}

/* ===================================
   CREATE WORKSPACE ITEM MODAL
   =================================== */
.create-item-content {
    width: 100%;
    max-width: 400px;
    background: var(--bg-surface);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.create-item-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 24px;
}

.create-item-option {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.create-item-option:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.create-item-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.create-item-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.create-item-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
}

.create-item-subtitle {
    font-size: 13px;
    color: var(--text-muted);
}

/* Dark mode styles for create item modal */
body.dark-mode .create-item-content {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
}

body.dark-mode .create-item-option {
    background: var(--bg-tertiary);
    border-color: var(--border-subtle);
}

body.dark-mode .create-item-option:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.dark-mode .create-item-icon {
    background: var(--accent);
    color: white;
}

body.dark-mode .create-item-title {
    color: var(--text-main);
}

body.dark-mode .create-item-subtitle {
    color: var(--text-muted);
}

/* 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;
}

#transactionModal .unified-modal-footer {
    align-items: center;
    padding-bottom: 24px;
}

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: 12px;
}

.unified-form-grid.two-col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.unified-form-field.full-width {
    grid-column: 1 / -1;
}

.unified-form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.unified-form-label {
    font-size: 13px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    gap: 4px;
    text-transform: none;
    letter-spacing: 0;
}

body.dark-mode .unified-form-label {
    color: rgba(255, 255, 255, 0.38);
}

.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;
}

/* ===================================
   TRANSACTION CATEGORY SELECT - Match unified-dropdown style
   =================================== */
#transactionCategory {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding: 14px 16px;
    padding-right: 40px;
    font-size: 15px;
    font-family: inherit;
    color: var(--text-main);
    background: #ffffff;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: all 0.15s ease;
    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='%23666' 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 14px center;
}

#transactionCategory:hover {
    border-color: var(--border-medium);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
}

#transactionCategory:focus {
    border-color: var(--accent);
    box-shadow: 0 6px 24px rgba(0, 122, 255, 0.15);
    outline: none;
}

#transactionCategory option {
    padding: 10px 12px;
    font-size: 15px;
    color: #000000;
    background: #ffffff;
}

#transactionCategory optgroup {
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: 8px 0 4px 0;
}

body.dark-mode #transactionCategory {
    background: #2c2c2e;
    border-color: var(--border-subtle);
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    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='%23999' 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");
}

body.dark-mode #transactionCategory:hover {
    border-color: var(--border-medium);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}

body.dark-mode #transactionCategory:focus {
    border-color: var(--accent);
    box-shadow: 0 6px 24px rgba(10, 132, 255, 0.2);
}

body.dark-mode #transactionCategory option {
    background: #2c2c2e;
    color: #ffffff;
}

body.dark-mode #transactionCategory optgroup {
    color: rgba(255, 255, 255, 0.5);
}

/* ===================================
   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 - Unified circular style */
.unified-assignee-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #007aff;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    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-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.unified-color-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.unified-color-grid[data-expanded="false"] .unified-color-extra {
    display: none;
}

.unified-color-expand-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
}

.unified-color-expand-btn:hover {
    background: var(--bg-body);
    color: var(--text-main);
    border-color: var(--border-medium);
}

.unified-color-expand-btn i {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.unified-color-grid[data-expanded="true"] + .unified-color-expand-btn i {
    transform: rotate(180deg);
}

.unified-color-option {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-sizing: border-box;
}

.unified-color-option:hover {
    transform: scale(1.1);
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

body.dark-mode .unified-color-option:hover {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.unified-color-option.selected {
    border-color: rgba(0, 0, 0, 0.4);
    transform: scale(1.05);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.15);
}

body.dark-mode .unified-color-option.selected {
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* 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 (theme-btn style)
   =================================== */
.repeat-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.repeat-pill {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    background: var(--bg-surface);
    border: 2px solid var(--border-subtle);
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}

.repeat-pill input[type="radio"] {
    display: none;
}

.repeat-pill:hover {
    background: var(--bg-body);
    border-color: var(--border-medium);
    color: var(--text-main);
}

.repeat-pill.selected {
    background: #ffffff;
    color: var(--text-main);
    border-color: #b0b0b3;
}

.repeat-pill.selected::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 14px;
    color: #34C759;
    margin-right: 8px;
    -webkit-text-stroke: 0.5px #34C759;
}

body.dark-mode .repeat-pill {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
}

body.dark-mode .repeat-pill:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .repeat-pill.selected {
    background: rgba(255, 255, 255, 0.95);
    border-color: #b0b0b3;
    color: #1c1c1e;
}

/* ===================================
   INLINE TOGGLE ROW (Calendar Toggle)
   Simple horizontal: label left, toggle right
   =================================== */
.unified-form-field.full-width:has(label.inline-toggle-row) {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
}

.unified-form-field label.inline-toggle-row {
    display: inline-flex !important;
    flex-direction: row;
    align-items: center !important;
    gap: 12px;
    width: 100%;
    padding: 0;
    margin: 0;
    background: transparent;
    cursor: pointer;
}

.unified-form-field label.inline-toggle-row:hover {
    background: transparent;
}

body.dark-mode .unified-form-field label.inline-toggle-row {
    background: transparent;
}

body.dark-mode .unified-form-field label.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);
    flex: 1;
}

.inline-toggle-label i {
    font-size: 14px;
    color: var(--accent);
}

.inline-toggle-row .mini-toggle {
    margin-left: auto;
}

/* Mini Toggle Switch - Blue/Accent Style */
.mini-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.mini-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.mini-toggle-track {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #e5e5ea;
    border-radius: 24px;
    transition: background 0.25s ease;
    cursor: pointer;
}

.mini-toggle-track::before {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    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(20px);
}

body.dark-mode .mini-toggle-track {
    background: rgba(255, 255, 255, 0.2);
}

body.dark-mode .mini-toggle input:checked + .mini-toggle-track {
    background: var(--accent);
}

/* ===================================
   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;
    flex-wrap: nowrap;
}

.doc-readonly-info {
    flex: 1;
    min-width: 0;
}

.doc-readonly-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    text-transform: none;
}

.doc-readonly-text i {
    color: var(--text-muted);
    margin-right: 6px;
}

.doc-readonly-desc {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: none;
}

.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);
    opacity: 1;
}

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);
    text-transform: none;
}

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;
}

/* Spreadsheet type selector - match calendar view toggle */
#typeSelectRow {
    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 #typeSelectRow {
    background: var(--bg-surface);
    border-color: var(--border-subtle);
}

#typeSelectRow .unified-segmented-option {
    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;
}

#typeSelectRow .unified-segmented-option:hover {
    color: var(--text-main);
    background: var(--bg-body);
}

#typeSelectRow .unified-segmented-option.active {
    background: rgb(183, 183, 183);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
}

body.dark-mode #typeSelectRow .unified-segmented-option.active {
    background: var(--accent);
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
}

/* ===================================
   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;
    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);
}

/* Mobile Finance Toggle - Hidden on desktop, shown on mobile */
.finance-mobile-toggle {
    display: none !important;
}

@media (max-width: 768px) {
    .finance-mobile-toggle {
        display: inline-flex !important;
    }
}

/* 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 */
    min-height: 180px; /* Ensure empty state is visible in-column */
    /* 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: 999px;
}

.column-total.expense {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.btn-add-transaction {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.column-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-filter-recurring {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.btn-filter-recurring i {
    transition: transform 0.3s ease;
}

.btn-filter-recurring:hover {
    background: rgba(239, 68, 68, 0.22);
    transform: scale(1.05);
}

.btn-filter-recurring.active {
    background: #ef4444;
    color: white;
}

.btn-filter-recurring.active i {
    transform: rotate(180deg);
}

.btn-filter-recurring.income {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
}

.btn-filter-recurring.income:hover {
    background: rgba(34, 197, 94, 0.22);
}

.btn-filter-recurring.income.active {
    background: #22c55e;
    color: white;
}

.transaction-cancel-link {
    color: var(--accent);
    text-decoration: none;
    font-size: 13px;
    word-break: break-all;
}

.transaction-cancel-link:hover {
    text-decoration: underline;
}

.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: none;
    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;
}

.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 - Pill Toggle */
.transaction-type-toggle {
    display: inline-flex;
    background: var(--bg-surface);
    border-radius: 999px;
    padding: 3px;
    gap: 0;
    border: 1px solid var(--border-subtle);
    margin: 0 auto;
    width: fit-content;
}

.transaction-type-toggle .type-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    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;
}

.transaction-type-toggle .type-btn:hover {
    color: var(--text-main);
    background: var(--bg-body);
}

.transaction-type-toggle .type-btn.active[data-type="income"] {
    background: #34C759;
    color: white;
    box-shadow: 0 2px 8px rgba(52, 199, 89, 0.3);
}

.transaction-type-toggle .type-btn.active[data-type="expense"] {
    background: #FF3B30;
    color: white;
    box-shadow: 0 2px 8px rgba(255, 59, 48, 0.3);
}

.transaction-type-toggle .type-btn i {
    font-size: 12px;
}

.amount-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.amount-input-wrapper .currency-symbol {
    position: absolute;
    left: 14px;
    padding-left: 2px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-muted);
}

.amount-input-wrapper .amount-input {
    flex: 1;

    padding-left: 20px;
    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 {
    background: var(--bg-elevated);
    border-color: var(--border-medium);
}

body.dark-mode .transaction-type-toggle .type-btn {
    background: transparent;
}

body.dark-mode .transaction-type-toggle .type-btn:hover {
    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;
        display: flex;
        flex-direction: column;
    }

    .revenue-column {
        order: 1;
    }

    .expenses-column {
        order: 2;
    }
    
    .finance-column {
        min-height: auto;
        width: 100%;
    }
    
    .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: 50%;
    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);
    flex-shrink: 0;
}

.btn-add-subscription:hover {
    background: #0066dd;
    transform: scale(1.05);
}

/* Subscriptions Tabs */
.subscriptions-tabs {
    display: inline-flex;
    gap: 6px;
    margin-bottom: 0;
    padding: 4px;
    background: var(--bg-surface);
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
}

.subscriptions-tabs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.subscriptions-tabs {
    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 .subscriptions-tabs {
    background: var(--bg-surface);
    border-color: var(--border-subtle);
}

.sub-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border: none;
    background: transparent;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.sub-tab:hover {
    color: var(--text-main);
    background: var(--bg-body);
}

.sub-tab.active {
    background: rgb(183, 183, 183);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
}

body.dark-mode .sub-tab.active {
    background: var(--accent);
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
}

.sub-tab-count {
    background: transparent;
    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;
}

@media (max-width: 768px) {
    .subscription-meta .subscription-category {
        display: none;
    }
}

.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 - handled in main mobile section */

/* 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);
}

/* ===================================
   CUSTOMERS SECTION (Finances Tab)
   =================================== */
.customers-section {
    margin-top: 40px;
    padding: 0;
}

.customers-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 0 4px;
}

.customers-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.customers-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;
}

.customers-title h2 {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

.customers-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-customer {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    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);
    flex-shrink: 0;
}

.btn-add-customer:hover {
    background: #0066dd;
    transform: scale(1.05);
}

/* Customer Search */
.customers-search-row {
    margin-bottom: 12px;
}

.customers-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.customers-search-wrapper i {
    position: absolute;
    left: 12px;
    color: var(--text-muted);
    font-size: 13px;
    pointer-events: none;
}

.customers-search-input {
    width: 100%;
    padding: 9px 12px 9px 36px;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    font-size: 13px;
    background: var(--bg-body);
    color: var(--text-main);
    transition: border-color var(--transition-fast);
    outline: none;
}

.customers-search-input:focus {
    border-color: var(--accent);
}

/* Customer List */
.customers-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Customer Row */
.customer-row {
    display: flex;
    flex-direction: column;
    padding: 14px 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.18s ease;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.customer-row:hover {
    border-color: var(--border-medium);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.customer-row-header {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.customer-row-info {
    flex: 1;
    min-width: 0;
}

.customer-row-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.customer-row-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-muted);
}

.customer-row-meta span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.customer-row-meta .customer-meta-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
    opacity: 0.5;
}

.customer-row-revenue {
    text-align: right;
    flex-shrink: 0;
}

.customer-revenue-amount {
    font-size: 14px;
    font-weight: 600;
    color: #22c55e;
}

.customer-revenue-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}

.customer-row-source {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.customer-row-source.source-lead {
    background: rgba(168, 85, 247, 0.1);
    color: #a855f7;
}

.customer-row-source.source-manual {
    background: var(--accent-soft);
    color: var(--accent);
}

.customer-row-source.source-transaction {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

/* Customer Row Expanded / Detail View */
.customer-row-details {
    display: none;
    width: 100%;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid var(--border-subtle);
}

.customer-row.expanded .customer-row-details {
    display: block;
}

.customer-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
}

.customer-detail-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.customer-detail-item.full-width {
    grid-column: 1 / -1;
}

.customer-detail-item .detail-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.customer-detail-item .detail-value {
    font-size: 13px;
    color: var(--text-main);
    word-break: break-word;
}

.customer-row-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    justify-content: flex-end;
}

.customer-row-actions .btn-sm {
    padding: 8px 16px;
    font-size: 12px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.customer-row-actions .btn-edit {
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--accent);
}

.customer-row-actions .btn-edit:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.customer-row-actions .btn-delete {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.35);
}

.customer-row-actions .btn-delete:hover {
    background: #ef4444;
    color: white;
    border-color: #ef4444;
}

/* Customer Empty State */
.customers-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
}

.customers-empty-state i {
    font-size: 32px;
    margin-bottom: 12px;
    opacity: 0.4;
}

.customers-empty-state p {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 6px 0;
    color: var(--text-main);
}

.customers-empty-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 14px;
    max-width: 300px;
}

/* Dark Mode Customers */
body.dark-mode .customers-section {
    background: var(--bg-surface);
    border-color: var(--border-subtle);
}

body.dark-mode .customer-row {
    background: var(--bg-base);
}

body.dark-mode .customers-search-input {
    background: var(--bg-base);
    border-color: var(--border-subtle);
    color: var(--text-main);
}
/* ===================================
   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);
}

/* ===================================
   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
   =================================== */

/* Exception for custom color hex input - escape unified modal rules */
#eventColorHex {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    font: 600 15px/1 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    color: black !important;
    width: auto !important;
    height: auto !important;
    outline: none !important;
}

#eventColorHex:focus {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Universal Modal Input Overrides */
.unified-modal input[type="text"]:not(#eventColorHex):not(#projectColorHex):not(#editProjectColorHex):not(#spreadsheetColorHex),
.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: 500 !important;
    color: rgba(0, 0, 0, 0.4) !important;
    margin-bottom: 8px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
body.dark-mode .unified-modal .unified-form-label,
body.dark-mode .unified-modal label,
body.dark-mode .modal-overlay label {
    color: rgba(255, 255, 255, 0.38) !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: 8px 16px;
        font-size: 13px;
        min-height: auto;
        min-width: auto;
    }
    
    /* 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: 7px 12px;
        font-size: 12px;
        min-height: auto;
        min-width: auto;
    }
    
    /* 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%;
    }
}
/* ===================================
   MOBILE MODAL IMPROVEMENTS
   Ensure CTAs visible above bottom navbar
   =================================== */
@media (max-width: 768px) {
    /* Modal stays above bottom navbar */
    .modal {
        z-index: 99999;
        padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 16px);
    }

    /* Modal content adjustment for mobile */
    .modal-content,
    .task-modal-content,
    .unified-modal-container {
        max-height: calc(100vh - var(--bottom-nav-height) - env(safe-area-inset-bottom) - 32px);
        margin-bottom: auto;
    }

    /* Ensure modal footers/actions are always visible */
    .modal-actions,
    .task-modal-actions,
    .unified-modal-footer,
    .modal-footer {
        position: sticky;
        bottom: 0;
        background: var(--bg-surface);
        padding: 12px 16px;
        margin: 0 -16px -16px -16px;
        border-top: 1px solid var(--border-subtle);
        z-index: 10;
    }

    /* Hide bottom navbar when modal is open */
    body.modal-open .sidebar {
        display: none !important;
    }

    /* Overview section compact spacing */
    .overview-stats {
        gap: 10px;
        margin-bottom: 16px;
    }

    .stat-card {
        padding: 12px;
        gap: 10px;
        border-radius: 12px;
    }

    .stat-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .stat-number {
        font-size: 20px;
    }

    .stat-label {
        font-size: 11px;
    }

    /* Overview two-column layout stacks on mobile */
    .overview-two-col {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .overview-section {
        padding: 14px;
    }

    .overview-section-header h3 {
        font-size: 15px;
    }

    /* Activity feed compact */
    .activity-item {
        padding: 12px;
        gap: 10px;
    }

    .activity-icon {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .activity-content {
        font-size: 13px;
    }

    .activity-time {
        font-size: 11px;
    }

    /* Team section compact */
    .teammate-card {
        padding: 12px;
        gap: 10px;
    }

    .teammate-avatar {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .teammate-name {
        font-size: 14px;
    }

    .teammate-role {
        font-size: 11px;
    }

    /* Chat compact */
    .chat-message {
        padding: 10px 12px;
        max-width: 85%;
    }

    .chat-message-content {
        font-size: 14px;
    }

    .chat-input-container {
        padding: 10px 12px;
    }

    /* Calendar compact */
    .calendar-container {
        padding: 12px;
    }

    .calendar-day {
        min-height: 40px;
        font-size: 13px;
    }

    .event-item {
        padding: 10px;
        gap: 8px;
    }

    /* Spreadsheet mobile improvements */
    .spreadsheet-panel-header {
        padding: 12px;
    }

    .sheet-title-input {
        font-size: 16px;
    }

    /* Settings sections compact */
    .settings-card {
        padding: 16px;
    }

    .settings-card-header h3 {
        font-size: 15px;
    }

    .form-group label {
        font-size: 13px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 14px;
        padding: 10px 12px;
    }

    /* Transaction rows compact */
    .transaction-row {
        padding: 10px 12px;
    }

    .transaction-info {
        gap: 8px;
    }

    .transaction-icon {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .transaction-name {
        font-size: 13px;
    }

    .transaction-date {
        font-size: 11px;
    }

    .transaction-amount {
        font-size: 14px;
    }

    /* Prevent body scroll when modal open */
    body.modal-open {
        overflow: hidden;
    }
}

/* Small mobile extra compactness */
@media (max-width: 480px) {
    /* Overview and content sections - ALLOW vertical scroll */
    .content-section {
        overflow-y: auto !important;
        overflow-x: hidden;
        max-width: 100%;
        height: auto;
        min-height: 0;
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Overview sections should flow naturally within scrolling container */
    .overview-section,
    .overview-two-col {
        max-width: 100%;
        overflow: visible; /* Allow natural content flow */
        height: auto;
        max-height: none; /* Remove height constraints */
    }

    /* Prevent horizontal overflow on calendar elements only */
    .calendar-container,
    .calendar-grid,
    .week-view-container {
        max-width: 100%;
        overflow-x: auto; /* Allow horizontal scroll for calendar */
    }

    /* Main content area overflow protection */
    .main-content {
        overflow-x: hidden;
        overflow-y: visible;
    }

    .overview-stats {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .stat-card {
        padding: 10px;
    }

    .stat-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .stat-number {
        font-size: 18px;
    }

    /* Overview sections compact */
    .overview-section {
        padding: 12px;
    }

    .overview-section-header {
        margin-bottom: 10px;
    }

    .overview-section-header h2,
    .overview-section-header h3 {
        font-size: 14px;
    }

    /* My Tasks list compact */
    .task-list {
        padding: 8px;
        gap: 6px;
    }

    .task-item {
        padding: 10px;
    }

    .task-title {
        font-size: 13px;
    }

    /* Upcoming events compact */
    .upcoming-events {
        padding: 8px;
    }

    .event-item {
        padding: 8px;
        gap: 6px;
    }

    .event-date {
        min-width: 36px;
    }

    .event-day {
        font-size: 16px;
    }

    .event-month {
        font-size: 10px;
    }

    .event-title {
        font-size: 13px;
    }

    /* Calendar more compact and scrollable */
    .calendar-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .calendar-grid {
        min-width: 320px;
        overflow-x: auto;
    }

    .calendar-day {
        min-height: 50px;
        min-width: 44px;
        padding: 2px;
    }

    .calendar-day-header {
        min-width: 44px;
    }

    .day-number {
        font-size: 10px;
        width: 18px;
        height: 18px;
    }

    .month-event-item {
        padding: 1px 3px;
        font-size: 8px;
    }

    .calendar-day-header {
        padding: 6px 2px;
        font-size: 9px;
    }

    /* Week view overflow fix */
    .week-view-container {
        margin: 0;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
    }

    .week-time-col {
        width: 35px;
        min-width: 35px;
    }

    .week-time-label {
        font-size: 9px;
    }

    /* Finance metrics 2x2 on small screens */
    .finances-metrics-row {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .finance-metric-card {
        padding: 10px;
    }

    .finance-metric-value {
        font-size: 16px;
    }

    /* Subscriptions even more compact */
    .subscription-row {
        padding: 10px;
    }

    .subscription-logo {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .subscription-name {
        font-size: 12px;
    }

    .subscription-amount {
        font-size: 13px;
    }

    /* Activity feed more compact */
    .activity-item {
        padding: 10px;
        gap: 8px;
    }

    .activity-icon {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .activity-content {
        font-size: 12px;
    }

    /* Team cards compact */
    .teammate-card {
        padding: 10px;
    }

    .teammate-avatar {
        width: 32px;
        height: 32px;
    }

    .teammate-name {
        font-size: 13px;
    }

    /* Chat compact */
    .chat-message {
        padding: 8px 10px;
        max-width: 90%;
    }

    .chat-message-content {
        font-size: 13px;
    }

    /* Docs list compact */
    .doc-item {
        padding: 10px;
    }

    .doc-icon {
        width: 32px;
        height: 32px;
    }

    /* Spreadsheet compact */
    .spreadsheet-card {
        padding: 12px;
    }

    /* Section headers compact */
    .section-header h1 {
        font-size: 20px;
    }

    .section-subtitle {
        font-size: 12px;
    }

    /* Compact search bar - icon only until clicked */
    .search-wrapper {
        width: auto;
        max-width: none;
    }

    .search-bar {
        width: 40px;
        height: 40px;
        padding: 0;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition: width 0.3s ease, border-radius 0.3s ease, padding 0.3s ease;
        cursor: pointer;
        position: relative; /* For centering the icon */
    }

    /* Center the search icon in collapsed circle */
    .search-bar i.fa-search {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
    }

    /* Remove absolute positioning when expanded */
    .search-bar.expanded i.fa-search {
        position: static;
        transform: none;
    }

    .search-bar input {
        width: 0;
        opacity: 0;
        transition: width 0.3s ease, opacity 0.3s ease;
    }

    .search-bar .search-clear {
        display: none;
    }

    /* Expanded state */
    .search-bar.expanded {
        width: 200px;
        border-radius: 999px;
        padding: 0 14px;
        cursor: text;
    }

    .search-bar.expanded input {
        width: 100%;
        opacity: 1;
    }

    .search-bar.expanded .search-clear {
        display: flex;
    }
}

/* ===================================
   FINAL MOBILE CALENDAR FIXES
   =================================== */

/* MONTH VIEW - Mobile: scrollable grid with square day cells */
@media (max-width: 900px) {
    /* Calendar container must allow horizontal scroll */
    .calendar-container {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Month view grid layout */
    .calendar-grid {
        display: grid !important;
        grid-template-columns: repeat(7, 140px) !important;
        grid-auto-rows: auto !important;
        gap: 4px !important;
        padding: 6px !important;
        width: max-content !important;
        min-width: calc(7 * 140px + 12px) !important;
    }

    .calendar-day-header {
        min-width: 140px !important;
        width: 140px !important;
        padding: 6px !important;
    }

    #calendarDays {
        display: contents !important;
    }

    #calendarDays > .calendar-day {
        min-width: 140px !important;
        width: 140px !important;
        min-height: 140px !important;
        height: 140px !important;
        border-radius: 12px !important;
        padding: 8px !important;
    }

    /* WEEK VIEW - Mobile: full-width agenda, NOT inside grid */
    .calendar-grid:has(.day-agenda) {
        display: block !important;
        width: 100% !important;
        min-width: 100% !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    #calendarDays:has(.day-agenda) {
        display: block !important;
        width: 100% !important;
    }

    .day-agenda {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-height: 60vh !important;
    }

    /* Hide column view on mobile, show agenda */
    .week-colview {
        display: none !important;
    }
}

/* WEEK VIEW - Desktop and all sizes: when week content is present, no grid */
.calendar-grid:has(.day-agenda),
.calendar-grid:has(.week-colview),
.calendar-grid:has(.week-view-scroll-container) {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
}

#calendarDays:has(.day-agenda),
#calendarDays:has(.week-colview),
#calendarDays:has(.week-view-scroll-container) {
    display: block !important;
    width: 100% !important;
}

.week-view-scroll-container {
    width: 100% !important;
    max-height: 70vh !important;
    overflow: auto !important;
}

/* Day agenda full size */
.day-agenda {
    width: 100%;
}

@media (max-width: 480px) {
    .calendar-grid {
        grid-template-columns: repeat(7, 100px) !important;
    }

    .calendar-day-header {
        min-width: 100px !important;
        width: 100px !important;
    }

    #calendarDays > .calendar-day {
        min-width: 100px !important;
        width: 100px !important;
        min-height: 100px !important;
        height: 100px !important;
    }
}

/* ===================================
   PROJECTS - SIMPLE & ON-BRAND
   Matches existing TeamsterX card/tile patterns
   =================================== */

/* Project Tile Card - matches spreadsheet-card sizing */
.project-tile-wrapper {
    grid-column: span 1;
}

/* Project tile card - consistent sizing across doc/sheet views */
.spreadsheet-card.project-tile-card,
.doc-card.project-tile-card {
    min-height: 160px;
    height: auto;
    max-height: none;
    overflow: visible;
    padding-bottom: 44px;
}

.project-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px;
    padding-bottom: 44px;
    min-height: 160px;
    height: auto;
    max-height: none;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
}

.project-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-color: var(--border-medium);
}

/* Header row */
.project-tile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.project-tile-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.project-tile-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-tile-add:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.project-tile-add svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    stroke-width: 2.5;
}

/* Project list - container for paginated pages */
.project-tile-list {
    display: flex;
    overflow: hidden;
    flex: 1;
    min-height: 0;
    margin-left: -6px;
}

/* Project page - 2x2 grid */
.project-tile-page {
    display: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 6px;
    width: 100%;
    flex-shrink: 0;
}

.project-tile-page.active {
    display: grid;
}

.doc-card.project-tile-card .project-tile-page {
    gap: 10px;
}

/* Project tile navigation */
.project-tile-nav {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-top: 0;
    margin-top: 0;
}

.project-tile-nav-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;
}

.project-tile-nav-btn:hover:not(:disabled) {
    background: var(--accent-soft);
    color: var(--accent);
}

.project-tile-nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.project-tile-nav-btn svg {
    width: 14px;
    height: 14px;
}

.project-tile-nav-dots {
    display: flex;
    gap: 4px;
}

.project-tile-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border-medium);
    transition: all 0.15s ease;
}

.project-tile-dot.active {
    background: var(--accent);
    width: 12px;
    border-radius: 3px;
}

/* Empty state */
.project-tile-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
}

.project-tile-empty-text {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.project-tile-create-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #007aff;
    color: white;
    border: none;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.project-tile-create-btn:hover {
    opacity: 0.85;
}

.project-tile-create-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
}

/* Project badges - super simple: icon + name */
.project-badge {
    --project-color: #007aff;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
    width: 100%;
    max-width: none;
    justify-self: start;
    min-height: 0;
}

.project-badge:hover {
    background: rgba(0, 0, 0, 0.04);
}

.project-badge.active {
    background: color-mix(in srgb, var(--project-color) 12%, transparent);
}

.project-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 6px;
    background: color-mix(in srgb, var(--project-color) 15%, transparent);
    color: var(--project-color);
}

.project-badge-icon svg {
    width: 10px;
    height: 10px;
    stroke: currentColor;
}

.project-badge-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    max-width: 100%;
}

.project-badge.active .project-badge-name {
    color: var(--project-color);
    font-weight: 600;
}

.project-badge-lock {
    font-size: 10px;
    color: var(--text-tertiary);
    margin-left: 2px;
    flex-shrink: 0;
}

.project-badge-check {
    display: none;
}

.project-badge.project-overflow {
    justify-content: center;
}

.project-badge.project-overflow .project-badge-name {
    font-size: 11px;
    color: var(--text-muted);
}

/* Overflow menu - simple dropdown */
.project-overflow-menu {
    position: absolute;
    z-index: 1000;
    min-width: 180px;
    max-width: 240px;
    padding: 6px;
    background: #ffffff;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

.project-overflow-item {
    --project-color: #007aff;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
}

.project-overflow-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

.project-overflow-item.active {
    background: color-mix(in srgb, var(--project-color) 12%, transparent);
}

.project-overflow-item .project-badge-icon {
    width: 22px;
    height: 22px;
}

.project-overflow-item .project-badge-icon svg {
    width: 11px;
    height: 11px;
}

.project-overflow-item .project-badge-name {
    font-size: 13px;
}

.project-overflow-item.active .project-badge-name {
    color: var(--project-color);
    font-weight: 600;
}

/* ===================================
   PROJECT MODAL - SIMPLE FORM
   Reuses unified-modal patterns
   =================================== */
.project-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.4);
}

.project-modal.active {
    display: flex;
}

.project-modal-content {
    width: 100%;
    max-width: 480px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.project-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);
}

.project-modal-title {
    font-size: 17px;
    font-weight: 600;
    color: #000000;
    margin: 0;
}

.project-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;
    transition: opacity 0.15s ease;
}

.project-modal-close:hover {
    opacity: 0.7;
}

.project-modal-close svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
}

.project-modal-body {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: visible;
    position: relative;
    z-index: 2;
}

.project-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.project-form-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.project-form-input {
    width: 100%;
    padding: 12px 14px;
    background: #f5f5f7;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 15px;
    color: var(--text-primary);
    transition: all 0.15s ease;
    outline: none;
}

.project-form-input::placeholder {
    color: var(--text-muted);
}

.project-form-input:focus {
    background: #ffffff;
    border-color: #007aff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

/* Icon grid - compact */
.project-icon-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.project-icon-option {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.04);
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--text-secondary);
}

.project-icon-option svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

.project-icon-option:hover {
    background: rgba(0, 122, 255, 0.08);
    color: #007aff;
}

.project-icon-option.selected {
    background: rgba(0, 122, 255, 0.1);
    border-color: #007aff;
    color: #007aff;
}

/* Color grid - simple dots */
.project-color-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.project-color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: var(--swatch-color);
    cursor: pointer;
    transition: transform 0.1s ease;
}

.project-color-swatch:hover {
    transform: scale(1.1);
}

.project-color-swatch.selected {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 2px var(--bg-surface);
}

.project-modal .unified-modal-footer {
    position: relative;
    z-index: 1;
}

.project-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);
    position: relative;
    z-index: 1;
}

.project-modal-footer .modal-footer-spacer {
    flex: 1;
}

.unified-btn-danger-outline {
    background: transparent;
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.unified-btn-danger-outline:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.5);
}

/* Project Edit Button in Header - Modern Pill Style */
.project-edit-btn {
    background: transparent;
    border: none;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    color: #666666;
    transition: all 0.15s ease;
    margin-left: 12px;
    font-size: 13px;
    font-weight: 500;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.project-edit-btn i {
    font-size: 10px !important;
    color: #666666 !important;
    transition: color 0.15s ease;
}

.project-edit-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #333333;
}

.project-edit-btn:hover i {
    color: #333333 !important;
}

body.dark-mode .project-edit-btn {
    color: #999999;
}

body.dark-mode .project-edit-btn i {
    color: #999999 !important;
}

body.dark-mode .project-edit-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

body.dark-mode .project-edit-btn:hover i {
    color: #ffffff !important;
}

/* Project Title Icon with Color */
.project-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--project-color, #6366f1);
    color: #ffffff;
    margin-right: 10px;
    vertical-align: middle;
}

.project-title-icon svg {
    width: 16px;
    height: 16px;
}

.project-title-text {
    vertical-align: middle;
}

#projectViewTitle {
    display: flex;
    align-items: center;
}

/* ===================================
   PROJECT ASSIGN MODAL - SIMPLIFIED
   Uses existing .unified-modal, .theme-btn, .calendar-view-toggle styles
   =================================== */

/* Mini project icon in theme-btn */
.project-icon-mini {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.project-icon-mini svg {
    width: 10px;
    height: 10px;
    fill: white;
}

/* Make toggle fill width in modal */
#projectAssignModal .calendar-view-toggle {
    display: flex;
    width: 100%;
}

#projectAssignModal .view-toggle-btn {
    flex: 1;
    justify-content: center;
}

/* ===================================
   INPUT TYPE TOGGLE - Multi-option toggle
   Uses calendar-view-toggle base styles
   =================================== */
.input-type-toggle {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-left: 0;
}

.input-type-toggle .view-toggle-btn {
    flex: 1 1 auto;
    min-width: fit-content;
    padding: 8px 12px;
    font-size: 12px;
    justify-content: center;
    text-align: center;
}

.input-type-toggle .view-toggle-btn i {
    font-size: 11px;
}

.input-type-toggle .view-toggle-btn span {
    font-size: 12px;
}

@media (max-width: 600px) {
    .input-type-toggle {
        gap: 4px;
    }
    
    .input-type-toggle .view-toggle-btn {
        padding: 6px 10px;
        font-size: 11px;
    }
    
    .input-type-toggle .view-toggle-btn span {
        display: none;
    }
    
    .input-type-toggle .view-toggle-btn i {
        margin: 0;
    }
}

/* ===================================
   DARK MODE - PROJECTS
   =================================== */
.dark-mode .project-tile {
    background: var(--bg-surface);
    border-color: var(--border-subtle);
}

.dark-mode .project-badge:hover {
    background: rgba(255, 255, 255, 0.06);
}

.dark-mode .project-badge.active {
    background: color-mix(in srgb, var(--project-color) 20%, transparent);
}

.dark-mode .project-badge-icon {
    background: color-mix(in srgb, var(--project-color) 20%, transparent);
}

.dark-mode .project-badge-name {
    color: var(--text-main);
}

.dark-mode .project-overflow-item .project-badge-name {
    color: var(--text-main);
}

.dark-mode .project-overflow-menu {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .project-modal-content {
    background: #1c1c1e;
}

.dark-mode .project-modal-header,
.dark-mode .project-modal-footer {
    border-color: rgba(255, 255, 255, 0.08);
}

.dark-mode .project-modal-title {
    color: #ffffff;
}

.dark-mode .project-modal-close {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
}

.dark-mode .project-form-input {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.dark-mode .project-form-input:focus {
    background: rgba(255, 255, 255, 0.12);
}

.dark-mode .project-icon-option {
    background: rgba(255, 255, 255, 0.08);
}

.dark-mode .project-color-swatch.selected {
    border-color: #ffffff;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .project-modal-content {
        max-width: 100%;
        margin: 10px;
    }

    .project-modal-body {
        padding: 16px 20px;
    }

    .project-modal-footer {
        padding: 14px 20px;
    }
}

/* Transaction Category Dropdowns */
.transaction-category-dropdown {
    position: relative;
    width: 100%;
}

body.dark-mode .transaction-category-dropdown .custom-dropdown-trigger {
    background: var(--bg-surface);
    border-color: var(--border-subtle);
}

body.dark-mode .transaction-category-dropdown .custom-dropdown-menu {
    background: #2c2c2e;
    border-color: var(--border-medium);
}

/* Party (customer/vendor) search inside the dropdown menu */
.transaction-party-menu {
    min-width: 100%;
}
.party-menu-search {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-subtle);
    position: sticky;
    top: 0;
    background: white;
    z-index: 1;
    border-radius: 10px 10px 0 0;
}
body.dark-mode .party-menu-search {
    background: #2c2c2e;
    border-color: var(--border-medium);
}
.party-search-input {
    width: 100%;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 500;
    outline: none;
    background: var(--bg-secondary);
    color: var(--text-main);
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}
.party-search-input:focus {
    border-color: var(--accent);
}
body.dark-mode .party-search-input {
    background: var(--bg-tertiary);
    border-color: var(--border-subtle);
    color: var(--text-main);
}

/* ===================================
   UNIFIED COLOR PICKER (Inline)
   Pill container with hex input and recent colors
   =================================== */

/* Main inline container */
.color-picker-inline {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px 6px 0;
    background: var(--bg-surface);
    border: 2px solid var(--border-medium);
    border-radius: 50px;
    width: fit-content;
    height: 48px;
    box-sizing: border-box;
}

/* Inner pill with swatch and hex input */
.color-picker-inner-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    background: none;
    border: 2px solid var(--border-subtle);
    border-radius: 50px;
    position: relative;
    height: 100%;
    box-sizing: border-box;
    min-height: 48px;
}

.color-picker-current-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.color-picker-current-swatch:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Hidden native color input positioned over swatch */
.color-picker-native {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    opacity: 0;
    cursor: pointer;
    border: none;
    padding: 0;
}

/* Recent colors row */
.color-picker-recent {
    display: flex;
    align-items: center;
    gap: 8px;
}

.color-picker-recent-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    padding: 0;
}

.color-picker-recent-btn:hover {
    transform: scale(1.12);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.color-picker-recent-btn:active {
    transform: scale(1.05);
}

.color-picker-recent-btn.selected {
    border-color: var(--text-main);
}

/* Dark Mode Adjustments */
body.dark-mode .color-picker-inline {
    background: var(--bg-surface);
    border-color: var(--border-medium);
}

body.dark-mode .color-picker-inner-pill {
    background: rgba(0, 0, 0, 0.2);
    border-color: var(--border-medium);
}

body.dark-mode .color-picker-current-swatch {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

body.dark-mode .color-picker-current-swatch:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

body.dark-mode .color-picker-recent-btn {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

body.dark-mode .color-picker-recent-btn:hover {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

/* Narrow variant - minimal inner pill width */
.color-picker-inline.narrow {
    width: 100%;
    max-width: 100%;
}

.color-picker-inline.narrow .color-picker-inner-pill {
    min-width: 88px;
    padding: 0 8px;
    gap: 6px;
}

/* Wide variant - larger inner pill width */
.color-picker-inline.wide .color-picker-inner-pill {
    min-width: 120px;
    padding: 0 16px;
}

/* Preset-only variant - no hex input, just swatch + presets */
.color-picker-inline.preset-only {
    width: fit-content;
}

.color-picker-inline.preset-only .color-picker-inner-pill {
    min-width: 40px;
    padding: 0 10px;
    gap: 0;
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .color-picker-inline {
        flex-wrap: nowrap;
        border-radius: 50px;
        padding: 4px 10px 4px 4px;
        gap: 6px;
        height: 44px;
        overflow: hidden;
        width: 100%;
        box-sizing: border-box;
    }

    .color-picker-inner-pill {
        flex-shrink: 0;
        height: 36px;
        min-height: 36px;
        padding: 0 8px;
    }

    .color-picker-current-swatch {
        width: 22px;
        height: 22px;
    }

    .color-picker-recent {
        flex: 1;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        flex-wrap: nowrap;
        gap: 5px;
    }

    .color-picker-recent::-webkit-scrollbar {
        display: none;
    }

    .color-picker-recent-btn {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }
}


/* ===================================
   UNIFIED ICON PICKER (Inline)
   Pill container with selected icon and icon options
   =================================== */

/* Main inline container - matches color picker design */
.icon-picker-inline {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px 6px 0;
    background: var(--bg-surface);
    border: 2px solid var(--border-medium);
    border-radius: 50px;
    width: 100%;
    max-width: 100%;
    height: 48px;
    box-sizing: border-box;
    overflow: hidden;
}

/* Inner pill with selected icon */
.icon-picker-inner-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    background: none;
    border: 2px solid var(--border-subtle);
    border-radius: 50px;
    height: 100%;
    box-sizing: border-box;
    min-height: 48px;
    min-width: 48px;
}

.icon-picker-selected {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
}

.icon-picker-selected svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

.icon-picker-selected i {
    font-size: 18px;
}

/* Icon options row */
.icon-picker-options {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow: hidden;
    flex: 1;
    justify-content: space-between;
}

.icon-picker-option {
    border: none;
    background: transparent;
    cursor: pointer;
    transition: color 0.15s ease, transform 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    padding: 0;
    width: auto;
    height: auto;
}

.icon-picker-option svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.icon-picker-option i {
    font-size: 18px;
}

.icon-picker-option:hover {
    color: #007aff;
    transform: scale(1.05);
}

.icon-picker-option.selected {
    color: #007aff;
}

/* Dark Mode Adjustments */
body.dark-mode .icon-picker-inline {
    background: var(--bg-surface);
    border-color: var(--border-medium);
}

body.dark-mode .icon-picker-inner-pill {
    background: rgba(0, 0, 0, 0.2);
    border-color: var(--border-medium);
}

body.dark-mode .icon-picker-option {
    background: rgba(255, 255, 255, 0.06);
}

body.dark-mode .icon-picker-option:hover {
    background: rgba(0, 122, 255, 0.15);
}

body.dark-mode .icon-picker-option.selected {
    background: rgba(0, 122, 255, 0.2);
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .icon-picker-inline {
        flex-wrap: wrap;
        border-radius: 20px;
        padding: 8px;
        gap: 8px;
        height: auto;
    }
    
    .icon-picker-inner-pill {
        height: 40px;
        min-height: 40px;
    }
    
    .icon-picker-options {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
}

#projectColorHex,
#editProjectColorHex,
#spreadsheetColorHex {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    font: 600 15px/1 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    color: black !important;
    width: auto !important;
    height: auto !important;
    outline: none !important;
}

#projectColorHex:focus,
#editProjectColorHex:focus,
#spreadsheetColorHex:focus {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Column icon picker tuning - tighter icon spacing and neutral icon color */
#iconPicker.icon-picker-inline {
    gap: 10px;
    padding: 8px 12px 8px 0;
}

#iconPicker .icon-picker-inner-pill {
    margin-left: 0;
}

#iconPicker .icon-picker-options {
    justify-content: space-between;
    gap: 8px;
    padding: 0 10px 0 6px;
    width: 100%;
}

#iconPicker .icon-picker-selected,
#iconPicker .icon-picker-option {
    color: var(--text-muted);
}

#iconPicker .icon-picker-option:hover,
#iconPicker .icon-picker-option.selected {
    color: var(--text-secondary);
}

body.dark-mode #iconPicker .icon-picker-option,
body.dark-mode #iconPicker .icon-picker-option:hover,
body.dark-mode #iconPicker .icon-picker-option.selected {
    background: transparent;
}

/* ===================================
   ACTION BOARD — Tile Card
   Inherits .spreadsheet-card / .doc-card base styles fully.
   The tile uses the same icon/content/meta/progress structure.
   =================================== */
.action-board-tile {
    position: relative;
    overflow: visible;
}

/* The icon IS the decorative circle — fully round with accent glow */
.action-board-tile .spreadsheet-card-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 4px rgba(10,132,255,0.15);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.action-board-tile:hover .spreadsheet-card-icon {
    box-shadow: 0 0 0 6px rgba(10,132,255,0.25);
    transform: scale(1.06);
}


/* ===================================
   ACTION BOARD — Panel Open State
   =================================== */

/* Hide grids/headers when action board is open */
#tasks-section.action-board-open .spreadsheet-header,
#tasks-section.action-board-open .spreadsheet-cards,
#tasks-section.action-board-open .docs-header,
#tasks-section.action-board-open .doc-cards,
#tasks-section.action-board-open .project-view-header,
#tasks-section.action-board-open #projectViewHeader,
#tasks-section.action-board-open #projectEmptyState {
    display: none !important;
}

#tasks-section.action-board-open {
    padding: 0;
    overflow: hidden;
    height: 100%;
}

.action-board-panel {
    display: none;
    flex-direction: column;
    height: calc(100vh - 80px);
    max-height: calc(100vh - 80px);
    background: var(--bg-body);
    animation: panelFadeIn 0.25s ease;
    overflow: visible;
}

/* Windowed mode: account for the 48px margin that .app-container adds */
body:not(.no-window) .action-board-panel {
    height: calc(100vh - 80px - 48px);
    max-height: calc(100vh - 80px - 48px);
}

#tasks-section.action-board-open .action-board-panel {
    display: flex;
}

/* ===================================
   ACTION BOARD — Panel Header
   =================================== */
.ab-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    gap: 12px;
    flex-shrink: 0;
}

.ab-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ab-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ab-panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
}

.ab-panel-title i {
    color: var(--accent);
    font-size: 15px;
}

.ab-save-status {
    font-size: 12px;
    color: var(--text-light);
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--bg-body);
}

.ab-save-status.saving {
    color: var(--warning);
}

.ab-save-status.saved {
    color: var(--success);
}

.ab-today-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    color: var(--text-muted);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    height: 34px;
    box-sizing: border-box;
    white-space: nowrap;
    flex-shrink: 0;
}

.ab-today-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

/* ===================================
   ACTION BOARD — Body (2-column layout)
   =================================== */
.ab-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex: 1;
    overflow: auto;
    min-height: 0;
    gap: 20px;
    padding: 20px 24px;
    position: relative;
    background: #ffffff;
}

body.dark-mode .ab-body {
    background: #1C1C1E;
}

/* Random dots background — generated by random-dots.js */
.ab-body::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: var(--random-dots-bg);
    background-repeat: repeat;
    background-size: var(--random-dots-size, 400px 400px);
}

.ab-body > * {
    position: relative;
    z-index: 1;
}

.ab-tasks-col {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
}

.ab-notes-col {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
}

.ab-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-subtle);
    height: 58px;
    box-sizing: border-box;
}

.ab-col-header h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ab-col-header h4 i {
    color: var(--text-muted);
    font-size: 14px;
}

.ab-task-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-body);
    padding: 3px 10px;
    border-radius: 999px;
}

/* ===================================
   ACTION BOARD — Task Input
   =================================== */
.ab-task-input-row {
    padding: 14px 16px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-subtle);
}

.ab-task-input {
    width: 100%;
    padding: 10px 16px;
    border: 1.5px solid var(--border-subtle);
    border-radius: 12px;
    background: var(--bg-body);
    color: var(--text-main);
    font-size: 14px;
    font-family: inherit;
    transition: all 0.2s ease;
    outline: none;
    box-sizing: border-box;
}

.ab-task-input::placeholder {
    color: var(--text-light);
}

.ab-task-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    background: #fff;
}

/* ===================================
   ACTION BOARD — Task List
   =================================== */
.ab-task-list {
    list-style: none;
    margin: 0;
    padding: 6px 8px;
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ab-task-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    transition: background 0.15s ease;
    position: relative;
    margin-bottom: 2px;
}

.ab-task-item:hover {
    background: var(--bg-body);
}

.ab-task-item.done {
    opacity: 0.5;
}

.ab-task-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--border-medium);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
    padding: 0;
    color: transparent;
    font-size: 10px;
}

.ab-task-checkbox:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.ab-task-item.done .ab-task-checkbox {
    border-color: var(--success);
    background: var(--success);
    color: #fff;
}

.ab-task-title {
    flex: 1;
    font-size: 14px;
    color: var(--text-main);
    line-height: 1.4;
    min-width: 0;
    word-break: break-word;
    cursor: text;
    border-radius: 4px;
    padding: 1px 4px;
    margin: -1px -4px;
    transition: background 0.15s ease;
}

.ab-task-title:hover {
    background: rgba(0,0,0,0.04);
}

.ab-task-edit-input {
    width: 100%;
    font-size: 14px;
    font-family: inherit;
    color: var(--text-main);
    background: var(--bg-surface);
    border: 1.5px solid var(--accent);
    border-radius: 4px;
    padding: 2px 6px;
    outline: none;
    line-height: 1.4;
}

body.dark-mode .ab-task-title:hover {
    background: rgba(255,255,255,0.05);
}

.ab-task-item.done .ab-task-title {
    text-decoration: line-through;
    color: var(--text-muted);
}

.ab-task-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
}

.ab-task-item:hover .ab-task-actions {
    opacity: 1;
}

.ab-task-action-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-light);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.15s ease;
    padding: 0;
}

.ab-task-action-btn:hover {
    background: var(--bg-body);
    color: var(--text-main);
}

.ab-task-action-btn.convert-btn {
    background: transparent;
    color: var(--text-muted);
    border-radius: 50%;
}

.ab-task-action-btn.convert-btn:hover {
    background: var(--accent-soft);
    color: var(--accent);
    transform: none;
    box-shadow: none;
}

.ab-task-action-btn.delete-btn:hover {
    background: rgba(255, 59, 48, 0.1);
    color: #FF3B30;
}

/* Empty state */
.ab-task-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--text-light);
    text-align: center;
    gap: 10px;
    flex: 1;
}

.ab-task-empty i {
    font-size: 32px;
    opacity: 0.3;
}

.ab-task-empty p {
    font-size: 13px;
    margin: 0;
}

/* ===================================
   ACTION BOARD — Notes Editor
   =================================== */
.ab-notes-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
}

.ab-convert-doc-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-left: 6px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    padding: 0;
    flex-shrink: 0;
}

.ab-convert-doc-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(10,132,255,0.35);
}

.ab-convert-preview {
    margin-top: 4px;
}

.ab-convert-preview-card {
    pointer-events: auto;
    cursor: default;
}

.ab-convert-title-input {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    color: var(--text-main);
    padding: 0;
    margin: 0 0 4px 0;
    outline: none;
    line-height: 1.4;
}

.ab-convert-title-input::placeholder {
    color: var(--text-light);
    font-weight: 500;
}

.ab-convert-title-input:focus {
    border-bottom: 1.5px solid var(--accent);
    padding-bottom: 2px;
}

.ab-fmt-btn {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all 0.15s ease;
    padding: 0;
}

.ab-fmt-btn:hover {
    background: var(--bg-body);
    color: var(--text-main);
}

.ab-fmt-btn.active {
    background: var(--accent-soft);
    color: var(--accent);
}

.ab-notes-editor {
    flex: 1;
    padding: 20px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-main);
    overflow-y: auto;
    overscroll-behavior: contain;
    outline: none;
    min-height: 200px;
}

.ab-notes-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--text-light);
    pointer-events: none;
    font-style: italic;
}

.ab-notes-editor p {
    margin: 0 0 8px 0;
}

.ab-notes-editor ul,
.ab-notes-editor ol {
    margin: 0 0 8px 0;
    padding-left: 24px;
}

.ab-notes-editor li {
    margin-bottom: 4px;
}

.ab-notes-editor b,
.ab-notes-editor strong {
    font-weight: 600;
}

/* ===================================
   ACTION BOARD — Dark Mode Overrides
   =================================== */
body.dark-mode .ab-notes-col {
    background: var(--bg-surface);
}

body.dark-mode .ab-notes-editor {
    color: var(--text-main);
    background: transparent;
    caret-color: var(--text-main);
}

/* Strip inline styles from pasted content */
body.dark-mode .ab-notes-editor * {
    color: inherit !important;
    background: transparent !important;
}

body.dark-mode .ab-task-input:focus {
    background: var(--bg-body);
}

body.dark-mode .ab-task-action-btn.delete-btn:hover {
    background: rgba(255, 69, 58, 0.15);
}

body.dark-mode .ab-task-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

body.dark-mode .ab-task-count {
    background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .ab-date-popover {
    background: var(--bg-surface);
    border-color: var(--border-medium);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

body.dark-mode .ab-body::before {
    background-image:
        radial-gradient(circle, rgba(10,132,255,0.38) 0.6px, transparent 0.6px),
        radial-gradient(circle, rgba(10,132,255,0.30) 2.4px, transparent 2.4px),
        radial-gradient(circle, rgba(10,132,255,0.42) 1.0px, transparent 1.0px),
        radial-gradient(circle, rgba(10,132,255,0.25) 2.8px, transparent 2.8px),
        radial-gradient(circle, rgba(10,132,255,0.35) 0.8px, transparent 0.8px),
        radial-gradient(circle, rgba(10,132,255,0.28) 1.6px, transparent 1.6px),
        radial-gradient(circle, rgba(10,132,255,0.44) 1.3px, transparent 1.3px),
        radial-gradient(circle, rgba(10,132,255,0.22) 3.2px, transparent 3.2px),
        radial-gradient(circle, rgba(10,132,255,0.33) 0.5px, transparent 0.5px),
        radial-gradient(circle, rgba(10,132,255,0.40) 1.8px, transparent 1.8px),
        radial-gradient(circle, rgba(10,132,255,0.26) 2.1px, transparent 2.1px),
        radial-gradient(circle, rgba(10,132,255,0.35) 0.9px, transparent 0.9px);
    background-size:
        37px 41px, 97px 89px, 53px 47px, 113px 107px,
        31px 29px, 79px 67px, 43px 59px, 127px 121px,
        23px 19px, 71px 73px, 61px 53px, 83px 97px;
    background-position:
        0 0, 23px 17px, 7px 31px, 53px 43px,
        13px 5px, 41px 19px, 3px 47px, 67px 11px,
        17px 37px, 59px 29px, 11px 61px, 47px 53px;
}

/* ===================================
   UNIVERSAL DATE PICKER — Trigger & Shared Popover
   =================================== */
.custom-dp-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    width: 100%;
    text-align: left;
    gap: 8px;
    background: var(--bg-surface);
    border: 1.5px solid var(--border-subtle);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text-main);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    line-height: 1.4;
    min-height: 44px;
    box-sizing: border-box;
}

.custom-dp-trigger:hover {
    border-color: var(--accent);
}

.custom-dp-trigger:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(10,132,255,0.15);
}

.custom-dp-trigger .custom-dp-label {
    flex: 1;
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-dp-trigger.has-value .custom-dp-label {
    color: var(--text-main);
}

.custom-dp-trigger .custom-dp-icon {
    color: var(--accent);
    font-size: 14px;
    flex-shrink: 0;
}

/* Shared popover — fixed positioning for use inside modals */
#universalDatePopover {
    position: fixed;
    z-index: 200000;
}

/* ===================================
   ACTION BOARD — Date Picker Popover
   =================================== */
.ab-date-picker-wrapper {
    position: relative;
    display: inline-block;
}

.ab-date-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
    z-index: 3000;
    padding: 14px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
}

.ab-date-popover.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ab-dp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.ab-dp-month {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
}

.ab-dp-nav {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: all 0.15s ease;
    padding: 0;
}

.ab-dp-nav:hover {
    background: var(--bg-body);
    color: var(--text-main);
}

.ab-dp-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 4px;
}

.ab-dp-weekdays span {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-light);
    padding: 4px 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ab-dp-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.ab-dp-day {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main);
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.12s ease;
    padding: 0;
    position: relative;
}

.ab-dp-day:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

.ab-dp-day.today {
    background: var(--accent);
    color: #fff;
    font-weight: 700;
}

.ab-dp-day.selected {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.ab-dp-day.today.selected {
    outline: 2px solid #fff;
    outline-offset: -2px;
}

.ab-dp-day.other-month {
    color: var(--text-light);
    opacity: 0.5;
}

.ab-dp-day.future {
    opacity: 0.25;
    pointer-events: none;
    cursor: default;
}

.ab-dp-day.has-board::after {
    content: '';
    position: absolute;
    bottom: 2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #aab0b8;
}

.ab-dp-day.today.has-board::after {
    background: rgba(255,255,255,0.7);
}

.ab-dp-day.selected.has-board::after {
    background: var(--accent);
}

.ab-dp-today-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 10px;
    padding: 8px 0;
    border: none;
    background: transparent;
    color: var(--accent);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.ab-dp-today-link:hover {
    background: var(--accent-soft);
}

/* ===================================
   ACTION BOARD — Timer Widget (Ring)
   =================================== */
.ab-timers-section {
    display: flex;
    justify-content: center;
    padding: 10px 14px;
    border-top: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.ab-timer-widget {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    width: 100%;
}

/* Ring wrapper */
.ab-timer-ring-wrap {
    position: relative;
    width: 90px;
    height: 90px;
    min-width: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ab-timer-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.ab-timer-track {
    fill: none;
    stroke: rgba(0,0,0,0.06);
    stroke-width: 6;
}

.ab-timer-progress {
    fill: none;
    stroke: #7C3AED;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 553;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.4s ease;
}

/* Time display centered in ring */
.ab-timer-time {
    position: relative;
    z-index: 1;
    font-family: 'SF Mono', 'Menlo', 'Consolas', 'Courier New', monospace;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.5px;
    line-height: 1;
    color: var(--text-main);
    user-select: none;
    font-variant-numeric: tabular-nums;
}

/* Finished pulse */
@keyframes abTimerPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.ab-timer-widget.finished .ab-timer-time {
    animation: abTimerPulse 1s ease-in-out infinite;
}

/* Running glow on the ring */
.ab-timer-widget.running .ab-timer-ring-wrap {
    filter: drop-shadow(0 0 8px rgba(124,58,237,0.25));
}

/* Stopwatch mode: hide the SVG ring but keep the time display visible */
.ab-timer-widget[data-mode="stopwatch"] .ab-timer-ring {
    display: none;
}

/* Stopwatch mode: collapse the ring-wrap to just fit the time text */
.ab-timer-widget[data-mode="stopwatch"] .ab-timer-ring-wrap {
    background: none;
    width: auto;
    height: auto;
    min-width: 0;
}

/* Stopwatch mode: tighten the section padding since no circle to show */
.ab-timers-section:has(.ab-timer-widget[data-mode="stopwatch"]) {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Right area: toggle, inputs, controls — all horizontal */
.ab-timer-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}

/* Mode toggle — matches app calendar/view toggles */
.ab-timer-mode-toggle {
    display: inline-flex;
    width: fit-content;
    background: var(--bg-surface);
    border-radius: 999px;
    padding: 3px;
    gap: 3px;
    border: 1px solid var(--border-subtle);
}

.ab-timer-mode-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: auto;
    min-width: auto;
    white-space: nowrap;
}

.ab-timer-mode-btn i {
    font-size: 10px;
}

.ab-timer-mode-btn:hover {
    color: var(--text-main);
    background: var(--bg-body);
}

.ab-timer-mode-btn.active {
    background: rgb(183, 183, 183);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}

/* Time input row (timer mode only) */
.ab-timer-input-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ab-timer-widget[data-mode="stopwatch"] .ab-timer-input-row {
    display: none;
}

.ab-timer-input {
    width: 52px;
    padding: 6px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    background: var(--bg-body);
    color: var(--text-main);
    font-family: 'SF Mono', 'Menlo', 'Consolas', 'Courier New', monospace;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    outline: none;
    transition: border-color 0.2s ease;
    -moz-appearance: textfield;
    appearance: textfield;
    min-height: auto;
    min-width: auto;
}

.ab-timer-input::-webkit-outer-spin-button,
.ab-timer-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ab-timer-input:focus {
    border-color: #7C3AED;
    box-shadow: 0 0 0 2px rgba(124,58,237,0.12);
}

.ab-timer-input-sep {
    font-family: 'SF Mono', 'Menlo', 'Consolas', 'Courier New', monospace;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-muted);
    user-select: none;
    padding: 0 1px;
}

/* Hide inputs when running */
.ab-timer-widget.running .ab-timer-input-row {
    opacity: 0.35;
    pointer-events: none;
}

/* Controls — minimal, no container */
.ab-timer-controls {
    display: flex;
    gap: 6px;
    align-items: center;
}

.ab-timer-ctrl {
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: auto;
    min-width: auto;
    position: relative;
    background: none;
}

.ab-timer-start {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 12px;
    background: none;
    color: #7C3AED;
    box-shadow: none;
}

.ab-timer-start:hover {
    background: rgba(124,58,237,0.10);
    box-shadow: none;
    transform: none;
}

.ab-timer-start:active {
    transform: none;
    box-shadow: none;
    background: rgba(124,58,237,0.18);
}

.ab-timer-reset {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 11px;
    color: var(--text-muted);
    background: none;
}

.ab-timer-reset:hover {
    background: rgba(0,0,0,0.06);
    color: var(--text-main);
    transform: none;
}

.ab-timer-reset:active {
    transform: none;
}

/* Running state: pause button style */
.ab-timer-widget.running .ab-timer-start {
    color: #7C3AED;
    background: none;
    box-shadow: none;
}

.ab-timer-widget.running .ab-timer-start:hover {
    background: rgba(124,58,237,0.10);
    box-shadow: none;
    transform: translateY(-1px);
}

/* ---- Dark mode ---- */
body.dark-mode .ab-timer-mode-toggle {
    background: var(--bg-surface);
    border-color: var(--border-subtle);
}

body.dark-mode .ab-timer-mode-btn:hover {
    background: var(--bg-body);
}

body.dark-mode .ab-timer-mode-btn.active {
    background: var(--accent);
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
}

body.dark-mode .ab-timer-track {
    stroke: rgba(255,255,255,0.08);
}

body.dark-mode .ab-timer-progress {
    stroke: #8B5CF6;
}

body.dark-mode .ab-timer-widget.running .ab-timer-ring-wrap {
    filter: drop-shadow(0 0 10px rgba(139,92,246,0.28));
}

body.dark-mode .ab-timer-input {
    background: var(--bg-surface);
    border-color: var(--border-subtle);
    color: var(--text-main);
}

body.dark-mode .ab-timer-input:focus {
    border-color: #8B5CF6;
    box-shadow: 0 0 0 2px rgba(139,92,246,0.15);
}

body.dark-mode .ab-timer-reset {
    background: rgba(255,255,255,0.06);
}

body.dark-mode .ab-timer-reset:hover {
    background: rgba(255,255,255,0.12);
    color: var(--text-main);
}

body.dark-mode .ab-timer-start {
    background: #8B5CF6;
    box-shadow: 0 2px 8px rgba(139,92,246,0.35);
}

body.dark-mode .ab-timer-start:hover {
    background: #7C3AED;
    box-shadow: 0 4px 14px rgba(139,92,246,0.45);
}

body.dark-mode .ab-timer-widget.running .ab-timer-start {
    background: rgba(139,92,246,0.15);
    color: #8B5CF6;
    box-shadow: none;
}

body.dark-mode .ab-timer-widget.running .ab-timer-start:hover {
    background: rgba(139,92,246,0.25);
}

/* ===================================
   ACTION BOARD — Responsive (<1024px)
   =================================== */
@media (max-width: 1024px) {
    .ab-body {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        padding: 16px;
        gap: 16px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ab-tasks-col {
        max-height: 45vh;
    }

    .ab-notes-col {
        min-height: 40vh;
        overflow: hidden;
    }

    .ab-timers-section {
        padding: 8px 10px;
        flex-shrink: 0;
    }

    .ab-timer-widget {
        gap: 14px;
    }

    .ab-timer-ring-wrap {
        width: 80px;
        height: 80px;
        min-width: 80px;
    }

    .ab-timer-time {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .ab-panel-header {
        padding: 10px 14px;
    }

    .ab-body {
        padding: 12px;
        gap: 12px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ab-col-header {
        padding: 12px 14px;
    }

    .ab-task-input-row {
        padding: 10px 12px;
    }

    .ab-task-item {
        padding: 9px 10px;
    }

    .ab-notes-editor {
        padding: 14px;
    }

    .ab-task-actions {
        opacity: 1;
    }

    .ab-task-checkbox {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
    }

    .ab-date-popover {
        right: -20px;
        width: 260px;
    }

    .ab-timers-section {
        display: none;
    }

    .ab-timer-widget {
        gap: 8px;
        flex-wrap: nowrap;
    }

    .ab-timer-ring-wrap {
        width: 54px;
        height: 54px;
        min-width: 54px;
    }

    .ab-timer-ring .ab-timer-track,
    .ab-timer-ring .ab-timer-progress {
        stroke-width: 8;
    }

    .ab-timer-time {
        font-size: 12px;
    }

    .ab-timer-right {
        gap: 6px;
        flex-wrap: wrap;
    }

    .ab-timer-mode-toggle {
        padding: 2px;
        gap: 2px;
    }

    .ab-timer-mode-btn {
        padding: 3px 8px;
        font-size: 10px;
        gap: 4px;
    }

    .ab-timer-mode-btn i {
        font-size: 9px;
    }

    .ab-timer-input {
        width: 32px;
        padding: 3px 4px;
        font-size: 11px;
    }

    .ab-timer-controls {
        gap: 2px;
    }

    .ab-timer-start {
        width: 26px;
        height: 26px;
        font-size: 10px;
    }

    .ab-timer-reset {
        width: 22px;
        height: 22px;
        font-size: 9px;
    }

    .ab-timer-input-sep {
        font-size: 12px;
    }
}


/* === Help tab: Report a Bug card (brand: clean, monochrome-first, subtle accent) === */
.help-bug-card {
    position: relative;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 18px 18px;
    margin-bottom: 8px;
    background: var(--bg-surface, var(--bg-primary, #FFFFFF));
    border: 1px solid var(--border-subtle, var(--border-color, rgba(0,0,0,0.06)));
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px -8px rgba(0,0,0,0.08);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.help-bug-card:hover {
    border-color: var(--border-medium, rgba(0,0,0,0.12));
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 8px 20px -10px rgba(0,0,0,0.10);
}
/* legacy nodes from prior gradient design — neutralised so they don't render */
.help-bug-card-glow,
.help-bug-card-inner { all: unset; display: contents; }

.help-bug-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--accent-soft, rgba(0,112,243,0.12));
    color: var(--accent, #0070F3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}
.help-bug-body { flex: 1; min-width: 0; }
.help-bug-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-main, var(--text-primary));
    margin-bottom: 4px;
}
.help-bug-desc {
    margin: 0 0 14px 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted, var(--text-secondary));
}
.help-bug-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.help-bug-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 8px;
    border: 0;
    background: var(--accent, #0070F3);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background .12s ease;
}
.help-bug-cta:hover { background: var(--accent-hover, #0051CC); }
.help-bug-cta:active { background: var(--accent-hover, #0051CC); }
.help-bug-cta i { font-size: 11px; }

.help-bug-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted, var(--text-secondary));
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--border-subtle, var(--border-color, rgba(0,0,0,0.08)));
    transition: color .15s, border-color .15s, background .15s;
}
.help-bug-secondary:hover {
    color: var(--text-main, var(--text-primary));
    border-color: var(--border-medium, rgba(0,0,0,0.12));
    background: var(--bg-surface-soft, rgba(0,0,0,0.02));
}
.help-bug-secondary i { font-size: 11px; }

.help-bug-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.help-bug-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 6px;
    background: transparent;
    color: var(--text-light, var(--text-tertiary, #86868B));
    font-size: 11px;
    font-weight: 500;
    border: 1px solid var(--border-subtle, var(--border-color, rgba(0,0,0,0.06)));
}
.help-bug-pill i { font-size: 9px; opacity: .7; }

body.dark-mode .help-bug-card,
.dark-mode .help-bug-card { background: var(--bg-surface, #1C1C1E); }


/* ===================================================================
 * ADMIN PANEL
 * Brand-consistent. Uses existing tokens (--accent, --bg-surface, etc.)
 * =================================================================== */
.admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-subtle);
}
.admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
}
.admin-whoami {
    font-size: 12px;
    color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.admin-section { margin-bottom: 22px; }
.admin-section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 4px;
}
.admin-section-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.admin-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.admin-select,
.admin-status-select,
.admin-input {
    height: 34px;
    padding: 0 32px 0 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    color: var(--text-main);
    font-size: 13px;
    transition: border-color .15s, box-shadow .15s;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23999' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
    cursor: pointer;
}
.admin-input {
    min-width: 220px;
    flex: 1;
    background-image: none;
    padding-right: 12px;
    cursor: text;
}
.admin-select { min-width: 130px; }
.admin-status-select { height: 30px; font-size: 12px; min-width: 110px; }
.admin-select:focus,
.admin-status-select:focus,
.admin-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.admin-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    color: var(--text-main);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.admin-btn:hover { border-color: var(--accent); color: var(--accent); }
.admin-btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.admin-btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #fff;
}
.admin-btn-danger {
    width: 34px;
    padding: 0;
    justify-content: center;
    color: var(--text-muted);
}
.admin-btn-danger:hover {
    border-color: #dc2626;
    color: #dc2626;
}

.admin-tasks-list {
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-surface);
}
.admin-task-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-subtle);
}
.admin-task-row:last-child { border-bottom: none; }
.admin-task-row:hover { background: var(--bg-body); }

.admin-task-main { flex: 1; min-width: 0; }
.admin-task-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.admin-task-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main);
    word-break: break-word;
}
.admin-task-desc {
    margin-top: 6px;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 2px 10px;
    font-size: 12px;
    line-height: 1.5;
}
.admin-desc-key {
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
}
.admin-desc-val {
    color: var(--text-main);
    word-break: break-word;
}
.admin-desc-fullrow {
    grid-column: 1 / -1;
    color: var(--text-muted);
    word-break: break-word;
}
.admin-severity-pill {
    display: inline-block;
    padding: 1px 9px;
    border-radius: 99px;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: capitalize;
    line-height: 1.8;
}
.admin-severity-unknown {
    background: var(--bg-body);
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
}
.admin-task-time {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.admin-task-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
/* admin-status-select base style shared with admin-select above */

.admin-source-tag,
.admin-status-tag,
.admin-ws-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    text-transform: lowercase;
}
.admin-source-tag {
    background: var(--bg-body);
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
}
.admin-source-tally   { color: #ec4899; border-color: rgba(236,72,153,.3); }
.admin-source-slack   { color: #4A154B; border-color: rgba(74,21,75,.3); }
.admin-source-github  { color: var(--text-main); }
.admin-source-sentry  { color: #7c3aed; border-color: rgba(124,58,237,.3); }
.admin-source-discord { color: #5865F2; border-color: rgba(88,101,242,.3); }
.admin-source-google  { color: #ea4335; border-color: rgba(234,67,53,.3); }

.admin-status-tag {
    border: 1px solid transparent;
}
.admin-status-triage     { background: rgba(0,112,243,.10); color: var(--accent); }
.admin-status-todo       { background: var(--bg-body); color: var(--text-muted); border-color: var(--border-subtle); }
.admin-status-inprogress { background: rgba(234,179,8,.12);  color: #b45309; }
.admin-status-done       { background: rgba(34,197,94,.12);  color: #16a34a; }
.admin-status-cancelled  { background: var(--bg-body); color: var(--text-muted); border-color: var(--border-subtle); text-decoration: line-through; }

.admin-ws-tag {
    background: var(--bg-body);
    color: var(--text-muted);
    text-transform: none;
    font-family: inherit;
    font-weight: 500;
}

.admin-loading,
.admin-empty {
    padding: 36px 16px;
    text-align: center;
    color: var(--text-muted);
}
.admin-empty-icon {
    font-size: 28px;
    color: var(--text-tertiary);
    margin-bottom: 10px;
}
.admin-empty-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 4px;
}
.admin-empty-desc { font-size: 12.5px; }

.admin-error {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(220,38,38,.06);
    border: 1px solid rgba(220,38,38,.2);
    color: #b91c1c;
    font-size: 13px;
}

body.dark-mode .admin-status-inprogress { color: #fbbf24; }
body.dark-mode .admin-status-done       { color: #4ade80; }
body.dark-mode .admin-error             { background: rgba(220,38,38,.12); color: #fca5a5; }

/* ===================================
   PROJECT DRAG & DROP (reorder + nest into folder)
   =================================== */
/* Keep drag events on the badge itself — child spans must not steal them,
   otherwise dragleave flickers and the drop zone is misread. */
.project-badge[draggable="true"] { cursor: grab; }
.project-badge-icon, .project-badge-name, .project-badge-folder-count,
.project-badge-lock { pointer-events: none; }

.project-badge.project-badge-dragging {
    opacity: 0.45;
    cursor: grabbing;
}

/* Nest target: highlight the whole badge with the accent ring. */
.project-badge.drop-nest {
    outline: 2px solid var(--accent, #0070f3);
    outline-offset: 1px;
    background: var(--accent-soft, rgba(0,112,243,0.12));
}
/* Reorder: an accent bar on the leading/trailing edge of the target. */
.project-badge.drop-before,
.project-badge.drop-after { position: relative; }
.project-badge.drop-before::before,
.project-badge.drop-after::after {
    content: '';
    position: absolute;
    top: 12%;
    bottom: 12%;
    width: 3px;
    border-radius: 3px;
    background: var(--accent, #0070f3);
}
.project-badge.drop-before::before { left: -3px; }
.project-badge.drop-after::after   { right: -3px; }

/* Folder indicator: small count pill on projects that contain sub-projects. */
.project-badge.is-folder { position: relative; }
.project-badge-folder-count {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--accent, #0070f3);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
}

/* ===================================
   SPREADSHEET AIRTABLE-STYLE FIELD TYPES
   currency · percent · checkbox · rating · multi-select · date
   =================================== */
.custom-currency-cell, .custom-percent-cell { display: flex; align-items: center; gap: 4px; }
.custom-currency-cell .custom-affix,
.custom-percent-cell .custom-affix { color: var(--text-muted, #6E6E73); font-size: 13px; flex: none; }
.custom-currency-cell .custom-number-input,
.custom-percent-cell .custom-number-input { flex: 1 1 auto; min-width: 0; }

.custom-checkbox-cell { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.custom-checkbox-cell input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent, #0070f3); }

.custom-rating-cell { display: inline-flex; gap: 3px; cursor: pointer; }
.custom-rating-cell .rating-star { color: var(--accent, #0070f3); font-size: 14px; transition: transform 120ms ease-out; }
.custom-rating-cell .rating-star.far { color: var(--border-subtle, #d2d2d7); }
.custom-rating-cell .rating-star:hover { transform: scale(1.15); }

.custom-multiselect-cell { display: flex; align-items: center; justify-content: space-between; gap: 6px; cursor: pointer; min-height: 28px; }
.custom-multiselect-pills { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

.custom-date-input { border: none; background: transparent; color: inherit; font: inherit; width: 100%; cursor: pointer; }

/* Sheet/doc card being dragged onto a project to move it in */
.spreadsheet-card[draggable="true"], .doc-card[draggable="true"] { cursor: grab; }
.spreadsheet-card.card-dragging, .doc-card.card-dragging { opacity: 0.5; cursor: grabbing; }

/* Sheet reorder: accent insertion bar on the leading/trailing edge of the target card */
.spreadsheet-card.drop-before, .spreadsheet-card.drop-after { position: relative; }
.spreadsheet-card.drop-before::before, .spreadsheet-card.drop-after::after {
    content: '';
    position: absolute;
    top: 8%;
    bottom: 8%;
    width: 3px;
    border-radius: 3px;
    background: var(--accent, #0070f3);
    z-index: 3;
}
.spreadsheet-card.drop-before::before { left: -6px; }
.spreadsheet-card.drop-after::after   { right: -6px; }