/* ===================================
   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;
    /* Clearance reserved BELOW the nav icons for the home indicator. We trim
       12px off the raw safe-area inset (~34px on Face ID iPhones -> ~22px) so
       the icons don't float too high, while still clearing the indicator.
       Floor of 8px keeps a touch margin on non-notched phones.
       NOTE: the mobile #chat-section.content-section rule (iOS keyboard
       avoidance block, ~line 39820) inlines this same formula on purpose —
       keep the two in sync. */
    --nav-bottom-gap: 8px; /* fallback if max()/env() below is rejected */
    --nav-bottom-gap: max(calc(env(safe-area-inset-bottom, 0px) - 12px), 8px);
    /* Full height of the fixed bottom nav = icon row + home-indicator clearance.
       Single source of truth: bar height AND content clearance both derive from this. */
    --nav-safe-bottom: calc(var(--bottom-nav-height) + var(--nav-bottom-gap));
    /* Keyboard overlay height on iOS standalone (set by js/keyboard-inset.js; 0 otherwise) */
    --keyboard-inset: 0px;

    /* 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);

    /* Selected sidebar nav item — neutral grey fill (see .nav-item.active) */
    --nav-item-active-bg: rgba(0, 0, 0, 0.07);
    --nav-item-active-bg-hover: rgba(0, 0, 0, 0.11);
    
    /* 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;
    /* Sidebar nav items: rectangle with a slight radius, not a pill. */
    --radius-nav-item: 8px;
    
    /* 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);

    /* Selected sidebar nav item — neutral grey fill (see .nav-item.active) */
    --nav-item-active-bg: rgba(255, 255, 255, 0.1);
    --nav-item-active-bg-hover: 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;
}

/* Monochrome mode */
html.monochrome-mode {
    filter: grayscale(100%) !important;
}

html.monochrome-mode:not(.dark-mode) {
    --accent: #000000;
    --primary-blue: #000000;
}

html.monochrome-mode:not(.dark-mode) .btn-primary,
html.monochrome-mode:not(.dark-mode) .unified-btn-primary,
html.monochrome-mode:not(.dark-mode) .admin-btn-primary {
    background: #000000 !important;
    color: #FFFFFF !important;
}

html.monochrome-mode:not(.dark-mode) .btn-primary:hover,
html.monochrome-mode:not(.dark-mode) .unified-btn-primary:hover,
html.monochrome-mode:not(.dark-mode) .admin-btn-primary:hover {
    background: #333333 !important;
}

/* 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
   =================================== */
/* Full-bleed: fills the viewport edge to edge, like a native app window. */
.app-container {
    display: flex;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    margin: 0;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    overflow: hidden;
    position: relative;
}

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

.sidebar-header {
    padding: 4px 4px 20px 4px;
    margin-bottom: 8px;
}

/* Brand lockup: mark + wordmark, aligned to the nav items' 12px text inset so
   the logo and the nav labels share one optical left edge. */
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: var(--radius-nav-item);
    text-decoration: none;
    color: var(--text-main);
    transition: background-color var(--transition-fast);
}

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

.logo-mark {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}

.logo-wordmark {
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1;
    white-space: nowrap;
}

.logo-x {
    color: var(--accent);
}

/* 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: 10px 12px;
    border: none;
    background: transparent;
    border-radius: var(--radius-nav-item);
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-muted);
    transition: all var(--transition-fast);
    position: relative;
    letter-spacing: -0.01em;
    /* No press feedback on navigation — the active state moving is the feedback */
    -webkit-tap-highlight-color: transparent;
}

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

/* Selected: the hover treatment in neutral grey rather than accent-tinted, so
   the current section reads as "resting here" instead of "about to be clicked".
   No translateY — a permanently lifted item looks like a stuck hover. */
.nav-item.active {
    background-color: var(--nav-item-active-bg);
    color: var(--text-main);
    font-weight: 600;
    border: none;
}

/* Hover on the already-selected item: one step darker so the button still
   responds to the pointer instead of looking dead. */
.nav-item.active:hover {
    background-color: var(--nav-item-active-bg-hover);
    color: var(--text-main);
}

/* Lucide SVGs (js/icons.js). Sized on the 24px grid, scaled to 20px in the rail;
   stroke inherits currentColor so active/hover states need no icon-specific rules. */
.nav-item .icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke-width: 2;
    opacity: 0.85;
    transition: opacity var(--transition-fast), stroke-width var(--transition-fast);
}

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

.nav-item.active .icon {
    stroke-width: 2.25;
}

/* Hide sidebar icons when disabled */
.hide-sidebar-icons .nav-item .icon {
    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;
}

/* Uploaded profile picture. Sits on top of the colour+initials fallback that
   the avatar element already renders, so a slow or broken image degrades to
   initials rather than an empty circle. Injected by applyAvatarPhoto(). */
.avatar-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* Every avatar element in the app. These need to be the containing block for
   the absolutely-positioned image above, and they share one flat accent
   background for the initials fallback — per-user avatar colours were removed,
   so an avatar is either the person's photo or their initials on the accent. */
.user-avatar,
#topBarAvatar,
.profile-avatar-large,
.member-avatar,
.teammate-avatar,
.message-avatar,
.assignee-avatar,
.assignee-option-avatar,
.dropdown-assignee-avatar,
.task-chip-avatar,
.chat-intro-avatar,
.chat-header-avatar,
.chat-room-icon-avatar,
.chat-new-member-avatar,
.chat-settings-member-avatar,
.chat-settings-add-avatar,
.mention-item-avatar,
.reaction-avatar,
.collab-member-avatar,
.ov-item-avatar,
.docsign-av {
    position: relative;
    overflow: hidden;
    background: var(--accent);
    color: #fff;
}

/* Non-person avatars opt out of the accent fallback. "Team" chips set their
   background inline; the +N overflow chip has its own rule further down. The
   Teamster bot renders a logo, so it needs a neutral plate stated here — it
   has no other background rule of its own. */
.message-avatar.teamster-bot {
    background: var(--bg-surface-soft, #E5E5EA);
}

/* Collaborator rows build their avatar in JS; size it here rather than inline. */
.collab-member-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
}

/* `.has-photo` is a state hook only — the initials underneath are deliberately
   left in place. The uploaded image is flattened onto white before encoding
   (see processAvatarImage), so it fully covers them; if it ever fails to load,
   the initials show through as the fallback instead of an empty circle. */

.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);
    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;
}

/* Account/profile button in the top bar — replaced the cog as the settings
   dropdown trigger, and stands in for the removed sidebar profile card. */
.topbar-avatar {
    display: inline-flex;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    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;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.topbar-avatar:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-soft);
}

.topbar-avatar:active {
    transform: translateY(0) scale(0.96);
}

.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,
.activity-icon.link-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 */
}

/* Ensure forms inside unified modals do not break the flexbox chain */
.unified-modal-container form {
    display: contents;
}

.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;
    /* Flat accent: the initials fallback is identical across every avatar now
       that per-user avatar colours are gone. */
    background: var(--accent);
    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.received .message-avatar {
    background: #4A154B !important;
}
.message.slack-msg.received .message-avatar.teamster-bot {
    background: #fff !important;
}
.message.slack-msg.received .message-text {
    background: rgba(74, 21, 75, 0.05); /* very light slack purple */
    color: var(--text-color, #1e293b);
    border: none;
}
body.dark-mode .message.slack-msg.received .message-text {
    background: rgba(74, 21, 75, 0.2);
}
.message.slack-msg.sent .message-avatar {
    background: var(--brand-blue, #007aff) !important;
}
.message.slack-msg.sent .message-text {
    background: var(--brand-blue, #007aff);
    color: #fff;
    border: none;
}

/* 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: 11px;
    font-weight: 600;
    color: var(--text-secondary, #666);
    background: rgba(0, 0, 0, 0.06);
    padding: 4px 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
}
body.dark-mode .slack-pick-meta {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}
.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: 16px; /* <16px makes iOS auto-zoom the page on focus */
        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: var(--accent);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
}

body.dark-mode .view-toggle-btn.active {
    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%;
}

/* Docs header: group the Import + New buttons together on the right */
/* Action slot at the right of the Sheets / Docs / Project headers. All three
   use the same container and the same circular button so the heading,
   subheading and button land in identical positions when switching views. */
.workspace-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Doc editor: tables ───────────────────────────────────────────── */
.doc-editor table {
    border-collapse: collapse;
    width: 100%;
    margin: 14px 0;
    font-size: 14px;
}
.doc-editor th,
.doc-editor td {
    border: 1px solid var(--border-medium);
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
    word-break: break-word;
}
.doc-editor thead th,
.doc-editor thead td {
    background: var(--bg-body);
    font-weight: 600;
}
/* Imported tables usually have no <thead>; give the first row a header look */
.doc-editor table:not(:has(thead)) tr:first-child > td {
    background: var(--bg-body);
    font-weight: 600;
}

/* ── Doc editor: color/highlight swatch menu ──────────────────────── */
.doc-color-menu {
    display: flex;
    gap: 6px;
    padding: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    box-shadow: var(--shadow-subtle);
    animation: slideDown 0.15s ease;
}
.doc-color-swatch {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid var(--border-medium);
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--text-muted);
    transition: transform var(--transition-fast);
}
.doc-color-swatch:hover { transform: scale(1.12); }
.doc-color-clear { background: var(--bg-surface); }

/* Cell-fill swatch row inside the table menu */
.doc-cell-swatches {
    display: flex;
    gap: 6px;
    padding: 4px 4px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-subtle);
}

/* Semantic cell fills — saturated in light mode, adaptive (darker) in dark mode.
   !important so a user-chosen fill wins over the default header-row styling. */
.doc-editor td[data-cell-color],
.doc-editor th[data-cell-color] {
    background-color: var(--cc-bg) !important;
    color: var(--cc-fg) !important;
}
.doc-editor [data-cell-color="red"]    { --cc-bg:#F5B7B1; --cc-fg:#641E16; }
.doc-editor [data-cell-color="orange"] { --cc-bg:#F8C471; --cc-fg:#7E5109; }
.doc-editor [data-cell-color="yellow"] { --cc-bg:#F7DC6F; --cc-fg:#7D6608; }
.doc-editor [data-cell-color="green"]  { --cc-bg:#ABEBC6; --cc-fg:#186A3B; }
.doc-editor [data-cell-color="blue"]   { --cc-bg:#AED6F1; --cc-fg:#1A5276; }
.doc-editor [data-cell-color="purple"] { --cc-bg:#D2B4DE; --cc-fg:#6C3483; }
.doc-editor [data-cell-color="gray"]   { --cc-bg:#CACFD2; --cc-fg:#424949; }

body.dark-mode .doc-editor [data-cell-color="red"]    { --cc-bg:#6E2C26; --cc-fg:#F5B7B1; }
body.dark-mode .doc-editor [data-cell-color="orange"] { --cc-bg:#6E4A1E; --cc-fg:#F8C471; }
body.dark-mode .doc-editor [data-cell-color="yellow"] { --cc-bg:#6B5D14; --cc-fg:#F7DC6F; }
body.dark-mode .doc-editor [data-cell-color="green"]  { --cc-bg:#1D5C38; --cc-fg:#A9DFBF; }
body.dark-mode .doc-editor [data-cell-color="blue"]   { --cc-bg:#1B4F72; --cc-fg:#AED6F1; }
body.dark-mode .doc-editor [data-cell-color="purple"] { --cc-bg:#4A235A; --cc-fg:#D2B4DE; }
body.dark-mode .doc-editor [data-cell-color="gray"]   { --cc-bg:#424949; --cc-fg:#CACFD2; }

/* 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);
}

/* Removed Toggle Completed Button CSS */

.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: 320px;
    background: var(--bg-surface);
    border-right: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
    overflow: hidden;
    margin-left: 0;
}

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

/* Scoped to the column panel: this used to be a bare `.sidebar-header`, which
   collided with the app sidebar's header (same class, defined ~9200 lines
   earlier) and silently overrode the brand lockup's padding and borders. */
.column-toggle-sidebar .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;
}

.column-toggle-sidebar .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;
}

/* Column Edit Button */
.column-edit-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 14px;
    padding: 6px;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    transition: all 0.2s ease;
}

.column-edit-btn:hover {
    opacity: 1;
    color: var(--text-main);
    background: rgba(0, 0, 0, 0.05);
}

@media (min-width: 769px) {
    .column-edit-btn {
        opacity: 0;
        pointer-events: none;
    }
    .column-toggle-item:hover .column-edit-btn {
        opacity: 0.5;
        pointer-events: auto;
    }
    .column-toggle-item:hover .column-edit-btn:hover {
        opacity: 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);
}

/* Column reorder via header drag (Airtable-style) */
.spreadsheet-table th.column-header-draggable {
    cursor: grab;
}

.spreadsheet-table th.th-dragging {
    opacity: 0.4;
    cursor: grabbing;
}

/* Drop indicators: a vertical accent bar on the side the column will land */
.spreadsheet-table th.th-drag-before::before,
.spreadsheet-table th.th-drag-after::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--accent);
    z-index: 11;
}

.spreadsheet-table th.th-drag-before::before {
    left: -1px;
}

.spreadsheet-table th.th-drag-after::after {
    right: -1px;
}

/* Column header: icon + name label */
.spreadsheet-table th .column-header-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
    vertical-align: middle;
}
.spreadsheet-table th .column-header-icon {
    flex: 0 0 auto;
}
.spreadsheet-table th .column-header-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 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;
}

/* Long task/lead/customer names: clip instead of stretching the table;
   hover the cell to scroll horizontally through the full text.
   overflow-x stays "auto" (and the scrollbar track stays the same height)
   in both states so the reserved space never changes on hover — only the
   thumb's color toggles, making it read as an overlay instead of shifting
   the text up when it appears. */
.spreadsheet-table td.cell-title-editable {
    max-width: 380px;
    overflow-x: auto;
    overflow-y: hidden;
    text-overflow: ellipsis;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.spreadsheet-table td.cell-title-editable:hover {
    text-overflow: clip;
    scrollbar-color: var(--border-medium) transparent;
}

.spreadsheet-table td.cell-title-editable::-webkit-scrollbar {
    height: 3px;
}

.spreadsheet-table td.cell-title-editable::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 2px;
}

.spreadsheet-table td.cell-title-editable:hover::-webkit-scrollbar-thumb {
    background: var(--border-medium);
}

.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.urgent {
    background: rgba(185, 28, 28, 0.1);
    color: #991B1B;
}

.priority-badge.urgent::before {
    background: #B91C1C;
}

.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;
}

/* Difficulty glyphs — one declaration per level, shared by every surface that
   renders a difficulty (table badge, inline-edit dropdown, task-modal chip) so
   the icon language is identical wherever the value shows up. A dot told you
   nothing the colour didn't; the glyph carries the ramp on its own, which also
   makes the scale readable to anyone who can't separate the four hues. */
.difficulty-badge.easy,
.difficulty-icon.easy,
.unified-difficulty-dot.easy { --difficulty-glyph: '\f52d'; }   /* feather */

.difficulty-badge.medium,
.difficulty-icon.medium,
.unified-difficulty-dot.medium { --difficulty-glyph: '\f0e7'; } /* bolt */

.difficulty-badge.hard,
.difficulty-icon.hard,
.unified-difficulty-dot.hard { --difficulty-glyph: '\f06d'; }   /* fire */

.difficulty-badge.complex,
.difficulty-icon.complex,
.unified-difficulty-dot.complex { --difficulty-glyph: '\f5dc'; } /* brain */

.difficulty-badge::before,
.difficulty-icon::before,
.unified-difficulty-dot::before {
    content: var(--difficulty-glyph, '\f0e7');
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-style: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

/* Difficulty Badge — the XP driver. Deliberately a different hue ramp from
   priority (which is a red/amber urgency scale) so the two columns don't
   read as the same axis. Complex is purple, not "more red than High". */
.difficulty-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px 4px 9px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}

.difficulty-badge::before {
    font-size: 10px;
    /* Fixed box so the four glyphs (which differ in width) all start the label
       at the same x — otherwise a column of badges looks ragged. */
    width: 11px;
    text-align: center;
    flex-shrink: 0;
}

.difficulty-badge.easy {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.22);
    color: #15803D;
}

.difficulty-badge.medium {
    background: rgba(234, 179, 8, 0.1);
    border-color: rgba(234, 179, 8, 0.24);
    color: #A16207;
}

.difficulty-badge.hard {
    background: rgba(249, 115, 22, 0.1);
    border-color: rgba(249, 115, 22, 0.24);
    color: #C2410C;
}

.difficulty-badge.complex {
    background: rgba(175, 82, 222, 0.12);
    border-color: rgba(175, 82, 222, 0.26);
    color: #7E22CE;
}

/* Dark mode — the light-mode text colours are too dim on a dark row, so the
   fill drops back and the glyph/label take the vivid end of each ramp. */
body.dark-mode .difficulty-badge.easy {
    background: rgba(34, 197, 94, 0.16);
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ADE80;
}

body.dark-mode .difficulty-badge.medium {
    background: rgba(234, 179, 8, 0.16);
    border-color: rgba(234, 179, 8, 0.3);
    color: #FACC15;
}

body.dark-mode .difficulty-badge.hard {
    background: rgba(249, 115, 22, 0.16);
    border-color: rgba(249, 115, 22, 0.3);
    color: #FB923C;
}

body.dark-mode .difficulty-badge.complex {
    background: rgba(175, 82, 222, 0.18);
    border-color: rgba(175, 82, 222, 0.34);
    color: #D8A5F5;
}

/* 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);
}

.difficulty-badge-inline {
    cursor: pointer;
    transition: all 0.15s ease;
}

.difficulty-badge-inline:hover {
    opacity: 0.8;
    transform: scale(1.02);
}

.difficulty-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;
}

.priority-dot.urgent {
    background: #B91C1C;
}

/* Difficulty icon — inline-edit dropdown. Same glyph set as the badge, sized
   to sit where the priority dot sits so the two dropdowns stay aligned. */
.difficulty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    font-size: 11px;
    flex-shrink: 0;
}

.difficulty-icon.easy {
    color: #22C55E;
}

.difficulty-icon.medium {
    color: #EAB308;
}

.difficulty-icon.hard {
    color: #F97316;
}

.difficulty-icon.complex {
    color: #AF52DE;
}

/* 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-edit-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

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: 8px 12px;
        flex-wrap: nowrap;
        gap: 6px;
    }
    
    .panel-header-left {
        gap: 4px;
    }
    
    .panel-header-right {
        gap: 4px;
        flex-wrap: nowrap;
    }
    
    .spreadsheet-icon-preview {
        width: 24px;
        height: 24px;
    }
    
    .spreadsheet-icon-preview svg {
        width: 12px;
        height: 12px;
    }
    
    .spreadsheet-title-input {
        font-size: 14px;
        padding: 4px;
        min-width: 0;
        width: 100%;
    }
    
    .back-btn, 
    .panel-header-left .icon-btn,
    .panel-header-right .icon-btn {
        width: 28px;
        height: 28px;
        font-size: 11px;
        padding: 0; /* Reset padding to center icons nicely */
    }
    
    .panel-header-right .panel-action-btn span {
        display: none;
    }
    
    .spreadsheet-table-area {
        padding: 12px;
    }
}

@media (max-width: 400px) {
    .spreadsheet-icon-preview {
        display: none !important;
    }
    .spreadsheet-panel-header {
        gap: 4px;
        padding: 8px;
    }
}



/* 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;
}

/* ===================================
   BUTTON WAVE (ripple)
   ===================================
   A circular wave expands from the exact point pressed. The span is injected
   by the delegated handler in main-core.js and removes itself when the
   animation ends, so no cleanup state is kept anywhere.

   Buttons already have overflow:hidden (see the button[class*="btn"] rule),
   which clips the wave to the button's own shape — including the pill and
   circular variants — so this needs no per-variant styling. */
.btn-wave {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    opacity: 0.45;
    background: currentColor;
    pointer-events: none;
    animation: btnWave 520ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes btnWave {
    to {
        transform: scale(1);
        opacity: 0;
    }
}

/* Buttons need a containing block for the absolutely-positioned wave. */
.btn-primary,
.btn-secondary,
.icon-btn,
.toggle-btn,
.modal-btn {
    position: relative;
}

/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
    .btn-wave {
        animation-duration: 1ms;
    }
}

.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 — Sheets, Docs and Project headers share one size */
#projectAddBtn,
#createDocBtn,
#addTaskBtn {
    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 & project modals */
.ss-edit-panel .chat-icon-picker,
#spreadsheetModal .chat-icon-picker,
#createProjectModal .chat-icon-picker,
#editProjectModal .chat-icon-picker {
    width: 88px;
    grid-template-columns: repeat(2, 1fr);
    place-items: center;
    gap: 8px;
}
.ss-edit-panel .chat-color-picker,
#spreadsheetModal .chat-color-picker,
#createProjectModal .chat-color-picker,
#editProjectModal .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;
    }
    
    /* Collapsed icon rail: mark only, no wordmark or labels */
    .sidebar-header .logo-wordmark,
    .nav-item span:not(.notification-badge),
    .user-info {
        display: none;
    }

    .sidebar-header .logo {
        justify-content: center;
        padding: 6px 0;
    }
    
    .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: var(--radius-nav-item);
        border: none;
    }

    .nav-item.active {
        border: none;
        background: var(--nav-item-active-bg);
        color: var(--text-main);
    }

    .nav-item .icon {
        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(--nav-safe-bottom) + 20px);
    }
    .settings-container {
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 0;
        padding-bottom: 0;
    }
    .settings-page-layout {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Stack the layout; the base rule is already full-bleed */
    .app-container {
        flex-direction: column;
        overflow-x: hidden;
        height: 100vh; /* Fallback for older browsers (must come FIRST) */
        height: 100dvh; /* Dynamic viewport height wins where supported */
        overflow: hidden; /* Prevent body scroll, sections scroll internally */
        /* CRITICAL: no backdrop-filter on mobile. It would make .app-container
           the containing block for the position:fixed .top-bar/.sidebar, so the
           fixed bottom nav would anchor to this box (not the visual viewport)
           AND get clipped by overflow:hidden — the "bottom bar cut off" bug on
           standalone iOS where 100dvh != true screen bottom. The blur is also
           visually pointless here (full-bleed; nothing renders behind it). */
        backdrop-filter: none;
        -webkit-backdrop-filter: 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: var(--nav-safe-bottom);
        flex-direction: row;
        border-right: none;
        border-top: 1px solid var(--border-subtle);
        border-radius: 0;
        padding: 0;
        padding-bottom: var(--nav-bottom-gap); /* home-indicator clearance below icons */
        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 .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: var(--radius-nav-item);
        white-space: nowrap;
        position: relative;
    }
    
    .nav-item .icon {
        width: 22px;
        height: 22px;
        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(--nav-item-active-bg);
        color: var(--text-main);
        border: none;
    }

    /* Position notification badges for mobile */
    .nav-item .notification-badge {
        position: absolute;
        top: 4px;
        right: 4px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        font-size: 9px;
        line-height: 16px;
    }
    
    /* Hide sidebar footer on mobile */
    .sidebar-footer {
        display: none;
    }
    
    /* Main content - full width with flex layout for proper scrolling */
    .main-content {
        padding: 0;
        border-radius: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0; /* Critical: allows flex children to shrink and scroll */
        overflow: hidden; /* Container doesn't scroll, children do */
        /* 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(--nav-safe-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 {
        width: 42px;
        height: 42px;
    }
    
    /* 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
       =================================== */
    
    /* Sheets + Docs headers - stack controls. Both are listed: this rule used
       to hit .spreadsheet-header only, so switching to Docs shifted the
       heading 16px left and changed its width. */
    .spreadsheet-header,
    .docs-header {
        flex-direction: column;
        gap: 12px;
        padding: 12px 16px;
        align-items: stretch;
    }

    /* Project view header - keep title + action buttons on one row */
    .spreadsheet-header.project-view-header {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
    }
    .project-view-header .spreadsheet-header-left {
        min-width: 0; /* allow the title block to shrink instead of pushing buttons off-screen */
    }
    .project-view-header .spreadsheet-header-left h3 {
        font-size: 20px;
    }
    .project-view-header .spreadsheet-subtitle {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .project-view-header .spreadsheet-header-right {
        flex-shrink: 0; /* never let the +/… buttons collapse */
    }

    .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,
    .top-bar-actions .topbar-avatar {
        border: none !important;
    }
    
    .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;
}

/* ===================================
   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;
    min-width: 0;
    padding: 12px 16px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 1px;
}

.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 auto;
    padding: 0 16px;
}

.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;
}

/* 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 {
    position: relative;
}

.badge-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Hover tooltip: how to earn the badge */
.badge-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(28, 28, 30, 0.95);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    padding: 7px 11px;
    border-radius: 8px;
    white-space: normal;
    width: max-content;
    max-width: 220px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 50;
}

.badge-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(28, 28, 30, 0.95);
}

.badge-item:hover .badge-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.badge-tooltip i {
    font-size: 10px;
    opacity: 0.7;
    margin-right: 2px;
}

/* Dark mode: invert the tooltip so it stands out from dark cards */
body.dark-mode .badge-tooltip {
    background: #F5F5F7;
    color: #111111;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

body.dark-mode .badge-tooltip::after {
    border-top-color: #F5F5F7;
}

.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;
}

/* Locked badges: same elevated card as earned badges (inherits --bg-surface
   from .badge-item) — just muted gray icon/text instead of the accent color.
   NOT full-opacity dimming: that made the whole card (incl. hover tooltip)
   see-through and unreadable over other content. NOT --bg-body either: in
   dark mode that's pure black, sinking the card into the page instead of
   reading as an elevated tile like its earned sibling. */
.badge-category .badge-item.locked .badge-icon {
    color: var(--text-light);
}

.badge-category .badge-item.locked .badge-name,
.badge-category .badge-item.locked .badge-xp {
    color: var(--text-light);
}

.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 {
    /* White on the orange badge — #FF6B35 text on #FF6B35 bg was invisible */
    color: #FFFFFF;
}

/* ===================================
   STREAK CELEBRATION — CORNER TOAST
   First login of the day — animated fire icon, bottom-right corner.
   Non-blocking: no backdrop, only the icon itself is interactive.
   =================================== */
.streak-corner-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 999998; /* just under toasts so streak-badge toasts stay visible */
    cursor: pointer;
    animation: streakCornerIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.25));
}

.streak-corner-toast.closing {
    animation: streakCornerOut 0.4s ease forwards;
}

@keyframes streakCornerIn {
    from { transform: translateY(40px) scale(0.3); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes streakCornerOut {
    from { transform: translateY(0) scale(1); opacity: 1; }
    to { transform: translateY(24px) scale(0.5); opacity: 0; }
}

.streak-celebration-fire {
    position: relative;
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.streak-celebration-fire i {
    font-size: 56px;
    color: #FF6B35;
    position: relative;
    z-index: 1;
    transform-origin: 50% 85%;
    animation:
        streakFirePop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both,
        streakFlicker 1.8s ease-in-out 0.8s infinite;
}

@keyframes streakFirePop {
    0% { transform: scale(0); }
    70% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

@keyframes streakFlicker {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.04, 1.07) rotate(-1.5deg); }
    50% { transform: scale(0.98, 0.96) rotate(1deg); }
    75% { transform: scale(1.03, 1.05) rotate(-0.5deg); }
}

.streak-celebration-fire.flare i {
    animation:
        streakFlare 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
        streakFlicker 1.8s ease-in-out 0.5s infinite;
}

@keyframes streakFlare {
    0% { transform: scale(1); }
    40% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

.streak-ember {
    position: absolute;
    bottom: 18px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #FF9500;
    opacity: 0;
    pointer-events: none;
}

.streak-ember.ember-1 {
    left: 22px;
    animation: streakEmberRise 2s ease-out 0.9s infinite;
}

.streak-ember.ember-2 {
    left: 42px;
    width: 4px;
    height: 4px;
    background: #FF6B35;
    animation: streakEmberRise 2.4s ease-out 1.5s infinite;
}

.streak-ember.ember-3 {
    left: 58px;
    width: 5px;
    height: 5px;
    animation: streakEmberRise 2.2s ease-out 1.1s infinite;
}

@keyframes streakEmberRise {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    15% { opacity: 0.9; }
    100% { transform: translateY(-56px) scale(0.3); opacity: 0; }
}

/* Count bubble on the fire — same look as the achievements streak icon */
.streak-corner-count {
    position: absolute;
    bottom: 4px;
    right: 4px;
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    box-sizing: border-box;
    border-radius: 999px;
    background: #FF6B35;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 2;
}

.streak-corner-count.bump {
    animation: streakCountBump 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes streakCountBump {
    0% { transform: scale(1); }
    40% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

@media (max-width: 768px) {
    .streak-corner-toast {
        right: 14px;
        bottom: 92px; /* clear the mobile bottom nav */
    }

    .streak-celebration-fire {
        width: 72px;
        height: 72px;
    }

    .streak-celebration-fire i {
        font-size: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .streak-celebration-fire i,
    .streak-celebration-fire.flare i,
    .streak-ember {
        animation: none;
    }

    .streak-ember {
        display: none;
    }
}

/* 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);
}

/* Autosave status — replaces the Save button on autosaving forms */
.settings-autosave-status {
    font-size: 13px;
    color: var(--text-tertiary, #888);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 20px;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.settings-autosave-status.is-visible {
    opacity: 1;
}

.settings-autosave-status.is-error {
    color: var(--danger, #e5484d);
}

/* Theme Selector Minimal */
.theme-selector-minimal {
    display: flex;
    flex-wrap: wrap;
    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;
}

/* 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;
}

/* 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;
        padding: 12px 16px;
        font-size: 15px;
    }
    
    .settings-profile-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .settings-name-fields {
        width: 100%;
    }
    
    /* Better UX for mobile inputs to prevent iOS zoom and increase touch target */
    .settings-input-minimal {
        font-size: 16px;
        padding: 14px 16px;
    }
    
    .settings-row-minimal {
        padding: 20px 0;
    }
    
    .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-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 16px 12px;
    }
    
    .settings-footer .footer-brand {
        flex: 0 1 auto;
        min-width: 0;
    }
    
    .settings-footer .footer-brand span {
        font-size: 12px;
        white-space: normal;
    }
    
    .settings-footer .footer-links {
        flex-shrink: 0;
        order: 2;
    }

    .settings-footer .footer-legal {
        flex: 1 1 100%;
        justify-content: center;
        order: 3;
    }
    
    .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);
}

/* ===================================
   STATUS REPORT (weekly / monthly)
   Reuses the metrics tab's .metrics-stat-card styling for the summary row.
   =================================== */
.status-report-body { margin-top: 4px; }

.sr-subhead {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

/* Summary cards inherit .metrics-stat-card; just tighten spacing below them */
.sr-stats { margin-bottom: 20px; }

/* What happened / still-to-do — two plain lists */
.sr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sr-col { min-width: 0; }
.sr-col-title {
    font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--text-muted); margin: 0 0 8px;
}
.sr-list { display: flex; flex-direction: column; gap: 2px; }
.sr-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 8px; cursor: pointer;
    transition: background 0.12s ease;
}
.sr-row:hover { background: var(--bg-surface-soft, rgba(0,0,0,0.04)); }
.sr-row-dot {
    width: 22px; height: 22px; flex: none;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 10px;
    background: var(--success-soft, rgba(52,199,89,0.14)); color: var(--success, #34c759);
}
.sr-row-overdue .sr-row-dot { background: var(--danger-soft, rgba(255,59,48,0.14)); color: var(--danger, #ff3b30); }
.sr-row-upcoming .sr-row-dot { background: var(--accent-soft, rgba(0,112,243,0.12)); color: var(--accent, #0070f3); }
.sr-row-title { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-row-date { flex: none; font-size: 12px; color: var(--text-muted); min-width: 48px; text-align: right; }
.sr-row-overdue .sr-row-date { color: var(--danger, #ff3b30); font-weight: 600; }
.sr-empty { padding: 12px 10px; font-size: 13px; color: var(--text-muted); }
.sr-more { padding: 8px 10px; font-size: 12px; font-weight: 600; color: var(--accent, #0070f3); }
.sr-more-toggle { cursor: pointer; border-radius: 8px; user-select: none; transition: background 0.1s ease; }
.sr-more-toggle:hover { background: var(--bg-surface-soft, rgba(0,0,0,0.04)); }
.sr-more-toggle:focus-visible { outline: 2px solid var(--accent, #0070f3); outline-offset: 1px; }
/* Rows past the cap stay hidden until the "+N more" toggle expands the list */
.sr-row-hidden { display: none; }
.sr-list.sr-expanded .sr-row-hidden { display: flex; }

/* Doc created/edited badge — small pill between title and date */
.sr-doc-badge {
    flex: none; font-size: 10px; font-weight: 600; line-height: 1;
    padding: 3px 7px; border-radius: 99px; text-transform: uppercase; letter-spacing: 0.02em;
}
.sr-doc-badge-created { background: var(--success-soft, rgba(52,199,89,0.14)); color: var(--success, #34c759); }
.sr-doc-badge-updated { background: var(--accent-soft, rgba(0,112,243,0.12)); color: var(--accent, #0070f3); }

/* Doc rows reuse .sr-row; give the icon dot a neutral accent tint */
.sr-row-doc .sr-row-dot { background: var(--accent-soft, rgba(0,112,243,0.12)); color: var(--accent, #0070f3); }

/* Header controls: member dropdown + period toggle sit together on the right */
.sr-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Custom member dropdown — mirrors the metrics time-filter component */
.sr-member-dropdown { position: relative; display: inline-block; }
.sr-member-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: 150px; max-width: 220px;
    transition: all 0.2s ease;
}
.sr-member-trigger:hover { border-color: var(--accent, #0070f3); background-color: var(--bg-body); }
.sr-member-dropdown.open .sr-member-trigger { border-color: var(--accent, #0070f3); box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.1); }
.sr-member-trigger-icon { font-size: 12px; color: var(--text-muted); flex: none; }
.sr-member-value { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-member-arrow { font-size: 10px; color: var(--text-muted); transition: transform 0.2s ease; flex: none; }
.sr-member-dropdown.open .sr-member-arrow { transform: rotate(180deg); }

.sr-member-menu {
    position: absolute; top: calc(100% + 6px); right: 0;
    min-width: 200px; max-height: 320px; overflow-y: auto;
    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); padding: 4px;
}
.sr-member-dropdown.open .sr-member-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.sr-member-option {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 8px; font-size: 0.85rem;
    color: var(--text-main); cursor: pointer; transition: background-color 0.15s ease;
}
.sr-member-option:hover { background: var(--bg-hover, rgba(0,0,0,0.05)); }
.sr-member-option i { font-size: 10px; color: var(--accent, #0070f3); opacity: 0; flex: none; transition: opacity 0.15s ease; }
.sr-member-option.selected { font-weight: 600; }
.sr-member-option.selected i { opacity: 1; }
.sr-member-option span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Contributions leaderboard */
.sr-board { margin-bottom: 20px; }
.sr-board-list { display: flex; flex-direction: column; gap: 4px; }
.sr-board-row {
    display: grid; grid-template-columns: minmax(80px, 140px) 1fr auto; align-items: center; gap: 12px;
    padding: 7px 10px; border-radius: 8px; cursor: pointer; transition: background 0.12s ease;
}
.sr-board-row:hover { background: var(--bg-surface-soft, rgba(0,0,0,0.04)); }
.sr-board-row:focus-visible { outline: 2px solid var(--accent, #0070f3); outline-offset: 1px; }
.sr-board-name { font-size: 13px; font-weight: 600; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-board-bar { height: 8px; border-radius: 999px; background: var(--bg-surface-soft, rgba(0,0,0,0.06)); overflow: hidden; }
.sr-board-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent, #0070f3); }
.sr-board-count { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

/* Documents section sits below the two task columns */
.sr-docs-section { margin-top: 20px; }

@media (max-width: 720px) {
    .sr-cols { grid-template-columns: 1fr; gap: 16px; }
    .sr-controls { gap: 8px; }
    .sr-member-trigger { min-width: 120px; max-width: 160px; padding: 7px 12px; }
    .sr-member-menu { min-width: 170px; }
    .sr-board-row { grid-template-columns: minmax(70px, 100px) 1fr auto; gap: 8px; }
    .sr-board-count { font-size: 11px; }
}

.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-collapse-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;
    font-size: 12px;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.link-group-collapse-btn:hover {
    background: var(--bg-body);
    color: var(--text-main);
}

.link-group-collapse-btn i {
    transition: transform 0.2s ease;
}

.link-group.collapsed .link-group-collapse-btn i {
    transform: rotate(-90deg);
}

.link-group-title {
    flex: 1;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.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 .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.collapsed .link-group-content {
    display: none;
}

.link-group.collapsed .link-group-header {
    border-bottom: none;
}

.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;
}

/* ===== Upgroups (collection cards above the groups) ===== */
.link-lobby-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.upgroup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

/* Floating drop bar shown while a group is being dragged. Fixed to the
   viewport so a group at the bottom of a long list can always reach a
   collection without fighting drag auto-scroll or a scroll container. */
.upgroup-drop-bar {
    position: fixed;
    left: 50%;
    bottom: calc(16px + var(--nav-safe-bottom, 0px));
    transform: translateX(-50%);
    z-index: 4000;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: min(92vw, 900px);
    padding: 10px 12px;
    overflow-x: auto;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}

.upgroup-drop-bar-label {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-light);
    padding-left: 4px;
}

.upgroup-drop-chip {
    --upgroup-color: #0A84FF;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px dashed var(--border-subtle);
    background: var(--bg-body);
    color: var(--text-main);
    font-size: 0.83rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: auto;
}

.upgroup-drop-chip i {
    color: var(--upgroup-color);
}

.upgroup-drop-chip.upgroup-drop-active {
    border-style: solid;
    border-color: var(--upgroup-color);
    background: color-mix(in srgb, var(--upgroup-color) 16%, transparent);
    transform: scale(1.04);
}

/* Children would otherwise swallow the dragover/drop events */
.upgroup-drop-chip * {
    pointer-events: none;
}

.upgroup-card {
    --upgroup-color: #0A84FF;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    text-align: left;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    overflow: hidden;
}

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

.upgroup-card.upgroup-drop-active {
    border-color: var(--upgroup-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--upgroup-color) 30%, transparent);
    transform: translateY(-2px);
}

.upgroup-card-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 15px;
    color: var(--upgroup-color);
    background: color-mix(in srgb, var(--upgroup-color) 14%, transparent);
}

.upgroup-card-title {
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--text-main);
}

.upgroup-card-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.upgroup-card-desc:empty {
    display: none;
}

.upgroup-card-count {
    margin-top: auto;
    padding-top: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.upgroup-card-add {
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    background: transparent;
    border-style: dashed;
    min-height: 118px;
}

.upgroup-card-add:hover {
    color: var(--accent);
    border-color: var(--accent);
    transform: none;
    box-shadow: none;
}

/* Bar shown while a collection is open */
.upgroup-bar {
    --upgroup-color: #0A84FF;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
    background: var(--bg-surface-soft);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

.upgroup-back-btn {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: var(--bg-body);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.upgroup-back-btn:hover {
    color: var(--text-main);
    background: var(--border-subtle);
}

.upgroup-back-btn.upgroup-drop-active {
    background: var(--accent-soft);
    color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent);
}

.upgroup-bar-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: var(--upgroup-color);
    background: color-mix(in srgb, var(--upgroup-color) 14%, transparent);
}

.upgroup-bar-text {
    flex: 1;
    min-width: 0;
}

.upgroup-bar-title {
    font-size: 1rem;
    font-weight: 650;
    color: var(--text-main);
}

.upgroup-bar-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.upgroup-bar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.upgroup-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-light);
    margin: 4px 0 10px;
}

.upgroup-empty-hint {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--text-muted);
    padding: 16px;
    text-align: center;
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-md);
}

/* Icon + colour pickers in the collection modal */
.upgroup-icon-picker {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 6px;
}

.upgroup-icon-option {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: var(--bg-surface);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
    transition: all 0.12s ease;
}

.upgroup-icon-option:hover {
    color: var(--text-main);
    border-color: var(--text-muted);
}

.upgroup-icon-option.selected {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}

.upgroup-color-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.upgroup-color-option {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.upgroup-color-option:hover {
    transform: scale(1.1);
}

.upgroup-color-option.selected {
    box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px currentColor;
    border-color: #fff;
}

@media (max-width: 640px) {
    .upgroup-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .upgroup-icon-picker {
        grid-template-columns: repeat(7, 1fr);
    }
}

/* Subgroup (manual folder inside a group) */
.link-subgroup {
    background: var(--bg-body);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 8px;
    border: 1px solid transparent;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.link-subgroup:last-of-type {
    margin-bottom: 8px;
}

.link-subgroup.drag-over {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}

.link-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;
    user-select: none;
}

.link-subgroup-header:hover {
    background: rgba(0, 0, 0, 0.04);
}

.link-subgroup-icon {
    color: var(--text-muted);
    font-size: 13px;
}

.link-subgroup-title {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
}

.link-subgroup-count {
    font-size: 0.75rem;
    color: var(--text-light);
    background: var(--bg-surface);
    padding: 2px 8px;
    border-radius: 99px;
}

.link-subgroup-toggle {
    color: var(--text-muted);
    font-size: 12px;
    transition: transform 0.2s ease;
}

.link-subgroup.collapsed .link-subgroup-toggle {
    transform: rotate(-90deg);
}

.link-subgroup-content {
    padding: 8px;
}

.link-subgroup.collapsed .link-subgroup-content {
    display: none;
}

.link-subgroup-empty {
    padding: 12px 8px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Loose links area stays a drop target even when empty */
.links-list.links-list-empty {
    min-height: 12px;
}

/* 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 .upgroup-card,
body.dark-mode .upgroup-bar {
    background: rgba(255, 255, 255, 0.04);
}

body.dark-mode .upgroup-card-add {
    background: transparent;
}

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

body.dark-mode .upgroup-icon-option {
    background: rgba(255, 255, 255, 0.04);
}

body.dark-mode .link-subgroup {
    background: rgba(255, 255, 255, 0.03);
}

body.dark-mode .link-subgroup-header {
    background: rgba(255, 255, 255, 0.02);
}

body.dark-mode .link-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(--nav-safe-bottom) + 20px);
    }
    .settings-container {
        padding-left: 10px;
        padding-right: 10px;
    }
    .settings-page-layout {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    .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
   =================================== */
/* Must stay geometrically identical to .spreadsheet-header — the two headers
   swap in the same slot, so any difference shows up as the content jumping. */
.docs-header {
    display: flex;
    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;
}

/* Placeholder cards standing in for the grid while the first docs snapshot is
   in flight. They need their own height because, unlike a real card, they have
   no content to give them one.

   The ramp above is --bg-surface → --bg-surface-soft, which in light mode is
   white → 82% white: invisible on the light page. That was survivable for the
   lazy-hydration skeleton, whose cards sit off-screen, but these are the first
   thing on screen. Restate the ramp as translucent overlays so the cards read
   as placeholders in both themes. */
.doc-card.doc-card-placeholder {
    min-height: 140px;
    background-image: linear-gradient(90deg,
        rgba(0, 0, 0, 0.035) 25%,
        rgba(0, 0, 0, 0.08) 50%,
        rgba(0, 0, 0, 0.035) 75%);
    background-size: 200% 100%;
}

body.dark-mode .doc-card.doc-card-placeholder {
    background-image: linear-gradient(90deg,
        rgba(255, 255, 255, 0.04) 25%,
        rgba(255, 255, 255, 0.09) 50%,
        rgba(255, 255, 255, 0.04) 75%);
    background-size: 200% 100%;
}

/* Skeleton for the document body, shown inside #docEditor while contentHtml is
   fetched. Replaced wholesale by the real HTML in the same innerHTML write that
   paints the text, so it cannot outlive the content by a frame. */
.doc-editor-skeleton {
    padding: 4px 0;
    cursor: default;
    user-select: none;
}

.doc-editor-skeleton .skeleton-text {
    margin-bottom: 12px;
}

.doc-editor-skeleton .doc-editor-skeleton-gap {
    height: 12px;
}

/* The shared .skeleton gradient is built on --bg-secondary/--bg-tertiary, which
   this stylesheet never defines, so it silently falls back to its hardcoded
   #f0f0f0/#2a2a2a. Against the doc editor surface those bars are almost
   invisible in dark mode. Restate the ramp as translucent overlays, which key
   off whatever the editor is sitting on and stay legible in both themes. */
.doc-editor-skeleton .skeleton {
    background-image: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.06) 25%,
        rgba(0, 0, 0, 0.12) 50%,
        rgba(0, 0, 0, 0.06) 75%
    );
    background-size: 200% 100%;
}

body.dark-mode .doc-editor-skeleton .skeleton {
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.07) 25%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.07) 75%
    );
    background-size: 200% 100%;
}

@media (prefers-reduced-motion: reduce) {
    .doc-card.doc-card-skeleton,
    .doc-editor-skeleton .skeleton {
        animation: none;
    }
}

.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;
    /* Paragraph breaks in the preview text render as real line breaks
       (contentText carries \n between blocks), still clamped to 2 lines. */
    white-space: pre-line;
}

.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 60vh 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: var(--nav-safe-bottom); /* Above bottom nav (incl. home-indicator safe area) */
        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 {
        /* Allow smaller buttons */
        min-width: auto;
        min-height: auto;
    }
    
    /* 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 left on mobile */
    .column-toggle-sidebar {
        position: fixed;
        top: 60px; /* Below top header */
        bottom: var(--nav-safe-bottom); /* Above bottom nav (incl. home-indicator safe area) */
        left: 0;
        right: auto;
        width: 280px;
        max-width: 80vw;
        max-height: calc(100vh - 130px);
        border-radius: 0 16px 16px 0;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
        z-index: 10000; /* Above spreadsheet panel header */
        display: block !important; /* Override desktop hide */
        background: var(--bg-surface);
        box-shadow: 2px 0 10px rgba(0,0,0,0.2);
        margin-left: 0 !important;
    }
    
    body.dark-mode .column-toggle-sidebar {
        box-shadow: 2px 0 10px rgba(0,0,0,0.6);
    }
    
    .column-toggle-sidebar:not(.collapsed) {
        transform: translateX(0);
    }
    
    .column-toggle-sidebar.collapsed {
        margin-left: 0;
        width: 280px; /* override desktop width 0 */
        opacity: 1; /* override desktop opacity 0 */
        transform: translateX(-100%);
    }
    
    /* 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);
    }
}

/* ===================================
   VERY SMALL MOBILE (400px and below)
   =================================== */
@media (max-width: 400px) {
    /* Even more compact navigation */
    .nav-item {
        padding: 8px 4px;
        max-width: 50px;
    }
    
    .nav-item .icon {
        width: 20px;
        height: 20px;
    }

    /* 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;
    min-height: 480px;
}

/* ---------- 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;
}

/* List field row: sheet dropdown + jump-to-sheet button side by side */
.task-list-field-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.task-list-field-row .task-option-item {
    flex: 1;
    min-width: 0;
}
.task-goto-sheet-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 12px;
    color: var(--text-light);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.task-goto-sheet-btn:hover {
    background: var(--bg-body);
    border-color: var(--border-subtle);
    color: var(--accent);
}

/* Field labels are uniform. Assignee/Date used to be accent-blue while
   Priority/Status/Repeat/List were grey — a split that carried no meaning and
   pulled the eye to two arbitrary fields. The --field-accent/-soft variables
   that sat here were declared but never read by any rule, so they went too. */

/* 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);
}

.unified-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px 12px !important;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
    background: var(--bg-surface);
    box-sizing: border-box !important;
    width: 100%;
}

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: 24px !important;
    box-sizing: border-box !important;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100vh - 180px);
    width: 100%;
}

.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: rgba(0, 0, 0, 0.04);
    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;
}

/* Compact Dropdown Variant (matching collab-role-btn) */
.unified-dropdown.compact .unified-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--border-subtle);
    box-shadow: none;
    min-height: auto;
    transition: all 0.15s;
}

.unified-dropdown.compact .unified-dropdown-trigger:hover {
    background: var(--bg-surface-hover, #f5f5f5);
    border-color: var(--border-medium);
}

body.dark-mode .unified-dropdown.compact .unified-dropdown-trigger:hover {
    background: var(--bg-surface-hover, #2c2c2e);
}

.unified-dropdown.compact .unified-dropdown-value {
    font-size: 12px;
    color: var(--text-primary);
}

body.dark-mode .unified-dropdown.compact .unified-dropdown-value {
    color: #ffffff;
}

.unified-dropdown.compact .unified-dropdown-arrow {
    font-size: 10px;
    opacity: 0.6;
}

/* Collab-menu Style (padded dropdown menu with rounded corner options) */
.unified-dropdown.collab-menu .unified-dropdown-menu {
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 4px;
    background: var(--bg-surface, #fff);
    top: calc(100% + 4px);
    right: 0;
    left: auto;
    width: 140px;
}

body.dark-mode .unified-dropdown.collab-menu .unified-dropdown-menu {
    background: var(--bg-surface, #2c2c2e);
    border-color: var(--border-subtle);
}

.unified-dropdown.collab-menu .unified-dropdown-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    color: var(--text-primary);
    transition: background 0.1s;
}

/* Override standard border-radius behavior for collab-menu options */
.unified-dropdown.collab-menu .unified-dropdown-option:first-child,
.unified-dropdown.collab-menu .unified-dropdown-option:last-child {
    border-radius: 6px;
}

.unified-dropdown.collab-menu .unified-dropdown-option:hover {
    background: var(--bg-surface-hover, #f5f5f5);
    color: var(--text-primary);
}

body.dark-mode .unified-dropdown.collab-menu .unified-dropdown-option:hover {
    background: var(--bg-surface-hover, #2c2c2e);
    color: #ffffff;
}

.unified-dropdown.collab-menu .unified-dropdown-option.selected {
    background: rgba(0, 122, 255, 0.08);
}

body.dark-mode .unified-dropdown.collab-menu .unified-dropdown-option.selected {
    background: rgba(0, 122, 255, 0.2);
}

.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);
    /* Scoped to the fade/slide-in effect only. `transition: all` here used to
       also transition top/left/width/position — the exact properties the
       viewport-clamping logic in main-core.js sets right when the menu opens,
       which made it read a mid-transition (still-old-position) rect and lock
       the menu into a wrong, often off-screen, position. */
    transition: opacity 0.15s ease, visibility 0.15s ease, transform 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;
}

/* Difficulty carries a glyph rather than a dot (see the difficulty glyph block
   above). Kept at the dot's footprint so chip and dropdown rows don't reflow. */
.unified-difficulty-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    font-size: 11px;
    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; }
.unified-priority-dot.urgent { background: #b91c1c; }

.unified-difficulty-dot.easy { color: #22c55e; }
.unified-difficulty-dot.medium { color: #eab308; }
.unified-difficulty-dot.hard { color: #f97316; }
.unified-difficulty-dot.complex { color: #af52de; }

/* 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 .unified-input {
    width: 36px !important;
    min-width: 0 !important;
    padding: 0 !important;
    text-align: center;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-weight: 600;
}

.time-picker-display .unified-select {
    width: 48px !important;
    min-width: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-weight: 600;
}

.time-picker-display .time-colon {
    font-weight: 600;
    color: rgba(0, 0, 0, 0.4);
    margin: 0 4px;
}
body.dark-mode .time-picker-display .time-colon {
    color: rgba(255, 255, 255, 0.4);
}

.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-main);
    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;
}

/* --bg-elevated is not a token this stylesheet defines, so this rule used to
   resolve to `background: unset` — i.e. a fully transparent modal in dark mode.
   --bg-surface is already the dark surface (#1C1C1E), and it needs a visible
   edge because the panel would otherwise merge into the near-black backdrop. */
body.dark-mode .visibility-modal-content {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-soft);
}

/* ===================================
   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;
}

/* Import affordance inside the New Document title input: paperclip icon
   button on the right, custom tooltip on hover ([data-tooltip]) */
.create-doc-input-wrap {
    position: relative;
    /* Reserve the paperclip's room on the WRAPPER, not the input.
       "Universal Modal Input Overrides" further down the sheet sets
       `padding` and `width` with !important, and its selector carries four
       ID-level points (one per `:not(#…)`), so no sane selector can outrank
       it — verified in-browser that even `…input[type="text"]#newDocTitle`
       with !important still loses. The input is `width: 100% !important` of
       this box, so a right gutter here shrinks the field instead, and the
       button sits in the gutter clear of the text and caret. */
    padding-right: 40px;
}

.create-doc-import-btn {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

/* The global `button[class*="btn"]` rule (0,1,1) sets overflow:hidden for
   label ellipsis, which clips the [data-tooltip] bubble rendered outside
   this tiny box — outrank it (0,2,0) to let the tooltip escape */
.create-doc-input-wrap .create-doc-import-btn {
    overflow: visible;
    text-overflow: clip;
}

.create-doc-import-btn:hover {
    background: var(--bg-body, rgba(0, 0, 0, 0.05));
    color: var(--accent, #007aff);
}

.create-doc-import-btn:active {
    transform: translateY(-50%) scale(0.92);
}

body.dark-mode .create-doc-import-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

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 {
        width: 100% !important;
        max-width: 100%;
        max-height: 80vh !important;
        border-radius: 24px 24px 0 0 !important;
        margin-top: auto;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        position: relative;
        transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
        will-change: transform;
        overscroll-behavior-y: none;
    }
    
    .unified-modal-container::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 5px;
        background: var(--border-medium, rgba(0,0,0,0.2));
        border-radius: 3px;
        z-index: 10;
        pointer-events: none;
    }
    
    body.dark-mode .unified-modal-container::before {
        background: rgba(255,255,255,0.3);
    }
    
    .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: 24px 24px 16px !important;
        box-sizing: border-box !important;
    }
    
    .unified-modal-body {
        padding: 24px !important;
        box-sizing: border-box !important;
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }
    
    .unified-modal-footer {
        padding: 16px 24px 24px !important;
        box-sizing: border-box !important;
    }
    
    .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;
}

/* A paused subscription stays in the list — it is the only place to resume it
   from — but steps back so a glance separates what is still billing. */
.transaction-row-subscription.paused .transaction-amount {
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.transaction-row-subscription.paused .transaction-from-to {
    color: var(--text-muted);
}

.transaction-col-from-to .paused-badge,
.transaction-col-from-to .private-badge {
    margin-left: 8px;
    flex-shrink: 0;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.transaction-col-from-to .paused-badge {
    background: var(--warning-soft);
    color: var(--warning);
}

/* Same purple the subscriptions UI already used for Private. */
.transaction-col-from-to .private-badge {
    background: rgba(139, 92, 246, 0.12);
    color: #8b5cf6;
}

/* A private subscription is not a company cost, so its amount is not shown in
   the red expense treatment the surrounding rows use. */
.transaction-row-subscription.private-sub .transaction-amount {
    color: var(--text-muted);
}

/* 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;
}

/* Pause / Resume on a subscription row. Same shape as .btn-edit beside it, in
   the --warning token: the subscription is being suspended, not deleted, so it
   sits between the neutral accent of Manage and the danger of Delete. */
.transaction-row-actions .btn-pause {
    background: var(--warning-soft);
    color: var(--warning);
    border: 1px solid var(--warning);
}

.transaction-row-actions .btn-pause:hover {
    background: var(--warning);
    color: white;
}

.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;
}

/* Paused: same badge shape as .private-badge above, in the app's --warning
   token. Warning rather than danger — the subscription still exists and can be
   resumed; it has not been cancelled. */
.subscription-name .paused-badge {
    font-size: 10px;
    background: var(--warning-soft);
    color: var(--warning);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
}

/* A paused row stays legible but visibly steps back, so a glance down the list
   separates what is billing from what is not. The amount is struck through
   because it is the number that has stopped applying. */
.subscription-row.paused {
    background: var(--bg-surface-soft, var(--bg-surface));
    border-style: dashed;
}

.subscription-row.paused .subscription-logo,
.subscription-row.paused .subscription-frequency {
    opacity: 0.55;
}

.subscription-row.paused .subscription-amount {
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.subscription-action-btn.pause:hover {
    background: var(--warning-soft);
    color: var(--warning);
}

.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 14px;
        font-size: 13px;
    }

    /* On mobile the footer buttons become flex:1; collapse the flex spacer so
       the space is shared only between the buttons (not split three ways with
       the spacer), giving the "Create Task" checkmark/label room to breathe. */
    .task-footer-spacer {
        flex: 0 0 0 !important;
        width: 0;
    }

    /* 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(--nav-safe-bottom) + 16px);
    }

    /* Modal content adjustment for mobile */
    .modal-content,
    .task-modal-content {
        max-height: calc(100vh - var(--bottom-nav-height) - env(safe-area-inset-bottom) - 32px);
        margin-bottom: auto;
    }
    
    .unified-modal-container {
        width: 100% !important;
        max-height: 80vh !important;
        border-radius: 24px 24px 0 0 !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        animation: bottomSheetSlideUp 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }
    
    .unified-modal-container.closing {
        animation: bottomSheetSlideDown 0.25s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }
    
    @keyframes bottomSheetSlideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
    
    @keyframes bottomSheetSlideDown {
        from { transform: translateY(0); }
        to { transform: translateY(100%); }
    }

    /* 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 !important;
        overscroll-behavior-y: none;
    }
}

/* 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;
}
.spreadsheet-card.project-tile-card:hover,
.doc-card.project-tile-card:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: var(--border-subtle) !important;
}

.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: none !important;
    box-shadow: none !important;
    border-color: var(--border-subtle) !important;
}

/* 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;
    /* Swipe/drag to change page (initProjectTileSwipe). pan-y keeps vertical
       scrolling with the page while horizontal gestures reach our handler. */
    touch-action: pan-y;
    cursor: grab;
}

.project-tile-list:active {
    cursor: grabbing;
}

/* 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;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-muted, #666666);
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.project-edit-btn i {
    font-size: 14px !important;
    color: inherit !important;
    transition: color 0.15s ease;
}

.project-edit-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-main, #333333);
}

.project-edit-btn:hover i {
    color: var(--text-main, #333333) !important;
}

body.dark-mode .project-edit-btn {
    color: var(--text-muted, #999999);
}

body.dark-mode .project-edit-btn i {
    color: inherit !important;
}

body.dark-mode .project-edit-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-main, #ffffff);
}

body.dark-mode .project-edit-btn:hover i {
    color: inherit !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, var(--accent));
    color: white;
    margin-right: 10px;
}
.project-title-icon i {
    font-size: 14px;
}
.project-title-icon svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
}

.project-title-text {
    vertical-align: middle;
}

#projectViewSubtitle {
    margin-left: 40px; /* Aligns with project name, skipping back button (32px + 8px gap) */
}

.project-back-btn.icon-only {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.project-back-btn.icon-only:hover {
    background: var(--bg-hover, rgba(0, 0, 0, 0.05));
    color: var(--text-main);
}

#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: a compact trigger that opens a grid popover (replaces the old
   horizontally-scrolling pill whose scrollbar overlapped the icons) */
.icon-picker-inline {
    position: relative;
    display: inline-flex;
    box-sizing: border-box;
}

.icon-picker-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--bg-surface);
    border: 2px solid var(--border-medium);
    border-radius: 50px;
    height: 48px;
    box-sizing: border-box;
    cursor: pointer;
    color: var(--text-main);
    transition: border-color 0.15s ease;
}
.icon-picker-trigger:hover { border-color: var(--accent, #007aff); }
.icon-picker-chevron {
    font-size: 11px;
    color: var(--text-muted, #6E6E73);
    transition: transform 0.18s ease;
}
.icon-picker-trigger[aria-expanded="true"] .icon-picker-chevron { transform: rotate(180deg); }

.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 — grid popover opened from the trigger. Vertical scroll only, so the
   scrollbar lives in the right gutter and never overlaps the icons (no click collision). */
.icon-picker-options {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 1000;
    width: 320px;
    grid-template-columns: repeat(8, 1fr);
    justify-items: center;
    gap: 4px;
    padding: 10px;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-subtle, #e5e5ea);
    border-radius: 14px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
    max-height: 248px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
}
.icon-picker-options.open { display: grid; }
.icon-picker-options::-webkit-scrollbar { width: 8px; }
.icon-picker-options::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 8px; }

.icon-picker-option {
    border: none;
    background: transparent;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.icon-picker-option svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.icon-picker-option i {
    font-size: 18px;
}

.icon-picker-option:hover {
    color: var(--accent, #007aff);
    background: var(--bg-surface-soft, rgba(0, 0, 0, 0.06));
}

.icon-picker-option.selected,
.icon-picker-option.active {
    color: #fff;
    background: var(--accent, #007aff);
}

/* Dark Mode Adjustments */
body.dark-mode .icon-picker-trigger {
    background: var(--bg-surface);
    border-color: var(--border-medium);
}

body.dark-mode .icon-picker-options {
    background: var(--bg-surface);
    border-color: var(--border-medium);
}

body.dark-mode .icon-picker-option {
    background: transparent;
}

body.dark-mode .icon-picker-option:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

body.dark-mode .icon-picker-option.selected,
body.dark-mode .icon-picker-option.active {
    background: var(--accent, #0a84ff);
    color: #fff;
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .icon-picker-trigger {
        height: 44px;
    }

    .icon-picker-options {
        grid-template-columns: repeat(6, 1fr);
        width: min(86vw, 320px);
    }
}

#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;
}

/* (layout for #iconPicker .icon-picker-options is governed by the base .icon-picker-options
   grid-popover rule — no width/flex override here, or it breaks the grid) */
#iconPicker .icon-picker-selected,
#iconPicker .icon-picker-option {
    color: var(--text-muted);
}

#iconPicker .icon-picker-option:hover {
    color: var(--accent, #007aff);
    background: var(--bg-surface-soft, rgba(0, 0, 0, 0.06));
}
#iconPicker .icon-picker-option.selected,
#iconPicker .icon-picker-option.active {
    color: #fff;
    background: var(--accent, #007aff);
}

body.dark-mode #iconPicker .icon-picker-option {
    background: transparent;
}
body.dark-mode #iconPicker .icon-picker-option:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
body.dark-mode #iconPicker .icon-picker-option.selected,
body.dark-mode #iconPicker .icon-picker-option.active {
    background: var(--accent, #0a84ff);
    color: #fff;
}

/* ===================================
   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;
}

#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-time-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);
}

/* ===================================
   UNIVERSAL TIME PICKER — Shared Popover
   =================================== */
.ab-time-popover {
    position: fixed;
    z-index: 200000;
    width: 160px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
}

.ab-time-popover.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ab-tp-columns {
    display: flex;
    gap: 8px;
}

.ab-tp-col {
    flex: 1;
    max-height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    scroll-behavior: smooth;
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* old Edge */
}

.ab-tp-col::-webkit-scrollbar {
    display: none;              /* Chrome, Safari */
}

.ab-tp-option {
    border: none;
    background: transparent;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 500;
    padding: 7px 0;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    transition: all 0.12s ease;
}

.ab-tp-option:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

.ab-tp-option.selected {
    background: var(--accent);
    color: #fff;
    font-weight: 700;
}

/* ===================================
   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 an inner border. */
.project-badge.drop-nest {
    box-shadow: inset 0 0 0 2px var(--accent, #0070f3);
    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 { cursor: text; min-height: 26px; padding: 2px 4px; border-radius: 6px; transition: background 0.12s ease; }
.custom-currency-cell:hover { background: var(--bg-surface-soft, rgba(0,0,0,0.04)); }
.custom-currency-value { font-variant-numeric: tabular-nums; color: var(--text-main); }
.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; }

/* Clean custom checkbox (replaces the raw native box) */
.custom-checkbox-cell { display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 4px 0; }
.custom-checkbox-input {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    flex: none;
    border-radius: 5px;
    border: 2px solid var(--border-medium, #d2d2d7);
    background: var(--bg-surface, #fff);
    cursor: pointer;
    position: relative;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.custom-checkbox-input:hover { border-color: var(--accent, #0070f3); }
.custom-checkbox-input:checked { 
    background-color: var(--accent, #0070f3); 
    border-color: var(--accent, #0070f3); 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 13px;
    background-position: center;
    background-repeat: no-repeat;
}
body.dark-mode .custom-checkbox-input { background: var(--bg-surface, #1c1c1e); border-color: var(--border-medium, #48484a); }

/* Row status filter popover */
.sheet-filter-wrap { position: relative; display: inline-flex; margin-right: 4px; }
#sheetFilterBtn { position: relative; }
.filter-count-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--accent, #0070f3);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
    z-index: 10;
}
.sheet-filter-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1000;
    min-width: 220px;
    max-height: 360px;
    overflow-y: auto;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-subtle, #e5e5ea);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.16);
    padding: 8px;
}
.sheet-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px 8px;
    border-bottom: 1px solid var(--border-subtle, #e5e5ea);
    margin-bottom: 6px;
}
.sheet-filter-title { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted, #6E6E73); }
.sheet-filter-clear { border: none; background: none; color: var(--accent, #0070f3); font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.sheet-filter-clear:hover { background: var(--bg-surface-soft, rgba(0,0,0,0.04)); }
.sheet-filter-list { display: flex; flex-direction: column; gap: 2px; }
.sheet-filter-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-main);
}
.sheet-filter-item:hover { background: var(--bg-surface-soft, rgba(0,0,0,0.04)); }
.sheet-filter-item input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent, #0070f3); cursor: pointer; flex: none; }

.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 {
    box-shadow: inset 4px 0 0 0 var(--accent, #0070f3);
}
.spreadsheet-card.drop-after {
    box-shadow: inset -4px 0 0 0 var(--accent, #0070f3);
}

@media (max-width: 600px) {
    .hide-mobile-text {
        display: none;
    }
    /* #addTaskBtn used to shrink to 30px here while the Docs and Project
       buttons stayed 40px, so the header jumped when switching views. It now
       inherits the shared circular rule at every breakpoint. */
}

/* Ensure the add task panel button is always a perfect circle and doesn't squish into an oval on mobile */
#addTaskPanelBtn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    aspect-ratio: 1/1 !important;
    box-sizing: border-box !important;
}

@media (max-width: 600px) {
    #addTaskPanelBtn {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
    }
}

/* Customer Autocomplete Results */
.customer-autocomplete-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    max-height: 240px;
    overflow-y: auto;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-subtle, #e5e5ea);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

.customer-autocomplete-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-subtle, #e5e5ea);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.customer-autocomplete-item:last-child {
    border-bottom: none;
}

.customer-autocomplete-item:hover {
    background: var(--bg-surface-hover, #f5f5f5);
}

body.dark-mode .customer-autocomplete-item:hover {
    background: var(--bg-surface-hover, #2c2c2e);
}

.customer-autocomplete-item-main {
    display: flex;
    flex-direction: column;
}

.customer-autocomplete-item-title {
    font-weight: 500;
    font-size: 14px;
    color: var(--text-main, #000);
}

.customer-autocomplete-item-sub {
    font-size: 12px;
    color: var(--text-muted, #8e8e93);
    margin-top: 2px;
}

.customer-autocomplete-badge {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bg-surface-hover, #f5f5f5);
    color: var(--text-muted, #8e8e93);
    white-space: nowrap;
}

.customer-autocomplete-badge.lead {
    background: var(--accent-soft, rgba(0, 112, 243, 0.1));
    color: var(--accent, #0070f3);
}

.customer-autocomplete-badge.finance {
    background: #e8f5e9;
    color: #2e7d32;
}

body.dark-mode .customer-autocomplete-badge.finance {
    background: rgba(46, 125, 50, 0.2);
    color: #81c784;
}

/* ==========================================================================
   Collaborator Multiselect Dropdown
   ========================================================================== */
.collab-multiselect-container {
    position: relative;
    width: 100%;
}

.collab-multiselect-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 40px;
    padding: 6px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
    transition: all 0.2s;
}

.collab-multiselect-trigger:hover {
    border-color: var(--primary-color);
}

.collab-multiselect-trigger.active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

.collab-multiselect-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1;
}

.collab-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--bg-body);
    border-radius: 12px;
    font-size: 12px;
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
}

.collab-chip.collab-chip-edit {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent-soft);
}

.collab-chip .role-badge {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 600;
}

.collab-multiselect-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--border-subtle, var(--border-color));
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
    z-index: 999999;
    max-height: 250px;
    overflow-y: auto;
    display: none;
    padding: 8px;
}

.collab-multiselect-dropdown.show {
    display: block;
}

/* Heading + inline picker shell — these used to be inline styles on the markup
   CollaboratorManager builds, written against --bg-color/--border-color, which
   this stylesheet never defines. The `white` fallback meant the picker stayed
   white in dark mode; the border resolved to nothing at all. */
.collab-heading {
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text-main);
}

.collab-inline-menu {
    margin-top: 8px;
    max-height: 250px;
    overflow-y: auto;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
}

.collab-dropdown-item {
    display: flex;
    align-items: center;
    padding: 7px 8px;
    border-radius: 8px;
    transition: background 0.1s;
    gap: 12px;
    margin-bottom: 2px;
}

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

.collab-dropdown-item:hover {
    background: var(--bg-surface-hover, #f5f5f5);
}

.collab-item-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--accent);
}

/* Unchecked native checkboxes render as bright white plates against the dark
   picker unless the UA is told which scheme to paint them in. */
body.dark-mode .collab-item-checkbox {
    color-scheme: dark;
}

.collab-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.collab-item-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main);
}

.collab-item-email {
    font-size: 11px;
    color: var(--text-muted);
}

.collab-item-role-select {
    width: 90px;
    padding: 4px;
    font-size: 12px;
    border-radius: 4px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-body);
    color: var(--text-main);
    cursor: pointer;
}

.collab-item-role-select:focus {
    border-color: var(--accent);
    outline: none;
}

/* Custom Role Dropdown */
.collab-role-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-main);
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--border-subtle);
    transition: all 0.15s;
}

.collab-role-btn:hover {
    background: var(--bg-surface-hover, #f5f5f5);
    border-color: var(--border-medium);
}

.collab-role-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    width: 130px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 100;
    display: none;
    flex-direction: column;
    padding: 4px;
}

.collab-role-dropdown.show {
    display: flex;
}

.collab-role-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    color: var(--text-main);
    transition: background 0.1s;
}

.collab-role-option:hover {
    background: var(--bg-surface-hover, #f5f5f5);
}

body.dark-mode .collab-role-option:hover,
body.dark-mode .collab-dropdown-item:hover,
body.dark-mode .collab-role-btn:hover {
    background: var(--bg-surface-hover, #2c2c2e);
}

/* ===================================
   iOS KEYBOARD AVOIDANCE
   js/keyboard-inset.js sets --keyboard-inset and toggles body.keyboard-open
   on touch phones with visualViewport (standalone PWA *and* browser tabs).
   All rules below are inert otherwise (class never added), so default
   behavior is unchanged.
   =================================== */
@media (max-width: 768px) {
    /* Chat section uses an internal flex layout (overflow:hidden) and only
       self-pads 10px, so it must explicitly reserve the fixed bottom nav.
       The deleted @supports block used to do this via .app-container padding,
       which double-padded every other (self-clearing) section; this scopes it
       to chat only. The flex:1 .chat-two-pane shrinks to fit, lifting the
       composer above the nav.
       DEFENSE-IN-DEPTH: derived inline from --bottom-nav-height rather than
       via --nav-safe-bottom. If a token in that chain is ever invalid at
       computed-value time, var() would resolve to unset (= 0 padding) and the
       composer would vanish under the fixed nav — the exact iPhone bug this
       guards against. Formula mirrors --nav-bottom-gap at :root (~line 270);
       keep the two in sync. */
    #chat-section.content-section {
        padding-bottom: calc(var(--bottom-nav-height, 70px) + max(calc(env(safe-area-inset-bottom, 0px) - 12px), 8px));
        /* The base #chat-section rule (padding:10px, ~line 1890) beats the
           mobile .content-section padding-top on ID specificity, letting the
           fixed top bar overlay the chat pane. Re-assert clearance here. */
        padding-top: calc(56px + env(safe-area-inset-top, 0px));
    }
    /* Lift the chat pane to sit above the on-screen keyboard instead of
       reserving space for the (now-hidden) bottom nav. More specific than the
       rule above, so it wins while typing. */
    body.keyboard-open #chat-section {
        padding-bottom: var(--keyboard-inset);
    }
    /* Slide the bottom nav out of the way while typing (it would otherwise
       sit underneath the keyboard and steal vertical space). */
    body.keyboard-open .sidebar {
        transform: translateY(100%);
        transition: transform 0.2s ease-out;
    }
    /* Keep the composer hugging the visible viewport bottom. */
    body.keyboard-open .chat-composer {
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }
}

/* ============================================================
   DOCUMENT SIGNATURES (official / executed contracts)
   Reuses the .unified-modal shell; only the .docsign-* bits below.
   ============================================================ */
.docsign-warn {
    display: flex; gap: 8px; align-items: flex-start;
    background: var(--accent-soft); color: var(--text-main);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
    padding: 10px 12px; font-size: 13px; line-height: 1.5; margin-bottom: 14px;
}
.docsign-warn i { margin-top: 2px; color: var(--accent); flex: 0 0 auto; }
.docsign-warn span { flex: 1 1 auto; min-width: 0; }
.docsign-field-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); margin-bottom: 10px; }

/* Signer picker — a bordered list with dividers. The `.unified-modal label` global
   block (display:block !important, muted 13px text) would wreck these rows, so this
   selector out-specifies it and re-asserts every hijacked property. */
.docsign-signer-list { display: flex; flex-direction: column; max-height: 300px; overflow-y: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.unified-modal label.docsign-signer-row,
label.docsign-signer-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--text-main) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: background var(--transition-fast);
}
body.dark-mode .unified-modal label.docsign-signer-row { color: var(--text-main) !important; }
.docsign-signer-row:last-child { border-bottom: none; }
.docsign-signer-row:hover { background: var(--bg-hover); }
.docsign-signer-cb { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; flex: 0 0 auto; margin: 0; }
.docsign-signer-row .docsign-av { width: 32px; height: 32px; font-size: 13px; }
.docsign-signer-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docsign-you { color: var(--text-muted); font-weight: 400; font-size: 13px; }
.docsign-av { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #fff; overflow: hidden; flex: 0 0 auto; }
.docsign-av img { width: 100%; height: 100%; object-fit: cover; }

/* Docsign modals: a bit wider, and footer buttons must NEVER truncate — the global
   button rule adds overflow:hidden + ellipsis, and the ≤768px footer rule adds
   flex:1/min-width:0; both are overridden here (higher specificity), with wrapping
   so full labels always fit. */
.docsign-modal .unified-modal-container { max-width: 500px; width: min(500px, calc(100vw - 32px)); }
.docsign-modal .unified-modal-footer { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
.docsign-modal .unified-modal-footer .btn,
.docsign-modal .unified-modal-footer button {
    flex: 0 1 auto;
    min-width: max-content;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}
@media (max-width: 768px) {
    .docsign-modal .unified-modal-footer .btn,
    .docsign-modal .unified-modal-footer button {
        flex: 1 1 auto;
        min-width: max-content;
    }
}

/* Signature pad */
.docsign-pad-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.docsign-tab { flex: 1; padding: 8px; border: 1px solid var(--border-subtle); background: var(--bg-surface); color: var(--text-muted); border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; }
.docsign-tab.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.docsign-pad-wrap { border: 1px dashed var(--border-medium); border-radius: var(--radius-md); background: #fff; }
.docsign-canvas { display: block; width: 100%; height: 200px; touch-action: none; cursor: crosshair; border-radius: var(--radius-md); }
.docsign-type-input { width: 100%; height: 200px; border: none; background: transparent; text-align: center; font-family: "Segoe Script","Brush Script MT","Snell Roundhand",cursive; font-size: 40px; color: #111; }
.docsign-pad-hint { margin-top: 10px; font-size: 12px; color: var(--text-muted); }

/* Frozen-doc signature panel: Name | Signature table under the editor */
.docsign-panel { max-width: 820px; margin: 8px auto 40px; padding: 0 20px; }
.docsign-panel-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.docsign-official { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 4px 12px; }
.docsign-status, .docsign-integrity { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 4px 10px; background: var(--bg-surface-soft); }
.docsign-status.pending { color: var(--warning); }
.docsign-status.complete { color: var(--success); }
.docsign-integrity.ok { color: var(--success); background: transparent; }
.docsign-integrity.bad { color: var(--danger); }
.docsign-table { width: 100%; border-collapse: collapse; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.docsign-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); background: var(--bg-surface-soft); padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); }
.docsign-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.docsign-table tr:last-child td { border-bottom: none; }
.docsign-name-cell { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-main); white-space: nowrap; }
/* Signatures table on the document: larger avatar + name for readability */
.docsign-table td { padding: 14px 12px; }
.docsign-table .docsign-name-cell { font-size: 16px; gap: 12px; font-weight: 500; }
.docsign-table .docsign-av { width: 40px; height: 40px; font-size: 15px; }
.docsign-cell.awaiting { color: var(--text-muted); font-style: italic; font-size: 13px; }
.docsign-cell.signed { display: flex; flex-direction: column; gap: 2px; }
.docsign-img { max-height: 60px; max-width: 260px; object-fit: contain; background: #fff; border-radius: 4px; }
.docsign-meta { font-size: 11px; color: var(--text-muted); }
.docsign-panel-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.docsign-panel-foot .btn, .docsign-sign-btn { padding: 6px 12px; font-size: 13px; white-space: nowrap; }

/* Vote + certificate lists */
.docsign-vote-list, .docsign-cert-list { display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.docsign-vote-row { display: flex; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); font-size: 14px; color: var(--text-main); }
.docsign-vote-row:last-child { border-bottom: none; }
.docsign-vote-row .voted { color: var(--success); font-weight: 600; }
.docsign-vote-row .novote { color: var(--text-muted); }
.docsign-cert-title { font-weight: 700; margin-bottom: 10px; color: var(--text-main); }
.docsign-cert-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); font-size: 13px; }
.docsign-cert-row:last-child { border-bottom: none; }
.docsign-cert-when { color: var(--text-muted); }
.docsign-cert-what { font-weight: 600; color: var(--text-main); text-align: right; }
.docsign-cert-who { grid-column: 1 / -1; font-size: 12px; color: var(--text-muted); }
.docsign-loading, .docsign-empty { padding: 24px; text-align: center; color: var(--text-muted); font-size: 14px; }

/* Official badge pinned to the card's top-right corner — absolutely
   positioned so it never widens/stretches the card layout. Slides left on
   hover to make room for the ⋮ menu button that fades in at the corner. */
.doc-card .docsign-card-badge {
    position: absolute;
    top: 14px;
    right: 12px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 999px;
    padding: 4px 8px;
    transition: right 0.15s ease;
    pointer-events: none;
}
.doc-card:hover .docsign-card-badge { right: 44px; }
.doc-card .docsign-card-badge.complete { color: var(--success); }

/* Panel buttons never truncate (global button rule adds ellipsis) */
.docsign-panel .btn, .docsign-strip .btn { overflow: visible; text-overflow: clip; white-space: nowrap; }

/* Suggested-edit strip (review bar above the signature table) */
.docsign-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; border: 1px solid var(--border-subtle); background: var(--accent-soft); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 14px; }
/* Mode/outdated tint the WHOLE frame — there is no left rail to colour. */
.docsign-strip.mode { border-color: var(--warning); background: rgba(255, 149, 0, 0.08); }
.docsign-strip.outdated { border-color: var(--danger); }
.docsign-strip-text { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--text-main); flex: 1 1 260px; min-width: 0; }
.docsign-strip-text i { margin-top: 2px; color: var(--accent); flex: 0 0 auto; }
.docsign-strip.mode .docsign-strip-text i { color: var(--warning); }
.docsign-strip.outdated .docsign-strip-text i { color: var(--danger); }
.docsign-strip-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* "Revision N ... all earlier approvals were reset" — its own line under the title */
.docsign-strip-note { display: block; margin-top: 3px; font-size: 12px; color: var(--text-muted); }

/* Suggest-edit mode: make it unmistakable the editor holds a proposed copy */
.doc-editor.docsign-suggesting { outline: 2px dashed var(--warning); outline-offset: 10px; border-radius: 4px; }

/* Diff highlights in the suggestion view */
.doc-editor ins.docsign-diff-ins { background: rgba(48, 209, 88, 0.22); text-decoration: none; border-radius: 3px; padding: 0 2px; }
.doc-editor del.docsign-diff-del { background: rgba(255, 69, 58, 0.16); color: inherit; text-decoration: line-through; border-radius: 3px; padding: 0 2px; }
body.dark-mode .doc-editor ins.docsign-diff-ins { background: rgba(48, 209, 88, 0.30); }
body.dark-mode .doc-editor del.docsign-diff-del { background: rgba(255, 69, 58, 0.28); }

/* ===================================
   SHARE MESSAGE (collaborator picker)
   ===================================
   Optional note sent alongside a share. Hidden until at least one teammate is
   selected — see CollaboratorManager.updateMessageVisibility(). */
.collab-message-row {
    margin-top: 10px;
}

.collab-message-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--text-color, var(--text-main));
}

.collab-message-label span {
    font-weight: 400;
    color: var(--text-muted);
}

.collab-message-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    font: inherit;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-main);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    resize: vertical;
    min-height: 52px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.collab-message-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.collab-message-input::placeholder {
    color: var(--text-light);
}

/* ===================================
   MOBILE TOUCH TARGETS
   ===================================
   Controls that were 27–30px tall on phones — below a comfortable tap size,
   and easy to miss on the Week/Month toggles and the mini-calendar arrows.
   Raised to 36px (and 44px for the legal links, which were 18px of text with
   no padding at all). Scoped to touch layouts so desktop density is kept. */
@media (max-width: 768px) {
    .ov-period-btn,
    .view-toggle-btn {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    #ovMiniCalPrev,
    #ovMiniCalNext {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
    }

    /* Text links in the settings footer: pad the row rather than the glyph so
       the tap area grows without moving the text. */
    .footer-legal a,
    .footer-brand a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 4px;
    }
}