/*
ENHANCED LAMINAIS DESIGN - Full Featured Edition
*/

:root {
/* Clean color palette */
--bg-primary: #fafafa;
--bg-secondary: #ffffff;
--bg-tertiary: #f5f5f5;
--bg-card: #ffffff;
--text-primary: #1a1a1a;
--text-secondary: #666666;
--text-muted: #999999;
--text-tertiary: #a0a0a0;
--border-color: #d4d4d4;
--border-hover: #b8b8b8;
--hover-bg: #f8f8f8;
--input-bg: #ffffff;
--accent-color: #0066cc;
--success-color: #00a86b;
--danger-color: #dc3545;
--warning-color: #ff8c00;

/* Enhanced deadline colors */
--deadline-distant: #000000;
--deadline-safe: #00a86b;
--deadline-caution: #ff00ff;
--deadline-warning: #b8860b;
--deadline-urgent: #ff8c00;
--deadline-critical: #dc3545;
--deadline-no-date: #000000;

/* Blinking colors */
--morning-blink-color: #fccf03;
--focus-blink-color: #3bf5e2;
--ti-yellow-color: #ffd700;
--completed-green-color: #4caf50;

/* Badge colors */
--badge-morning-color: #FF8C42;
--badge-focus-color: #3bf5e2;
--badge-deadline-color: #dc3545;
--badge-primer-color: #ffc107;
--badge-today-color: #4caf50;

/* Clean spacing system */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;

/* Subtle shadows */
--shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.04);
--shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.06);
--shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.08);
--border-radius: 8px;
--border-radius-small: 6px;

/* Additional utility variables */
--primary-color: #6c63ff;
--space-xxl: 3rem;

/* Z-index hierarchy system - Centralized z-index management
   Use these variables to ensure consistent layering */
--z-base: 1;
--z-content: 10;
--z-navigation: 90;
--z-header: 100;
--z-dropdown: 200;
--z-sticky: 300;
--z-floating: 400;
--z-overlay: 500;
--z-modal-backdrop: 600;
--z-loading: 1000;
--z-priority-badge: 1000;
--z-fullscreen-viewer: 10000;
--z-modal: 50000;           /* ModalManager base - increments by 2000 per nested modal */
--z-bulk-operations: 60000; /* Above modals, used for bulk move FAB */
--z-mobile-input: 80000;    /* Mobile expanded inputs */
--z-notification: 500000;   /* Toast notifications - must be above ALL modals including timer (200000) and confirm (200000) */
--z-selection-mode: 100000; /* Selection mode header/buttons */
--z-context-menu: 70000;    /* Context menus - above modals (50000) and bulk ops (60000) */
--z-fixed: 1030;            /* Fixed layout elements */
--z-max: 99999;             /* Maximum general z-index */
--z-critical: 999999;       /* Absolute top layer - use sparingly */

/* Skeleton loader colors (light theme defaults) */
--skeleton-base: #e8e8e8;
--skeleton-shine: #f2f2f2;
}

/* Dark mode with cleaner palette */
[data-theme="dark"] {
--bg-primary: #0f0f0f;
--bg-secondary: #1a1a1a;
--bg-tertiary: #242424;
--bg-card: #1e1e1e;
--text-primary: #ffffff;
--text-secondary: #a0a0a0;
--text-muted: #6a6a6a;
--text-tertiary: #707070;
--border-color: #2a2a2a;
--border-hover: #3a3a3a;
--hover-bg: #252525;
--input-bg: #242424;
--accent-color: #0084ff;
--success-color: #00d084;
--danger-color: #ff453a;
--warning-color: #ff9f0a;

/* Badge colors for dark theme */
--badge-morning-color: #FF8C42;
--badge-focus-color: #3bf5e2;
--badge-deadline-color: #ff453a;
--badge-primer-color: #ffc107;
--badge-today-color: #66bb6a;

/* Override deadline-warning for dark backgrounds where gold is readable */
--deadline-warning: #ffd700;
--deadline-color: #ffd700;

--shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.2);
--shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.3);
--shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.4);

/* Skeleton loader colors (dark theme overrides) */
--skeleton-base: #242424;
--skeleton-shine: #2e2e2e;
}

/* ===== SKELETON LOADERS =====
 * Shimmer placeholders shown in #groupsList while loadGroups() fetches data.
 * loadGroups() replaces innerHTML so these are removed automatically. */

@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-loader {
    padding: 8px 0;
}

.skeleton-group-card {
    border-radius: var(--border-radius, 8px);
    padding: 16px 18px;
    margin-bottom: 10px;
    border: 1px solid var(--border-color, #e0e0e0);
    background: var(--bg-card, #fff);
}

.skeleton-line {
    height: 13px;
    border-radius: 4px;
    margin-bottom: 9px;
    background: linear-gradient(
        90deg,
        var(--skeleton-base) 25%,
        var(--skeleton-shine) 50%,
        var(--skeleton-base) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s infinite linear;
}

.skeleton-line:last-child { margin-bottom: 0; }
.skeleton-title { width: 42%; height: 15px; }
.skeleton-short { width: 22%; }

/* ===== END SKELETON LOADERS ===== */

/* Dark mode timeline prefix styling for better contrast */
[data-theme="dark"] .timeline-prefix {
color: #ffffff;
font-weight: 800;
}

[data-theme="dark"] .timeline-prefix.done {
color: #00d084;
}

/* Font Awesome Progressive Enhancement */
.icon {
display: inline-block;
}

.icon-emoji {
display: inline;
}

.icon-fa {
display: none;
color: inherit;
font-size: inherit;
}

.fa-loaded .icon-emoji {
display: none;
}

.fa-loaded .icon-fa {
display: inline;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
transition: background 0.3s ease, color 0.3s ease;
min-height: 100vh;
}

.container {
max-width: 800px;
margin: 0 auto;
min-height: 100vh;
background: var(--bg-primary);
position: relative;
padding-bottom: 160px; /* Extra space to clear stacked floating action buttons */
}

/* ENHANCED PAGE SYSTEM */
.page {
display: none;
min-height: 100vh;
animation: fadeIn 0.3s ease-out;
padding-top: 140px; /* Space for fixed header + nav */
}

.page.active {
display: block;
}

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

/* ENHANCED HEADER */
.header {
background: var(--bg-secondary);
border-bottom: 1px solid var(--border-color);
padding: var(--space-xl) var(--space-lg);
text-align: center;
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: var(--z-header);
backdrop-filter: blur(8px);
}

.header h1 {
font-size: 1.5rem;
font-weight: 600;
letter-spacing: -0.025em;
color: var(--text-primary);
margin: 0;
}

/* LAMINASYNC STATUS */
.sync-status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.sync-status-badge.sync-ok {
    background: var(--success-color);
    color: #fff;
}

.sync-status-badge.sync-pending {
    background: var(--warning-color);
    color: #fff;
}

.sync-status-badge.sync-offline {
    background: var(--text-secondary);
    color: #fff;
}

.sync-status-badge.sync-error {
    background: var(--danger-color);
    color: #fff;
}

/* TASK INTERACTION MODE */

/* Group section three-dots + actions */
.group-section-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.group-section-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 0;
    transition: all 0.15s ease;
}

.group-section-dots:hover {
    background: var(--hover-bg, rgba(0,0,0,0.05));
    color: var(--text-primary);
}

.group-section-dots:active {
    transform: scale(0.92);
}

/* Mode context popup (dropdown from three-dots) */
.mode-context-popup {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 70000;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    padding: 4px;
    min-width: 160px;
    animation: modePopupIn 0.15s ease;
}

@keyframes modePopupIn {
    from { opacity: 0; transform: translateY(-4px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.mode-context-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
}

.mode-context-option:hover {
    background: var(--hover-bg, rgba(0,0,0,0.05));
}

.mode-context-option.active {
    color: var(--accent-color);
    font-weight: 600;
}

.mode-context-option i {
    width: 18px;
    text-align: center;
    font-size: 0.9rem;
}

/* ENHANCED NAVIGATION WITH BLINKING */
.nav {
background: var(--bg-secondary);
padding: 0 var(--space-lg);
display: flex;
gap: 0;
border-bottom: 1px solid var(--border-color);
position: fixed;
top: 88px;
left: 0;
right: 0;
width: 100%;
z-index: var(--z-navigation);
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}


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

/* Show scrollbar on mobile for better UX */
@media (max-width: 768px) {
    .nav {
        scrollbar-width: thin;
        -ms-overflow-style: auto;
        padding-bottom: var(--space-xs); /* Add space for scrollbar */
        position: sticky;
        top: 0;
        z-index: var(--z-navigation);
        -webkit-overflow-scrolling: touch;
    }

    .nav::-webkit-scrollbar {
        display: block;
        height: 4px;
    }

    .nav::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 3px;
    }

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

    .nav::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.4);
    }

    /* Dark theme scrollbar */
    [data-theme="dark"] .nav::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.25);
    }

    [data-theme="dark"] .nav::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.4);
    }

    /* Scroll fade indicators for nav overflow */
    .nav::before,
    .nav::after {
        content: '';
        position: sticky;
        top: 0;
        bottom: 0;
        min-width: 24px;
        flex-shrink: 0;
        pointer-events: none;
        z-index: 2;
    }
    .nav::after {
        right: 0;
        background: linear-gradient(to left, var(--bg-secondary) 0%, transparent 100%);
        margin-left: -24px;
    }
}

.nav-btn {
background: transparent;
border: none;
color: var(--text-secondary);
padding: var(--space-lg) var(--space-xl) 38px;
cursor: pointer;
white-space: nowrap;
transition: color 0.15s ease, border-color 0.15s ease;
font-size: 1.75rem;
font-weight: 600;
flex-shrink: 0;
border-bottom: 2px solid transparent;
position: relative;
}

.nav-btn:hover {
color: var(--text-primary);
background: var(--hover-bg);
}

.nav-btn.active {
color: var(--accent-color);
border-bottom-color: var(--accent-color);
background: var(--hover-bg);
}

/* Enhanced blinking animations for morning and focus tabs */
/* Optimized for performance: using opacity instead of color, reduced iterations */
@keyframes morningBlink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0.5; }
}

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

.nav-btn.morning-blink {
color: var(--morning-blink-color);
animation: morningBlink 1s 5; /* Reduced from 15 to 5 iterations for performance */
font-weight: 600;
will-change: opacity; /* Hint browser to optimize */
}

.nav-btn.focus-blink {
color: var(--focus-blink-color);
animation: focusBlink 1s 5; /* Reduced from 15 to 5 iterations for performance */
font-weight: 600;
will-change: opacity; /* Hint browser to optimize */
}

/* Remove will-change when not animating to save memory */
.nav-btn:not(.morning-blink):not(.focus-blink) {
will-change: auto;
}

/* PAGE CONTENT */
.page-content {
padding: var(--space-xl) var(--space-lg);
min-height: calc(100vh - 160px);
}

/* ENHANCED GROUP SECTIONS - Mobile Optimized Layout */
.group-section {
margin-bottom: var(--space-md);
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow-subtle);
transition: border-color 0.15s ease;
}

.group-section:hover {
border-color: var(--border-hover);
}

.group-section-header {
padding: var(--space-lg);
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
background: var(--bg-tertiary);
cursor: pointer;
user-select: none;
}

.group-section-header:hover {
background: var(--bg-hover);
}

.group-section-chevron {
font-size: 0.85rem;
color: var(--text-secondary);
transition: transform 0.2s ease;
}

.group-section.collapsed .group-section-chevron {
transform: rotate(-90deg);
}

.group-section.collapsed .group-section-content {
display: none;
}

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

.group-section-title {
font-size: 1.125rem;
font-weight: 600;
color: var(--text-primary);
display: flex;
align-items: center;
gap: var(--space-md);
}

.group-section-content {
padding: var(--space-lg);
}

/* Task sub-sections (Repeat / One-Time within a group) */
.task-sub-section {
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    box-shadow: none;
}

.task-sub-header {
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
}

.task-sub-title {
    font-size: 0.9rem !important;
    font-weight: 600;
    color: var(--text-secondary);
}

.task-sub-section .group-section-content {
    padding: var(--space-sm) 0;
}

.task-sub-section .group-section-chevron {
    font-size: 0.75rem;
}

.task-sub-count {
    color: var(--accent-color);
    font-size: 0.95rem;
    font-weight: 700;
    margin-left: 6px;
}

/* ENHANCED GROUP ITEMS - Mobile Optimized */
.group-item {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
margin-bottom: var(--space-xl);
overflow: hidden;
transition: border-color 0.15s ease;
position: relative;
}

.group-item:hover {
border-color: var(--border-hover);
}

.group-item.selected {
background: var(--selection-bg);
border-color: var(--accent-color);
box-shadow: var(--shadow-soft);
}

.group-item.selected .group-checkbox {
display: inline-block !important;
}

.bulk-mode .group-checkbox {
display: inline-block !important;
}

/* MOBILE OPTIMIZED GROUP HEADER - Name on top, actions on bottom */
.group-header {
background: var(--bg-tertiary);
padding: var(--space-lg);
border-bottom: 1px solid var(--border-color);
position: relative;
cursor: pointer;
}

.group-name {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-primary);
display: flex;
align-items: center;
/* Enhanced text wrapping for group names */
word-wrap: break-word !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
white-space: normal !important;
hyphens: auto !important;
max-width: 100% !important;
line-break: normal !important;
gap: var(--space-md);
margin-bottom: var(--space-md);
width: 100%;
}

/* Mobile optimized group actions - spread evenly at bottom */
.group-actions {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-sm);
width: 100%;
}

.group-menu-btn {
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
color: var(--text-secondary);
cursor: pointer;
padding: var(--space-xs);
border-radius: 50%;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
font-size: 1rem;
flex-shrink: 0;
}

.group-menu-btn:hover {
background: var(--accent-color);
border-color: var(--accent-color);
color: white;
transform: scale(1.1);
}

/* LIST ITEMS */
.lists-container {
background: var(--bg-primary);
padding: var(--space-lg);
}

.nested-list-item {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-small);
margin-bottom: var(--space-md);
padding: var(--space-lg);
transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
position: relative;
cursor: pointer;
}

.nested-list-item:hover {
background: var(--hover-bg);
border-color: var(--border-hover);
transform: translateY(-1px);
}

.nested-list-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--border-color);
opacity: 0;
transition: opacity 0.2s ease;
}

.nested-list-item:hover::before {
opacity: 1;
}

/* List content layout within nested list items */
.nested-list-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
}

.list-content {
flex: 1;
min-width: 0; /* Allows text to truncate if needed */
overflow: hidden; /* Prevent content from extending beyond container */
}

.list-name {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-xs);
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
white-space: pre-wrap;
line-height: 1.4;
max-width: 100%;
hyphens: auto;
}

.list-name .editable {
word-wrap: break-word !important;
overflow-wrap: break-word !important;
word-break: break-word !important;
white-space: pre-wrap !important;
max-width: 100% !important;
display: block;
hyphens: auto;
/* Force container-relative sizing for all screen sizes */
box-sizing: border-box !important;
width: 100% !important;
}

.list-meta {
font-size: 0.875rem;
color: var(--text-secondary);
}

.list-actions {
display: flex;
align-items: center;
gap: var(--space-sm);
flex-shrink: 0;
}

.list-letter-badge {
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 700;
color: white;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.list-task-count {
background: var(--bg-tertiary);
color: var(--text-secondary);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--border-radius-small);
font-size: 0.75rem;
font-weight: 600;
min-width: 20px;
text-align: center;
}

/* ENHANCED TASK ITEMS WITH CHRONOLOGICAL ORDERING */
.task-item {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
margin-bottom: var(--space-md);
padding: var(--space-lg);
transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
position: relative;
overflow: hidden;
}

.task-item:hover {
background: var(--hover-bg);
border-color: var(--border-hover);
transform: translateY(-1px);
}

.task-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--border-color);
opacity: 0;
transition: opacity 0.2s ease;
}

.task-item:hover::before {
opacity: 1;
}

.task-item.selected {
background: linear-gradient(135deg, var(--accent-color), var(--accent-color-darker)) !important;
border-color: var(--accent-color) !important;
color: white !important;
transform: scale(1.02);
box-shadow: 0 4px 12px rgba(var(--accent-color-rgb), 0.3);
animation: selectionPulse 0.3s ease-out;
}

.task-item.selected * {
color: white !important;
}

.task-item.selected .task-letter {
background: rgba(255,255,255,0.2) !important;
border-color: rgba(255,255,255,0.3) !important;
}


/* TASK CONTENT */
.task-header {
display: flex;
align-items: flex-start;
gap: var(--space-md);
}

.task-checkbox {
width: 24px;
height: 24px;
border: 2px solid var(--border-color);
border-radius: var(--border-radius-small);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
flex-shrink: 0;
margin-top: 2px;
font-size: 0.875rem;
font-weight: bold;
}

.task-checkbox.checked {
background: var(--success-color);
border-color: var(--success-color);
color: white;
}

.task-checkbox:hover {
border-color: var(--success-color);
background: rgba(0, 168, 107, 0.1);
transform: scale(1.05);
}

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

.task-name {
font-size: 1rem;
font-weight: 500;
line-height: 1.4;
color: var(--text-primary);
margin-bottom: var(--space-sm);
/* Enhanced text wrapping for task names */
word-wrap: break-word !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
white-space: normal !important;
hyphens: auto !important;
max-width: 100% !important;
line-break: normal !important;
box-sizing: border-box !important;
}

.task-name.completed {
text-decoration: line-through;
opacity: 0.6;
}

/* TASK META */
.task-meta {
display: flex;
align-items: center;
gap: var(--space-md);
font-size: 0.75rem;
color: var(--text-muted);
margin-bottom: var(--space-sm);
flex-wrap: wrap;
}

.task-meta-item {
display: flex;
align-items: center;
gap: var(--space-xs);
background: var(--bg-tertiary);
padding: var(--space-xs) var(--space-sm);
border-radius: 12px;
font-weight: 500;
}

/* Info icon button styling */
.info-icon-btn {
cursor: pointer;
transition: color 0.15s ease;
border-radius: 4px;
padding: 2px;
display: inline-flex;
align-items: center;
}

.info-icon-btn:hover {
background-color: var(--hover-bg);
transform: scale(1.1);
}

.info-icon-btn .icon {
font-size: 0.875rem;
color: var(--accent-color);
}

.info-icon-btn:hover .icon {
color: var(--accent-color);
opacity: 0.8;
}

/* Enhanced due date styling */
.task-due-date {
padding: var(--space-xs) var(--space-sm);
border-radius: 12px;
font-weight: 600;
font-size: 0.7rem;
}

.due-distant, .due-no-date {
background: rgba(0, 0, 0, 0.1);
color: var(--deadline-distant);
}

.due-safe {
background: rgba(0, 168, 107, 0.1);
color: var(--deadline-safe);
}

.due-caution {
background: rgba(255, 0, 255, 0.1);
color: var(--deadline-caution);
}

.due-warning {
background: rgba(184, 134, 11, 0.1);
color: var(--deadline-warning);
}

.due-urgent {
background: rgba(255, 140, 0, 0.1);
color: var(--deadline-urgent);
}

.due-critical {
background: rgba(220, 53, 69, 0.1);
color: var(--deadline-critical);
}

/* Task actions always visible on mobile */
.task-menu-btn {
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
color: var(--text-secondary);
cursor: pointer;
padding: var(--space-xs);
border-radius: 50%;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
font-size: 0.875rem;
}

.task-menu-btn:hover {
background: var(--accent-color);
border-color: var(--accent-color);
color: white;
transform: scale(1.1);
}

/* ENHANCED SUBTASK SYSTEM WITH STATUS INDICATORS */
.subtask-item {
display: flex;
align-items: flex-start;
gap: var(--space-md);
padding: var(--space-md);
font-size: 0.875rem;
border-bottom: 1px solid var(--border-color);
transition: background 0.15s ease;
background: var(--bg-secondary);
margin-bottom: var(--space-sm);
border-radius: var(--border-radius-small);
cursor: pointer;
min-width: 0;
}

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

.subtask-item:hover {
background: var(--hover-bg);
transform: scale(1.01);
}

.subtask-status {
width: 24px;
height: 24px;
border: 2px solid var(--border-color);
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: bold;
transition: background 0.15s ease, border-color 0.15s ease;
color: var(--text-primary);
}

.subtask-status.pending {
background: var(--danger-color);
border-color: var(--danger-color);
}

.subtask-status.in-progress {
background: var(--warning-color);
border-color: var(--warning-color);
}

.subtask-status.completed {
background: var(--success-color);
border-color: var(--success-color);
}

.subtask-name {
flex: 1;
font-weight: 500;
line-height: 1.4;
/* Enhanced text wrapping for subtask names */
word-wrap: break-word !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
white-space: normal !important;
hyphens: auto !important;
max-width: 100% !important;
line-break: normal !important;
min-width: 0;
box-sizing: border-box !important;
}

.subtask-name.completed {
text-decoration: line-through;
opacity: 0.6;
color: var(--text-secondary);
}

.subtask-item.completed {
background: var(--bg-tertiary);
opacity: 0.8;
}

.subtask-item.completed:hover {
background: var(--bg-secondary);
opacity: 0.9;
}

/* Subtask slide-out animation for Clean feature */
/* Simplified for better performance - browser interpolates from current state to final */
@keyframes subtaskSlideOut {
to {
    transform: translateX(100%);
    opacity: 0;
}
}

.subtask-slide-out {
animation: subtaskSlideOut 0.4s ease-out forwards;
will-change: transform, opacity; /* Hint browser to optimize */
}

/* Clean up will-change when not animating */
.subtask-item:not(.subtask-slide-out) {
will-change: auto;
}

/* Smooth height transition for subtasks modal */
.subtasks-modal-content {
transition: height 0.3s ease, max-height 0.3s ease;
overflow: hidden;
}

/* Archive status badges */
.archive-status-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 12px;
font-size: 0.75em;
font-weight: 600;
margin-left: 8px;
vertical-align: middle;
}

.archive-status-badge.in-progress-badge {
background: var(--warning-color);
color: white;
}

/* Inline subtasks styles */
.inline-subtasks {
margin-top: 12px;
padding: 8px 16px;
background: var(--bg-tertiary);
border-radius: 6px;
border-left: 3px solid var(--border-color);
}

.inline-subtask-item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0;
border-bottom: 1px solid var(--border-color);
}

.inline-subtask-item:last-child {
border-bottom: none;
}

.subtask-checkbox {
width: 20px;
height: 20px;
border: 2px solid var(--border-color);
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
font-size: 12px;
background: var(--bg-secondary);
position: relative;
user-select: none;
}
/* Expand touch target to 44x44 without changing visual size */
.subtask-checkbox::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 44px;
height: 44px;
transform: translate(-50%, -50%);
}

.subtask-checkbox:hover {
border-color: var(--accent-color);
background: var(--hover-bg);
transform: scale(1.1);
}

.subtask-checkbox:active {
transform: scale(0.95);
}

.subtask-checkbox.checked {
background: var(--success-color);
border-color: var(--success-color);
color: white;
transform: scale(1.05);
}

.subtask-checkbox.checked::before {
content: '';
position: absolute;
width: 6px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
margin-top: -2px;
}

/* Checkbox checked state already uses transition on .subtask-checkbox (0.15s) */

.subtask-name {
flex: 1;
font-size: 14px;
line-height: 1.4;
word-break: break-word;
}

.subtask-name.completed {
text-decoration: line-through;
opacity: 0.7;
color: var(--text-secondary);
transition: opacity 0.15s ease, color 0.15s ease;
}

.subtask-name {
transition: opacity 0.15s ease, color 0.15s ease;
}

.subtask-status-badge {
background: var(--warning-color);
color: white;
padding: 2px 6px;
border-radius: 10px;
font-size: 11px;
font-weight: 500;
}

.subtask-expand-btn {
background: none;
border: none;
color: var(--text-secondary);
cursor: pointer;
padding: 2px 4px;
margin-left: 8px;
border-radius: 3px;
transition: all 0.2s ease;
}

.subtask-expand-btn:hover {
background: var(--hover-bg);
color: var(--accent-color);
}

.subtask-delete {
background: var(--danger-color);
border: none;
color: white;
cursor: pointer;
padding: 4px;
border-radius: 50%;
font-size: 0.875rem;
transition: background 0.15s ease, transform 0.1s ease;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}

.subtask-delete:hover {
transform: scale(1.1);
}

/* TIMELINE SYSTEM FOR SUBTASKS */
.timeline-container {
max-height: 60vh;
overflow-y: auto;
padding: var(--space-md);
}

.timeline-entry {
display: flex;
align-items: flex-start;
gap: var(--space-md);
margin-bottom: var(--space-lg);
padding: var(--space-md);
background: var(--bg-tertiary);
border-radius: var(--border-radius-small);
border-left: 3px solid var(--accent-color);
}

.timeline-prefix {
font-weight: 700;
color: #2c3e50;
min-width: 40px;
font-size: 0.875rem;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: 0.025em;
}

.timeline-content {
flex: 1;
}

.timeline-input {
width: 100%;
min-height: 80px;
padding: var(--space-md);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-small);
background: var(--bg-primary);
color: var(--text-primary);
font-size: 0.875rem;
font-family: inherit;
resize: vertical;
transition: border-color 0.15s ease;
line-height: 1.4;
}

.timeline-input:focus {
outline: none;
border-color: var(--accent-color);
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1);
min-height: 120px;
}

.timeline-input.task-it-active {
background-color: var(--ti-yellow-color);
border-color: var(--ti-yellow-color);
color: #000;
}

.timeline-input.task-it-active:focus {
background-color: var(--ti-yellow-color);
box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.3);
}

.timeline-actions {
display: flex;
align-items: center;
gap: var(--space-md);
}

.timeline-checkbox {
width: 18px;
height: 18px;
border: 2px solid var(--border-color);
border-radius: 4px;
background: var(--bg-primary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
user-select: none;
flex-shrink: 0;
}

.timeline-checkbox:hover {
border-color: var(--accent-color);
background: var(--hover-bg);
transform: scale(1.1);
}

.timeline-checkbox:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2), 0 3px 8px rgba(0, 0, 0, 0.2);
}

.timeline-checkbox:active {
transform: scale(0.95);
}

.timeline-checkbox.checked {
background: var(--success-color);
border-color: var(--success-color);
color: white;
transform: scale(1.05);
}

.timeline-checkbox.checked::before {
content: '';
position: absolute;
width: 6px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
margin-top: -2px;
}

/* Animation for timeline checkbox completion */
.timeline-checkbox.completing {
animation: timeline-checkbox-complete 0.4s ease-out;
}

@keyframes timeline-checkbox-complete {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
background: var(--success-color);
}
100% {
transform: scale(1.05);
}
}

.timeline-entry.completed {
background: var(--bg-tertiary);
border-left: 3px solid var(--success-color);
opacity: 0.9;
}

.timeline-prefix.done {
color: var(--success-color);
font-weight: 800;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.timeline-input.completed {
background: var(--bg-tertiary);
color: var(--text-secondary);
border-color: var(--success-color);
opacity: 0.8;
}

.timeline-input:disabled {
background: var(--bg-tertiary);
color: var(--text-muted);
cursor: not-allowed;
opacity: 0.6;
}

.ti-button {
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
color: var(--text-secondary);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--border-radius-small);
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
margin-right: var(--space-sm);
}

.ti-button:hover {
background: var(--ti-yellow-color);
border-color: var(--ti-yellow-color);
color: #000;
}

.ti-button.active {
background: var(--ti-yellow-color);
border-color: var(--ti-yellow-color);
color: #000;
}

/* Complete (C) Button Styles */
.complete-button {
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
color: var(--text-secondary);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--border-radius-small);
font-size: 12px;
cursor: pointer;
transition: all 0.2s ease;
margin-right: var(--space-sm);
}

.complete-button:hover {
background: var(--completed-green-color);
border-color: var(--completed-green-color);
color: #fff;
}

.complete-button.active {
background: var(--completed-green-color);
border-color: var(--completed-green-color);
color: #fff;
}

/* Timeline entry completed state */
.timeline-input.completed {
background-color: #e8f5e9;
border-color: var(--completed-green-color);
color: #2e7d32;
}

.timeline-input.completed:focus {
background-color: #e8f5e9;
box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3);
}

/* Ensure completed state takes precedence over task-it-active */
.timeline-input.task-it-active.completed,
.timeline-input.completed.task-it-active {
background-color: #e8f5e9 !important;
border-color: var(--completed-green-color) !important;
color: #2e7d32 !important;
}

.timeline-input.task-it-active.completed:focus,
.timeline-input.completed.task-it-active:focus {
background-color: #e8f5e9 !important;
box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3) !important;
}

/* Timeline summary display */
.timeline-summary {
margin-top: var(--space-sm);
padding: var(--space-sm);
background-color: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-small);
font-size: 13px;
}

.timeline-summary .summary-content {
color: var(--text-secondary);
}

.timeline-summary .summary-content strong {
color: var(--text-primary);
}

/* Summary input field styles */
.timeline-summary-input {
margin-top: var(--space-sm);
padding: var(--space-md);
background-color: transparent;
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
animation: slideInDown 0.3s ease-out;
}

.summary-input-container {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}

.summary-label {
font-weight: 600;
color: var(--text-primary);
font-size: 14px;
}

.summary-textarea {
width: 100%;
min-height: 60px;
padding: var(--space-sm);
background-color: var(--input-bg);
color: var(--text-primary);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-small);
font-family: inherit;
font-size: 14px;
resize: vertical;
}

.summary-textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1);
}

.summary-actions {
display: flex;
gap: var(--space-sm);
justify-content: flex-end;
}

/* Summary display field styles */
.timeline-summary-display {
margin-top: var(--space-sm);
padding: var(--space-md);
background-color: transparent;
border: 1px solid #ddd;
border-radius: var(--border-radius);
animation: slideInDown 0.3s ease-out;
}

.summary-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-xs);
}

.summary-edit-btn {
background: none;
border: none;
cursor: pointer;
padding: var(--space-xs);
border-radius: var(--border-radius-small);
font-size: 12px;
opacity: 0.7;
}

.summary-edit-btn:hover {
opacity: 1;
background-color: rgba(255, 255, 255, 0.3);
}

.summary-text {
color: var(--text-primary);
font-size: 14px;
line-height: 1.4;
}

/* Animation for summary fields - GPU accelerated */
@keyframes slideInDown {
to {
opacity: 1;
transform: translateY(0);
}
}

/* Mobile-specific timeline summary positioning */
@media (max-width: 768px) {
/* Ensure timeline entries stack properly on mobile */
.timeline-entry {
display: block;
width: 100%;
margin-bottom: var(--space-md);
}

/* Summary fields directly beneath completed fields on mobile */
.timeline-summary-input,
.timeline-summary-display {
width: 100%;
margin-top: var(--space-sm);
margin-bottom: var(--space-sm);
padding: var(--space-sm);
font-size: 14px;
}

/* Mobile summary input styling */
.timeline-summary-input .summary-textarea {
width: 100%;
min-height: 80px;
font-size: 16px; /* Prevent zoom on iOS */
padding: var(--space-sm);
}

/* Mobile summary actions */
.timeline-summary-input .summary-actions {
flex-direction: row;
justify-content: space-between;
width: 100%;
margin-top: var(--space-sm);
}

.timeline-summary-input .summary-actions .btn {
flex: 1;
margin: 0 var(--space-xs);
padding: var(--space-sm);
font-size: 14px;
}

/* Mobile summary display */
.timeline-summary-display {
background-color: transparent;
border: 1px solid #ddd;
}

.timeline-summary-display .summary-header {
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-sm);
}

.timeline-summary-display .summary-text {
font-size: 14px;
line-height: 1.5;
word-break: break-word;
}

/* Ensure summary edit button is touch-friendly */
.timeline-summary-display .summary-edit-btn {
min-width: 44px;
min-height: 44px;
padding: var(--space-sm);
font-size: 16px;
}

/* Mobile timeline input adjustments */
.timeline-input {
width: 100%;
min-height: 80px;
font-size: 16px; /* Prevent zoom on iOS */
margin-bottom: var(--space-sm);
}

/* Mobile timeline actions */
.timeline-actions {
flex-direction: row;
gap: var(--space-sm);
margin-top: var(--space-sm);
}

.timeline-actions .ti-button,
.timeline-actions .complete-button {
min-width: 44px;
min-height: 44px;
font-size: 16px;
padding: var(--space-sm);
}
}


/* ENHANCED DEADLINE CARDS - Mobile Optimized */
.deadline-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
margin-bottom: var(--space-md);
padding: var(--space-lg);
transition: all 0.3s ease;
cursor: pointer;
position: relative;
overflow: hidden;
}

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

.deadline-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-md);
}

/* Progress bar styles */
.deadline-progress-container {
margin-top: var(--space-md);
position: relative;
height: 4px;
background: var(--border-color);
border-radius: 2px;
overflow: hidden;
}

.deadline-progress-bar {
height: 100%;
border-radius: 2px;
position: relative;
width: 0%;
transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.deadline-progress-bar::after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(90deg, 
transparent, 
rgba(255, 255, 255, 0.2), 
transparent
);
transform: translateX(-100%);
animation: progressShimmer 2s ease-in-out infinite;
}

@keyframes progressShimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}

/* Progress bar colors based on deadline status */
.deadline-progress-bar.progress-distant {
background: var(--deadline-distant);
}

.deadline-progress-bar.progress-safe {
background: var(--deadline-safe);
}

.deadline-progress-bar.progress-caution {
background: var(--deadline-caution);
}

.deadline-progress-bar.progress-warning {
background: var(--deadline-warning);
}

.deadline-progress-bar.progress-urgent {
background: var(--deadline-urgent);
}

.deadline-progress-bar.progress-critical {
background: var(--deadline-critical);
}

.deadline-progress-bar.progress-no-date {
background: var(--deadline-no-date);
}

/* Pulsing animation for critical deadlines */
.deadline-progress-bar.progress-critical {
animation: progressPulse 1s ease-in-out infinite alternate;
}

@keyframes progressPulse {
0% {
opacity: 0.8;
}
100% {
opacity: 1;
}
}

.deadline-task-info {
flex: 1;
min-width: 0;
}

.deadline-task-name {
font-size: 1rem;
font-weight: 600;
margin-bottom: var(--space-xs);
word-wrap: break-word;
}

.deadline-task-meta {
font-size: 0.75rem;
color: var(--text-secondary);
}

.deadline-task-letter {
width: 32px;
height: 32px;
border-radius: var(--border-radius-small);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
font-weight: 600;
color: white;
flex-shrink: 0;
}

/* PROGRESS BAR MODAL */
.progress-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: var(--space-xl);
/* z-index handled dynamically by ModalManager */
display: none;
max-width: 90vw;
width: 400px;
box-shadow: var(--shadow-medium);
}

.progress-modal.active {
display: block;
}

.progress-modal-header {
text-align: center;
margin-bottom: var(--space-xl);
}

.progress-modal-title {
font-size: 1.125rem;
font-weight: 600;
margin-bottom: var(--space-sm);
}

.progress-modal-description {
font-size: 0.875rem;
color: var(--text-secondary);
line-height: 1.4;
}

.deadline-progress-container {
height: 12px;
background: var(--bg-tertiary);
border-radius: 6px;
overflow: hidden;
position: relative;
margin: var(--space-lg) 0;
}

.deadline-progress-fill {
height: 100%;
border-radius: 6px;
transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
overflow: hidden;
}

.deadline-progress-fill.distant {
background: linear-gradient(90deg, var(--deadline-distant), #333333);
}

.deadline-progress-fill.safe {
background: linear-gradient(90deg, var(--deadline-safe), #00c975);
}

.deadline-progress-fill.caution {
background: linear-gradient(90deg, var(--deadline-caution), #ff33ff);
}

.deadline-progress-fill.warning {
background: linear-gradient(90deg, var(--deadline-warning), #d4a017);
}

.deadline-progress-fill.urgent {
background: linear-gradient(90deg, var(--deadline-urgent), #ffb347);
}

.deadline-progress-fill.critical {
background: linear-gradient(90deg, var(--deadline-critical), #e74c3c);
animation: pulse-critical 2s infinite;
}

.deadline-progress-fill.no-date {
background: linear-gradient(90deg, var(--deadline-no-date), #333333);
}

@keyframes pulse-critical {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}

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

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


/* Type-specific styling */
.task-item.level-0 {
border-left-color: var(--accent-color);
}

.subtask-item.level-1 {
border-left-color: var(--success-color);
}

.timeline-item.level-2 {
border-left-color: var(--warning-color);
}




.subtask_deleted-item {
background: var(--bg-danger);
border-left: 4px solid var(--danger-color);
}

.timeline-item {
background: var(--bg-info);
border-left: 4px solid var(--info-color);
}

.other-item {
background: var(--bg-tertiary);
border-left: 4px solid var(--border-color);
}


/* Repeated Task Styling */
.repeated-task-item {
background: var(--bg-card);
border-left: 4px solid var(--accent-color);
border-radius: var(--border-radius);
margin-bottom: var(--space-md);
overflow: hidden;
}

.repeated-task-item:hover {
background: var(--hover-bg);
border-left-color: var(--accent-color);
transform: translateX(2px);
}

.repeated-task-header {
cursor: pointer;
padding: var(--space-xs);
transition: background-color 0.2s ease;
}

.repeated-task-header:hover {
background: var(--bg-tertiary);
}

.repeated-task-title {
display: flex;
align-items: center;
gap: var(--space-sm);
font-weight: 600;
}

.repeated-task-name {
color: var(--text-primary);
font-size: 1rem;
}

.repeated-task-count {
color: var(--text-secondary);
font-size: 0.875rem;
font-weight: 500;
}

.repeated-task-expand-icon {
color: var(--accent-color);
font-size: 1.2rem;
margin-left: auto;
transition: transform 0.2s ease;
}

.repeated-task-completions {
border-top: 1px solid var(--border-color);
background: var(--bg-tertiary);
padding: var(--space-md);
}

.repeated-task-completion-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-sm);
margin-bottom: var(--space-xs);
background: var(--bg-card);
border-radius: var(--border-radius-small);
border-left: 3px solid var(--success-color);
transition: all 0.2s ease;
}

.repeated-task-completion-item:hover {
background: var(--hover-bg);
transform: translateX(2px);
}

.repeated-task-completion-item:last-child {
margin-bottom: 0;
}

.completion-item-content {
display: flex;
align-items: center;
gap: var(--space-sm);
flex: 1;
}

.completion-icon {
color: var(--success-color);
font-size: 1rem;
}

.completion-time {
color: var(--text-primary);
font-size: 0.875rem;
font-weight: 500;
}

.completion-details {
color: var(--text-secondary);
font-size: 0.75rem;
font-style: italic;
}

.completion-remove-btn {
background: transparent;
border: none;
color: var(--text-muted);
cursor: pointer;
padding: var(--space-xs);
border-radius: var(--border-radius-small);
transition: all 0.2s ease;
min-width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}

.completion-remove-btn:hover {
background: var(--danger-bg);
color: var(--danger-color);
transform: scale(1.1);
}






/* UNDO/REDO CONTROLS */
.undo-redo-controls {
position: fixed;
bottom: var(--space-xl);
left: var(--space-xl);
display: flex;
gap: var(--space-sm);
z-index: var(--z-floating);
}

/* Desktop: offset undo/redo past the sidebar */
@media (min-width: 1025px) {
    body.logged-in .undo-redo-controls {
        left: calc(200px + var(--space-xl));
    }
}

.undo-btn, .redo-btn {
width: 48px;
height: 48px;
border-radius: 50%;
border: none;
cursor: pointer;
font-size: 1.25rem;
box-shadow: var(--shadow-medium);
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}

.undo-btn {
background: var(--warning-color);
color: white;
}

.redo-btn {
background: var(--accent-color);
color: white;
}

.undo-btn:hover, .redo-btn:hover {
transform: scale(1.1);
}

.undo-btn:disabled, .redo-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}

/* LETTER BADGES */
.task-letter {
width: 24px;
height: 24px;
border-radius: var(--border-radius-small);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 600;
color: white;
flex-shrink: 0;
}

.list-letter-badge {
width: 32px;
height: 32px;
border-radius: var(--border-radius-small);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
font-weight: 600;
color: white;
}

/* Colored borders and badges */
.task-border-A::before, .list-border-A::before, .nested-list-border-A::before { background: #ff3b30; opacity: 1; }
.task-border-B::before, .list-border-B::before, .nested-list-border-B::before { background: #ff9500; opacity: 1; }
.task-border-C::before, .list-border-C::before, .nested-list-border-C::before { background: #ffcc00; opacity: 1; }
.task-border-D::before, .list-border-D::before, .nested-list-border-D::before { background: #34c759; opacity: 1; }
.task-border-E::before, .list-border-E::before, .nested-list-border-E::before { background: #00d4aa; opacity: 1; }
.task-border-F::before, .list-border-F::before, .nested-list-border-F::before { background: #007AFF; opacity: 1; }
.task-border-G::before, .list-border-G::before, .nested-list-border-G::before { background: #5856d6; opacity: 1; }
.task-border-H::before, .list-border-H::before, .nested-list-border-H::before { background: #af52de; opacity: 1; }
.task-border-I::before, .list-border-I::before, .nested-list-border-I::before { background: #ff2d92; opacity: 1; }
.task-border-J::before, .list-border-J::before, .nested-list-border-J::before { background: #ff6b6b; opacity: 1; }
.task-border-K::before, .list-border-K::before, .nested-list-border-K::before { background: #6c757d; opacity: 1; }
.task-border-L::before, .list-border-L::before, .nested-list-border-L::before { background: #495057; opacity: 1; }
.task-border-M::before, .list-border-M::before, .nested-list-border-M::before { background: #fd7e14; opacity: 1; }
.task-border-N::before, .list-border-N::before, .nested-list-border-N::before { background: #20c997; opacity: 1; }
.task-border-O::before, .list-border-O::before, .nested-list-border-O::before { background: #6f42c1; opacity: 1; }
.task-border-P::before, .list-border-P::before, .nested-list-border-P::before { background: #e83e8c; opacity: 1; }
.task-border-Q::before, .list-border-Q::before, .nested-list-border-Q::before { background: #17a2b8; opacity: 1; }
.task-border-R::before, .list-border-R::before, .nested-list-border-R::before { background: #28a745; opacity: 1; }
.task-border-S::before, .list-border-S::before, .nested-list-border-S::before { background: #ffc107; opacity: 1; }
.task-border-T::before, .list-border-T::before, .nested-list-border-T::before { background: #dc3545; opacity: 1; }
.task-border-U::before, .list-border-U::before, .nested-list-border-U::before { background: #6610f2; opacity: 1; }
.task-border-V::before, .list-border-V::before, .nested-list-border-V::before { background: #e067fd; opacity: 1; }
.task-border-W::before, .list-border-W::before, .nested-list-border-W::before { background: #fd9644; opacity: 1; }
.task-border-X::before, .list-border-X::before, .nested-list-border-X::before { background: #20c9a6; opacity: 1; }
.task-border-Y::before, .list-border-Y::before, .nested-list-border-Y::before { background: #9254de; opacity: 1; }
.task-border-Z::before, .list-border-Z::before, .nested-list-border-Z::before { background: #f759ab; opacity: 1; }
.task-border-Starter::before, .list-border-Starter::before, .nested-list-border-Starter::before { background: #ff6b35; opacity: 1; }

.task-letter.letter-A { background: #ff3b30; }
.task-letter.letter-B { background: #ff9500; }
.task-letter.letter-C { background: #ffcc00; }
.task-letter.letter-D { background: #34c759; }
.task-letter.letter-E { background: #00d4aa; }
.task-letter.letter-F { background: #007AFF; }
.task-letter.letter-G { background: #5856d6; }
.task-letter.letter-H { background: #af52de; }
.task-letter.letter-I { background: #ff2d92; }
.task-letter.letter-J { background: #ff6b6b; }
.task-letter.letter-K { background: #6c757d; }
.task-letter.letter-L { background: #495057; }
.task-letter.letter-M { background: #fd7e14; }
.task-letter.letter-N { background: #20c997; }
.task-letter.letter-O { background: #6f42c1; }
.task-letter.letter-P { background: #e83e8c; }
.task-letter.letter-Q { background: #17a2b8; }
.task-letter.letter-R { background: #28a745; }
.task-letter.letter-S { background: #ffc107; }
.task-letter.letter-T { background: #dc3545; }
.task-letter.letter-U { background: #6610f2; }
.task-letter.letter-V { background: #e067fd; }
.task-letter.letter-W { background: #fd9644; }
.task-letter.letter-X { background: #20c9a6; }
.task-letter.letter-Y { background: #9254de; }
.task-letter.letter-Z { background: #f759ab; }
.task-letter.letter-Starter { background: #ff6b35; }

.list-letter-badge.letter-A { background: #ff3b30; }
.list-letter-badge.letter-B { background: #ff9500; }
.list-letter-badge.letter-C { background: #ffcc00; }
.list-letter-badge.letter-D { background: #34c759; }
.list-letter-badge.letter-E { background: #00d4aa; }
.list-letter-badge.letter-F { background: #007AFF; }
.list-letter-badge.letter-G { background: #5856d6; }
.list-letter-badge.letter-H { background: #af52de; }
.list-letter-badge.letter-I { background: #ff2d92; }
.list-letter-badge.letter-J { background: #ff6b6b; }
.list-letter-badge.letter-K { background: #6c757d; }
.list-letter-badge.letter-L { background: #495057; }
.list-letter-badge.letter-M { background: #fd7e14; }
.list-letter-badge.letter-N { background: #20c997; }
.list-letter-badge.letter-O { background: #6f42c1; }
.list-letter-badge.letter-P { background: #e83e8c; }
.list-letter-badge.letter-Q { background: #17a2b8; }
.list-letter-badge.letter-R { background: #28a745; }
.list-letter-badge.letter-S { background: #ffc107; }
.list-letter-badge.letter-T { background: #dc3545; }
.list-letter-badge.letter-U { background: #6610f2; }
.list-letter-badge.letter-V { background: #e067fd; }
.list-letter-badge.letter-W { background: #fd9644; }
.list-letter-badge.letter-X { background: #20c9a6; }
.list-letter-badge.letter-Y { background: #9254de; }
.list-letter-badge.letter-Z { background: #f759ab; }
.list-letter-badge.letter-Starter { background: #ff6b35; }

.deadline-task-letter.letter-A { background: #ff3b30; }
.deadline-task-letter.letter-B { background: #ff9500; }
.deadline-task-letter.letter-C { background: #ffcc00; }
.deadline-task-letter.letter-D { background: #34c759; }
.deadline-task-letter.letter-E { background: #00d4aa; }
.deadline-task-letter.letter-F { background: #007AFF; }
.deadline-task-letter.letter-G { background: #5856d6; }
.deadline-task-letter.letter-H { background: #af52de; }
.deadline-task-letter.letter-I { background: #ff2d92; }
.deadline-task-letter.letter-J { background: #ff6b6b; }
.deadline-task-letter.letter-K { background: #6c757d; }
.deadline-task-letter.letter-L { background: #495057; }
.deadline-task-letter.letter-M { background: #fd7e14; }
.deadline-task-letter.letter-N { background: #20c997; }
.deadline-task-letter.letter-O { background: #6f42c1; }
.deadline-task-letter.letter-P { background: #e83e8c; }
.deadline-task-letter.letter-Q { background: #17a2b8; }
.deadline-task-letter.letter-R { background: #28a745; }
.deadline-task-letter.letter-S { background: #ffc107; }
.deadline-task-letter.letter-T { background: #dc3545; }
.deadline-task-letter.letter-U { background: #6610f2; }
.deadline-task-letter.letter-V { background: #e067fd; }
.deadline-task-letter.letter-W { background: #fd9644; }
.deadline-task-letter.letter-X { background: #20c9a6; }
.deadline-task-letter.letter-Y { background: #9254de; }
.deadline-task-letter.letter-Z { background: #f759ab; }
.deadline-task-letter.letter-Starter { background: #ff6b35; }

.deadline-category-task-letter.letter-A { background: #ff3b30; }
.deadline-category-task-letter.letter-B { background: #ff9500; }
.deadline-category-task-letter.letter-C { background: #ffcc00; }
.deadline-category-task-letter.letter-D { background: #34c759; }
.deadline-category-task-letter.letter-E { background: #00d4aa; }
.deadline-category-task-letter.letter-F { background: #007AFF; }
.deadline-category-task-letter.letter-G { background: #5856d6; }
.deadline-category-task-letter.letter-H { background: #af52de; }
.deadline-category-task-letter.letter-I { background: #ff2d92; }
.deadline-category-task-letter.letter-J { background: #fd9644; }
.deadline-category-task-letter.letter-K { background: #20c9a6; }
.deadline-category-task-letter.letter-L { background: #9254de; }
.deadline-category-task-letter.letter-M { background: #f759ab; }
.deadline-category-task-letter.letter-N { background: #6f42c1; }
.deadline-category-task-letter.letter-O { background: #6f42c1; }
.deadline-category-task-letter.letter-P { background: #e83e8c; }
.deadline-category-task-letter.letter-Q { background: #17a2b8; }
.deadline-category-task-letter.letter-R { background: #28a745; }
.deadline-category-task-letter.letter-S { background: #ffc107; }
.deadline-category-task-letter.letter-T { background: #dc3545; }
.deadline-category-task-letter.letter-U { background: #6610f2; }
.deadline-category-task-letter.letter-V { background: #e067fd; }
.deadline-category-task-letter.letter-W { background: #fd9644; }
.deadline-category-task-letter.letter-X { background: #20c9a6; }
.deadline-category-task-letter.letter-Y { background: #9254de; }
.deadline-category-task-letter.letter-Z { background: #f759ab; }
.deadline-category-task-letter.letter-Starter { background: #ff6b35; }

/* DEADLINE STATISTICS */
.deadline-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: var(--space-md);
margin-bottom: var(--space-xl);
}

.deadline-stat {
text-align: center;
padding: var(--space-lg);
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
transition: all 0.2s ease;
}

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

.deadline-stat-number {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: var(--space-xs);
line-height: 1;
}

.deadline-stat-label {
font-size: 0.75rem;
color: var(--text-secondary);
font-weight: 500;
}

.deadline-stat.distant .deadline-stat-number { color: var(--deadline-distant); }
.deadline-stat.safe .deadline-stat-number { color: var(--deadline-safe); }
.deadline-stat.caution .deadline-stat-number { color: var(--deadline-caution); }
.deadline-stat.warning .deadline-stat-number { color: var(--deadline-warning); }
.deadline-stat.urgent .deadline-stat-number { color: var(--deadline-urgent); }
.deadline-stat.critical .deadline-stat-number { color: var(--deadline-critical); }
.deadline-stat.no-date .deadline-stat-number { color: var(--text-secondary); }

/* DEADLINE CATEGORY HEADERS */
.deadline-category-header {
margin: var(--space-xl) 0 var(--space-md) 0;
padding: var(--space-md) 0;
border-bottom: 2px solid var(--border-color);
}

.deadline-category-header:first-child {
margin-top: 0;
}

.deadline-category-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-primary);
margin: 0;
display: flex;
align-items: center;
gap: var(--space-sm);
}

/* CLEAN BUTTONS */
/* STANDARDIZED BUTTON SYSTEM */
.btn {
background: var(--bg-card);
color: var(--text-primary);
border: 1px solid var(--border-color);
padding: var(--space-sm) var(--space-lg);
border-radius: var(--border-radius-small);
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
text-decoration: none;
position: relative;
overflow: hidden;
user-select: none;
/* Ensure proper touch targets */
min-height: 44px;
min-width: 44px;
/* Accessibility improvements */
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}

.btn:hover {
background: var(--hover-bg);
border-color: var(--border-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-soft);
}

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

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

/* Keyboard navigation improvements */
.btn:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
}

.btn:focus:not(:focus-visible) {
outline: none;
}

/* Focus-visible styles for all interactive elements */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex="0"]:focus-visible {
outline: 2px solid var(--primary-color, #6c63ff);
outline-offset: 2px;
}

/* Skip link for accessibility */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--primary-color, #6c63ff);
color: white;
padding: 8px 16px;
z-index: 100000;
transition: top 0.3s;
text-decoration: none;
font-weight: bold;
border-radius: 4px;
font-size: 0.875rem;
}

.skip-link:focus {
top: 0;
}

/* Screen reader only - visually hidden but accessible */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

/* Timeline completion controls */
.timeline-header-actions {
display: flex;
gap: var(--space-sm);
align-items: center;
}

.timeline-complete-tick {
background: none;
border: none;
cursor: pointer;
padding: 0;
transition: all 0.3s ease;
}

.timeline-complete-tick:hover {
transform: scale(1.1);
}

.complete-tick-circle {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--success-color);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
font-weight: bold;
box-shadow: var(--shadow-soft);
transition: all 0.3s ease;
}

.complete-tick-circle:hover {
background: var(--success-color);
filter: brightness(1.1);
box-shadow: var(--shadow-medium);
}

.timeline-reactivate-btn {
background: none;
border: none;
cursor: pointer;
padding: 0;
transition: all 0.3s ease;
}

.timeline-reactivate-btn:hover {
transform: scale(1.1);
}

.reactivate-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--warning-color);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
font-weight: bold;
box-shadow: var(--shadow-soft);
transition: all 0.3s ease;
}

.reactivate-icon:hover {
background: var(--warning-color);
filter: brightness(1.1);
box-shadow: var(--shadow-medium);
}

.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}

.btn:disabled:hover {
background: var(--bg-card);
border-color: var(--border-color);
transform: none;
}

/* Button sizes */
.btn-sm {
padding: var(--space-xs) var(--space-sm);
font-size: 0.75rem;
min-height: 32px;
min-width: 32px;
}

.btn-lg {
padding: var(--space-md) var(--space-xl);
font-size: 1rem;
min-height: 48px;
min-width: 48px;
}

/* Button variants */

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

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

.btn-primary:active {
filter: brightness(0.9);
}

.btn-success {
background: var(--success-color);
border-color: var(--success-color);
color: #000000;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.btn-danger {
background: var(--danger-color);
border-color: var(--danger-color);
color: white;
}

.btn-warning {
background: var(--warning-color);
border-color: var(--warning-color);
color: #000000;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.btn-sm {
padding: var(--space-xs) var(--space-md);
font-size: 0.75rem;
}

/* Outline button variants for Lite sync */
.btn-outline-primary {
    background: transparent;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
}

.btn-outline-primary:hover {
    background: var(--accent-color);
    color: white;
}

.btn-outline-success {
    background: transparent;
    border: 1px solid var(--success-color);
    color: var(--success-color);
}

.btn-outline-success:hover {
    background: var(--success-color);
    color: #000000;
}

/* Lite sync action buttons container */
/* COVERT ACTIONS */
.covert-delete {
opacity: 0;
transform: translateX(10px);
transition: all 0.2s ease;
pointer-events: none;
background: var(--danger-color);
color: white;
border: none;
width: 28px;
height: 28px;
border-radius: 50%;
cursor: pointer;
font-size: 0.875rem;
display: flex;
align-items: center;
justify-content: center;
}

.group-header:hover .covert-delete,
.nested-list-item:hover .covert-delete {
opacity: 1;
transform: translateX(0);
pointer-events: all;
}

.covert-delete:hover {
transform: scale(1.1);
}

/* CHEVRONS */
.task-chevron {
color: var(--text-muted);
font-size: 0.75rem;
transition: all 0.2s ease;
cursor: pointer;
user-select: none;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
background: var(--bg-tertiary);
}

.task-chevron:hover {
background: var(--hover-bg);
color: var(--text-primary);
}

.task-chevron.expanded {
transform: rotate(90deg);
background: var(--accent-color);
color: white;
}

/* PROGRESS BARS */
.progress-bar {
width: 100%;
height: 4px;
background: var(--bg-tertiary);
border-radius: 2px;
overflow: hidden;
margin: var(--space-sm) 0;
}

.progress-fill {
height: 100%;
background: var(--success-color);
transition: width 0.3s ease;
border-radius: 2px;
}

/* Enhanced progress bar with text */
.subtask-progress-container {
margin: var(--space-sm) 0;
}

.subtask-progress-text {
font-size: 0.75rem;
color: var(--text-muted);
margin-bottom: var(--space-xs);
display: flex;
justify-content: space-between;
align-items: center;
}

.subtask-progress-bar {
width: 100%;
height: 4px;
background: var(--bg-tertiary);
border-radius: 2px;
overflow: hidden;
position: relative;
}

.subtask-progress-fill {
height: 100%;
background: var(--success-color);
transition: width 0.3s ease;
border-radius: 2px;
}

.subtask-progress-container.completed .subtask-progress-fill {
background: var(--success-color);
}

.subtask-progress-container.in-progress .subtask-progress-fill {
background: var(--warning-color);
}

.subtask-progress-container.pending .subtask-progress-fill {
background: var(--text-muted);
}

/* PROGRESS SECTIONS */
.focus-progress-section {
margin-bottom: var(--space-2xl);
}

.focus-progress-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: var(--space-xl);
margin-bottom: var(--space-xl);
}

.focus-progress-title {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: var(--space-xl);
text-align: center;
color: var(--text-primary);
}

.focus-progress-item {
margin-bottom: var(--space-lg);
}

.focus-progress-label {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-sm);
font-weight: 500;
}

.focus-progress-bar {
height: 6px;
border-radius: 3px;
overflow: hidden;
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
}

.focus-progress-fill {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 0.75rem;
transition: all 0.3s ease;
border-radius: 2px;
}

.progress-level-0 { background: var(--text-muted); }
.progress-level-1 { background: #ff3b30; }
.progress-level-2 { background: #ff9500; }
.progress-level-3 { background: #af52de; }
.progress-level-4 { background: #34c759; }
.progress-level-5 { background: #00d4aa; }

.performance-indicator {
margin-top: var(--space-sm);
font-size: 0.75rem;
color: var(--text-muted);
font-style: italic;
}

/* SETTINGS */
#settingsPage .page-content {
padding-top: var(--space-md);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-md);
max-width: 1100px;
margin: 0 auto;
}

@media (max-width: 768px) {
#settingsPage .page-content {
    grid-template-columns: 1fr;
}

/* Mobile settings fixes — larger touch targets, readable text, full-width buttons */
#settingsPage .settings-section .btn,
#settingsPage .settings-button {
    min-height: 44px;
    font-size: 0.875rem;
    padding: 10px 16px;
}

#settingsPage .settings-row {
    flex-wrap: wrap;
    min-height: 48px;
    padding: 12px 0;
    gap: 8px;
}

/* Stack label + button vertically on mobile for data/sync rows */
#settingsPage .settings-row > div:not(.toggle) {
    flex: 1 1 100%;
}

#settingsPage .settings-row .btn {
    width: 100%;
    justify-content: center;
}

/* Keep toggle rows horizontal (label left, toggle right) */
#settingsPage .settings-row:has(.toggle) {
    flex-wrap: nowrap;
}

#settingsPage .settings-row:has(.toggle) > div:first-child {
    flex: 1 1 auto;
}

#settingsPage .toggle {
    min-width: 48px;
    min-height: 28px;
    flex-shrink: 0;
}
}

.settings-section {
margin-bottom: 0;
padding: var(--space-md) var(--space-lg);
align-self: start;
}

.settings-section h2 {
font-size: 0.9375rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-md);
padding-bottom: var(--space-sm);
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
gap: var(--space-sm);
}

.settings-section h3 {
color: var(--text-primary);
margin-bottom: var(--space-sm);
font-size: 0.875rem;
font-weight: 600;
text-align: center;
}

.settings-button {
width: 100%;
margin-bottom: var(--space-sm);
justify-content: center;
font-size: 0.8125rem;
padding: 8px var(--space-md);
}

.settings-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--border-color);
gap: var(--space-md);
}

.settings-row:last-child {
border-bottom: none;
padding-bottom: 0;
}

.settings-row:first-of-type {
padding-top: 0;
}

.settings-label {
color: var(--text-primary);
font-weight: 600;
font-size: 0.8125rem;
}

.settings-description {
color: var(--text-secondary);
font-size: 0.8125rem;
margin-top: 2px;
line-height: 1.4;
}

.settings-section .form-group {
margin-bottom: var(--space-sm);
}

.settings-section .form-group .form-label {
font-size: 0.8125rem;
margin-bottom: 4px;
}

.settings-section .form-group .form-input {
padding: 6px var(--space-sm);
font-size: 0.8125rem;
}

.settings-section .btn {
font-size: 0.8125rem;
padding: 8px var(--space-md);
}

/* MODALS */
/* Lock body scrolling when modal is open */
body.modal-open {
overflow: hidden !important;
height: 100vh !important;
}

.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
/* z-index handled dynamically by ModalManager */
padding: var(--space-md);
backdrop-filter: blur(8px);
align-items: center;
justify-content: center;
overflow: auto;  /* Prevent background scrolling and enable modal scrolling */
}

.modal.active {
display: flex;
/* 2026-05-29 — Base z-index floor for modals opened via classList.add('active')
   that bypass ModalManager (e.g. #newNoteGroupModal, #addPointModal). Without
   this they got z-index:auto and page elements with their own stacking
   contexts (Notes mode-bar, MUST READ badge) painted ON TOP of the modal.
   ModalManager-opened modals set an inline style.zIndex which still wins. */
z-index: 200000;
}

/* Confirm dialog must sit above bulk operations and context menus */
#confirmModal.active {
    z-index: 200000 !important;
}

.modal-content {
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: var(--space-2xl);
width: 100%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
position: relative;
transition: all 0.3s ease;
box-shadow: var(--shadow-medium);
}

.modal-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: var(--space-xl);
padding-bottom: var(--space-lg);
border-bottom: 1px solid var(--border-color);
gap: var(--space-md);
min-width: 0;
}

.modal-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-primary);
flex: 1;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
line-height: 1.4;
min-width: 0;
max-width: calc(100% - 60px);
}

.close-btn {
background: var(--danger-color);
border: none;
font-size: 1.1rem;
cursor: pointer;
color: white;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.2s ease;
flex-shrink: 0;
margin-top: 2px;
}

.close-btn:hover {
transform: scale(1.1);
}

/* TASK INFO MODAL STYLES */
.task-info-section {
margin-bottom: var(--space-lg);
padding: var(--space-lg);
background: var(--bg-tertiary);
border-radius: var(--border-radius-small);
border: 1px solid var(--border-color);
}

.task-info-label {
display: flex;
align-items: center;
gap: var(--space-sm);
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-sm);
font-size: 0.875rem;
}

.task-info-label .icon {
color: var(--accent-color);
}

.task-info-value {
color: var(--text-secondary);
line-height: 1.5;
word-wrap: break-word;
overflow-wrap: break-word;
white-space: pre-wrap;
}

/* DEADLINE CATEGORY MODAL STYLES */
.deadline-category-info {
margin-bottom: var(--space-xl);
padding: var(--space-lg);
background: var(--bg-tertiary);
border-radius: var(--border-radius-small);
border: 1px solid var(--border-color);
}

.deadline-category-description {
font-size: 0.875rem;
color: var(--text-secondary);
margin-bottom: var(--space-sm);
line-height: 1.4;
}

.deadline-category-count {
font-size: 0.75rem;
color: var(--text-muted);
font-weight: 500;
}

.deadline-category-tasks-container {
max-height: 400px;
overflow-y: auto;
padding: var(--space-xs);
}

.deadline-category-task-item {
display: flex;
align-items: center;
padding: var(--space-md);
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-small);
margin-bottom: var(--space-sm);
transition: all 0.2s ease;
cursor: pointer;
}

.deadline-category-task-item:hover {
background: var(--hover-bg);
border-color: var(--border-hover);
transform: translateY(-1px);
}

.deadline-category-task-item:last-child {
margin-bottom: 0;
}

.deadline-category-task-content {
flex: 1;
margin-right: var(--space-md);
}

.deadline-category-task-name {
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-xs);
font-size: 0.875rem;
}

.deadline-category-task-meta {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: 0.75rem;
color: var(--text-secondary);
}

.deadline-category-task-due {
font-weight: 500;
}

.deadline-category-task-bonus {
color: var(--success-color);
font-weight: 500;
}

.deadline-category-task-repeat {
color: var(--accent-color);
}

.deadline-category-task-letter {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.75rem;
color: white;
flex-shrink: 0;
margin-right: var(--space-md);
}

.deadline-category-progress-container {
margin-top: var(--space-sm);
position: relative;
}

.deadline-category-progress-bar {
width: 100%;
height: 4px;
background: var(--bg-tertiary);
border-radius: 2px;
overflow: hidden;
}

.deadline-category-progress-fill {
height: 100%;
background: var(--accent-color);
transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 2px;
}

.deadline-category-progress-fill.critical {
background: var(--deadline-critical);
}

.deadline-category-progress-fill.urgent {
background: var(--deadline-urgent);
}

.deadline-category-progress-fill.warning {
background: var(--deadline-warning);
}

.deadline-category-progress-fill.caution {
background: var(--deadline-caution);
}

.deadline-category-progress-fill.safe {
background: var(--deadline-safe);
}

.deadline-category-progress-fill.distant {
background: var(--deadline-distant);
}

/* Pulsing animation for critical deadlines in modal */
.deadline-category-progress-fill.progress-critical {
animation: progressPulse 1s ease-in-out infinite alternate;
}

/* FORMS */
.form-group {
margin-bottom: var(--space-xl);
}

.form-label {
display: block;
margin-bottom: var(--space-sm);
font-weight: 600;
color: var(--text-primary);
font-size: 0.875rem;
}

.form-input {
width: 100%;
padding: var(--space-md);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-small);
background: var(--bg-primary);
color: var(--text-primary);
font-size: 0.875rem;
transition: all 0.2s ease;
}

.form-input.auto-expand {
resize: none;
overflow: hidden;
min-height: 2.5rem;
max-height: 18.75rem;
line-height: 1.5;
white-space: pre-wrap;
word-wrap: break-word !important;
word-break: normal !important;
overflow-wrap: break-word !important;
hyphens: none !important;
transition: height 0.2s ease, font-size 0.2s ease;
}

/* Specific fix for task name textareas - live word boundary wrapping */
#taskName,
#quickTaskName,
#subtaskName,
textarea.auto-expand,
textarea.form-input.auto-expand.mobile-input-enhanced,
.modal #taskName,
.modal textarea#taskName,
#taskModal textarea#taskName {
word-break: normal !important;
overflow-wrap: break-word !important;
word-wrap: break-word !important;
hyphens: none !important;
-webkit-hyphens: none !important;
-moz-hyphens: none !important;
-ms-hyphens: none !important;
white-space: pre-wrap !important;
line-break: strict !important;
-webkit-line-break: strict !important;
}

/* Maximum specificity override for task name input */
body .modal .modal-content .form-group textarea#taskName.form-input.auto-expand.mobile-input-enhanced {
word-break: normal !important;
overflow-wrap: break-word !important;
word-wrap: break-word !important;
line-break: strict !important;
-webkit-line-break: strict !important;
hyphens: none !important;
-webkit-hyphens: none !important;
}

/* Specific fix for Dreams description textareas - live word boundary wrapping */
#dreamDescription,
#editDreamDescription,
textarea#dreamDescription,
textarea#editDreamDescription,
.modal #dreamDescription,
.modal textarea#dreamDescription,
.modal #editDreamDescription,
.modal textarea#editDreamDescription {
word-break: normal !important;
overflow-wrap: break-word !important;
word-wrap: break-word !important;
hyphens: none !important;
-webkit-hyphens: none !important;
-moz-hyphens: none !important;
-ms-hyphens: none !important;
white-space: pre-wrap !important;
line-break: strict !important;
-webkit-line-break: strict !important;
}

/* Maximum specificity override for Dreams description input */
body .modal .modal-content .form-group textarea#dreamDescription.form-input.auto-expand.mobile-input-enhanced,
body .modal .modal-content .form-group textarea#editDreamDescription.form-input.auto-expand.mobile-input-enhanced {
word-break: normal !important;
overflow-wrap: break-word !important;
word-wrap: break-word !important;
line-break: strict !important;
-webkit-line-break: strict !important;
hyphens: none !important;
-webkit-hyphens: none !important;
}

.form-input:focus {
outline: none;
border-color: var(--accent-color);
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.form-error {
color: var(--danger-color);
font-size: 0.75rem;
margin-top: var(--space-sm);
font-weight: 500;
padding: var(--space-sm);
background: rgba(220, 53, 69, 0.1);
border-radius: var(--border-radius-small);
border-left: 3px solid var(--danger-color);
}

/* TOGGLES */
.toggle {
position: relative;
display: inline-block;
width: 48px;
height: 28px;
overflow: hidden;
}

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

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--border-color);
transition: 0.3s ease;
border-radius: 28px;
overflow: hidden;
}

.slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 4px;
bottom: 4px;
background: white;
transition: 0.3s ease;
border-radius: 50%;
}

input:checked + .slider {
background: var(--success-color);
}

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

/* STATS */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-lg);
margin-bottom: var(--space-2xl);
}

.stat-card {
text-align: center;
padding: var(--space-xl);
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
transition: all 0.2s ease;
min-height: 120px;
display: flex;
flex-direction: column;
justify-content: center;
}

.stat-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-soft);
}

.stat-number {
font-size: 2rem;
font-weight: 700;
margin-bottom: var(--space-sm);
color: var(--accent-color);
line-height: 1;
}

.stat-label {
font-size: 0.875rem;
color: var(--text-secondary);
line-height: 1.4;
font-weight: 500;
}

/* CARDS */
.card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: var(--space-xl);
margin-bottom: var(--space-xl);
transition: all 0.2s ease;
}

.card:hover {
box-shadow: var(--shadow-soft);
}

.card h3 {
margin-bottom: var(--space-lg);
font-size: 1.125rem;
font-weight: 600;
color: var(--text-primary);
}

/* EMPTY STATES */
.empty-state {
text-align: center;
padding: var(--space-2xl);
color: var(--text-secondary);
background: var(--bg-card);
border: 2px dashed var(--border-color);
border-radius: var(--border-radius);
margin: var(--space-xl) 0;
transition: all 0.2s ease;
}

.empty-state:hover {
border-color: var(--border-hover);
}

.empty-state-icon {
font-size: 2.5rem;
margin-bottom: var(--space-lg);
opacity: 0.7;
}

.empty-state-title {
font-weight: 600;
margin-bottom: var(--space-md);
color: var(--text-primary);
font-size: 1.125rem;
}

.empty-state-message {
font-size: 0.875rem;
line-height: 1.6;
}

/* FLOATING ACTION */
/* 2026-05-31: Reactivate-all FAB (holding folder) — green, sits just ABOVE the
   bottom-right corner so it's never covered by the bulk-selection / redistribute
   FABs. Shown only on a holding tab (toggled in switchPrimerTab). */
.floating-action.floating-action-reactivate {
    background: var(--success-color, #22c55e) !important;
    bottom: 96px;
    right: var(--space-xl);
}
.floating-action {
position: fixed !important;
bottom: var(--space-xl);
right: var(--space-xl);
width: 56px;
height: 56px;
background: var(--accent-color);
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
font-size: 1.5rem;
box-shadow: var(--shadow-medium);
transition: all 0.3s ease;
z-index: var(--z-floating);
display: flex;
align-items: center;
justify-content: center;
}

.floating-action:hover {
transform: scale(1.1);
box-shadow: var(--shadow-soft);
}

/* Secondary floating action button - positioned above primary */
/* Send-to-Primer (green), Jump Down (purple), Jump Up (purple) all stack
   above the primary FAB (Progress) in one far-right column. Bottoms bumped
   so they clear the primary (which sits at bottom: var(--space-2xl), about
   56px high). 2026-05-22 — was at right: 90px (offset column to the left
   of primary) which the user wanted moved to the far right.
   2026-05-23 — Send-to-Primer (green) shrunk to 44×44 and shifted to
   right: var(--space-md) so it visually aligns into the same vertical
   column as the Quick-Jump Letter circles (which are 44×44 at the same
   right offset). */
.floating-action-secondary {
bottom: 100px !important;
background: var(--success-color);
width: 36px !important;
height: 36px !important;
right: var(--space-md, 16px) !important;
font-size: 0.95rem !important;
}

/* Tertiary floating action button — Jump Down (focus + lists).
   2026-05-23: shrunk to 36×36 + relocated to the right-edge column,
   vertically centered near viewport middle so it visually matches
   the Quick-Jump letter circles it replaces. focusJump and
   quickJumpLetters are mutually exclusive so they never overlap. */
.floating-action-tertiary {
bottom: auto !important;
top: calc(50% + 4px) !important;
right: var(--space-md, 16px) !important;
background: var(--primary-color);
width: 36px !important;
height: 36px !important;
font-size: 0.95rem !important;
}

/* Quaternary floating action button — Jump Up (focus + lists).
   Sits directly above Jump Down with an 8px gap. */
.floating-action-quaternary {
bottom: auto !important;
top: calc(50% - 40px) !important;
right: var(--space-md, 16px) !important;
background: var(--primary-color);
width: 36px !important;
height: 36px !important;
font-size: 0.95rem !important;
}

/* Quinary floating action button - 2026-05-23, Focus page Add Task button.
   Sized + positioned to match the Send-to-Primer + Quick-Jump column
   (36×36 desktop, right: var(--space-md)). Stacks above the Send-to-Primer
   slot at bottom: 148px (= 100 + 48 stride). */
.floating-action-quinary {
bottom: 148px !important;
background: var(--accent-color);
width: 36px !important;
height: 36px !important;
right: var(--space-md, 16px) !important;
font-size: 0.95rem !important;
}

/* ===== Task/Subtask Image Picker & Thumbnails ===== */
.task-image-picker { display: flex; flex-direction: column; gap: 0.5rem; }
.task-image-thumbs {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    margin-top: 0.25rem;
}
/* 2026-05-30: paste-to-attach hint under the image picker buttons */
.image-paste-hint {
    margin-top: 0.4rem;
    font-size: 0.72rem;
    color: var(--text-muted, #6b6b85);
    opacity: 0.85;
}
.task-image-thumb {
    position: relative;
    width: 72px; height: 72px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color, rgba(255,255,255,0.1));
    cursor: pointer;
}
.task-image-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.task-image-thumb .thumb-remove {
    position: absolute; top: 2px; right: 2px;
    width: 20px; height: 20px;
    background: rgba(0,0,0,0.7);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
}
.task-image-thumb .thumb-remove:hover { background: var(--danger-color, #e53e3e); }

/* Compact "has images" tag in the card tag row (replaces the thumb strip to save space) */
/* Constant soft pulse on the 🖼️ image tag — same "there's something here"
   prompt as the ℹ︎ info tag, but in the image pill's own indigo. Pulse pauses
   on hover; honours prefers-reduced-motion with a static halo. */
@keyframes primer-image-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.50),
                    0 0 6px 1px rgba(99, 102, 241, 0.28);
    }
    50% {
        box-shadow: 0 0 0 5px rgba(99, 102, 241, 0.00),
                    0 0 14px 3px rgba(99, 102, 241, 0.60);
    }
}
.primer-tag-image {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(99, 102, 241, 0.15);
    color: var(--primary-color, #6c63ff);
    border: 1px solid rgba(99, 102, 241, 0.25);
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.75rem;
    animation: primer-image-pulse 2.4s ease-in-out infinite;
}
.primer-tag-image:hover {
    background: rgba(99, 102, 241, 0.25);
    transform: scale(1.05);
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    .primer-tag-image {
        animation: none;
        box-shadow: 0 0 8px 1px rgba(99, 102, 241, 0.4);
    }
}
.primer-tag-image-count {
    font-weight: 600;
    font-size: 0.7rem;
    line-height: 1;
    min-width: 1em;
    text-align: center;
}

/* Copy-to-clipboard tag on task/subtask cards */
.primer-tag-copy {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(100, 116, 139, 0.18);
    color: var(--text-secondary, #94a3b8);
    border: 1px solid rgba(100, 116, 139, 0.3);
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.75rem;
    transition: background 0.15s, transform 0.15s, color 0.15s;
}
.primer-tag-copy:hover {
    background: rgba(100, 116, 139, 0.3);
    transform: scale(1.08);
}
.primer-tag-copy.copied {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.45);
    color: #22c55e;
}
.primer-tag-copy-label {
    font-weight: 600;
    font-size: 0.7rem;
    line-height: 1;
}

/* Inline subtask copy icon on Lists page expanded view */
.subtask-copy-icon {
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s, transform 0.15s;
}
.subtask-copy-icon:hover {
    opacity: 1;
    transform: scale(1.12);
}

/* Lightbox for task/subtask image viewer */
.task-image-lightbox {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 9999999;
    display: none;
    align-items: center; justify-content: center;
    padding: 1rem;
}
.task-image-lightbox.open { display: flex; }
.task-image-lightbox img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
.task-image-lightbox .lightbox-close {
    position: absolute; top: 1rem; right: 1rem;
    width: 40px; height: 40px;
    background: rgba(255,255,255,0.1);
    border: none;
    color: white;
    font-size: 1.5rem;
    border-radius: 50%;
    cursor: pointer;
}
.task-image-lightbox .lightbox-nav {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 48px; height: 48px;
    background: rgba(255,255,255,0.1);
    border: none; color: white;
    font-size: 1.5rem;
    border-radius: 50%;
    cursor: pointer;
}
.task-image-lightbox .lightbox-nav.prev { left: 1rem; }
.task-image-lightbox .lightbox-nav.next { right: 1rem; }
.task-image-lightbox .lightbox-counter {
    position: absolute; bottom: 1rem;
    left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,0.75);
    font-size: 0.875rem;
}

/* PRIMER TASK REDISTRIBUTE BUTTON */
/* ===== PRIMER CARD — Memorigi-style compact rows ===== */
.primer-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0.875rem;
    background: var(--bg-secondary);
    border-radius: 12px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    border-left: 4px solid transparent;
}

.primer-card:active {
    transform: scale(0.985);
    background: var(--bg-tertiary);
}

/* Checkbox — 22px visual circle with 44px touch target */
.primer-card-check {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.1s ease, border-color 0.1s ease, color 0.08s ease, transform 0.1s ease;
    font-size: 0.7rem;
    color: transparent;
    position: relative;
    /* Expand touch target to 44x44 without changing visual size */
}
.primer-card-check::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.primer-card-check:hover {
    border-color: var(--primary-color);
    background: rgba(var(--primary-rgb), 0.1);
}

.primer-card-check:active {
    transform: scale(0.9);
}

.primer-card-check.checked {
    background: var(--success-color);
    border-color: var(--success-color);
    color: white;
    transform: scale(1.1);
}

.primer-card-check .icon-fa { display: none; }
.fa-loaded .primer-card-check .icon-emoji { display: none; }
.fa-loaded .primer-card-check .icon-fa { display: inline; font-size: 0.6rem; }

/* Body — task name + tags */
.primer-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.primer-card-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

.primer-card-title.completed {
    text-decoration: line-through;
    opacity: 0.5;
    color: var(--success-color);
    transition: all 0.3s ease;
}

/* Tag row */
.primer-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
}

.primer-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0.45rem;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.primer-tag-letter {
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.6rem;
    color: white;
}

.primer-tag-overdue {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.primer-tag-due {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
}

.primer-tag-starter {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.primer-tag-repeat {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.primer-tag-subtask {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
    cursor: pointer;
}

/* Constant soft pulse on the IP (in-progress) tag — prompts that subtasks are
   underway. Same pattern as the info + image tags, in the IP pill's own amber. */
@keyframes primer-ip-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.50),
                    0 0 6px 1px rgba(245, 158, 11, 0.28);
    }
    50% {
        box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.00),
                    0 0 14px 3px rgba(245, 158, 11, 0.62);
    }
}
.primer-tag-ip {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    font-weight: 700;
    font-size: 0.6rem;
    letter-spacing: 0.5px;
    animation: primer-ip-pulse 2.0s ease-in-out infinite;
}
.primer-tag-ip:hover {
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    .primer-tag-ip {
        animation: none;
        box-shadow: 0 0 8px 1px rgba(245, 158, 11, 0.4);
    }
}

.subtask-progress-bar {
    width: 100%;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    margin-top: 6px;
    overflow: hidden;
    cursor: pointer;
}

.subtask-progress-fill {
    height: 100%;
    background: var(--success-color);
    border-radius: 2px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 2px;
    transform-origin: left;
    animation: progressGrow 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes progressGrow {
    0% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}

.primer-tag-bonus {
    background: rgba(236, 72, 153, 0.15);
    color: #ec4899;
}

/*
 * Constantly-pulsing soft "blush" glow on the ℹ︎ info tag — prompts the user
 * that there are details (description / location) worth opening. Pulse pauses
 * on hover so the glow doesn't compete with the tap interaction. Honours
 * prefers-reduced-motion by switching to a static halo.
 */
@keyframes primer-info-blush-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(244, 114, 182, 0.55),
                    0 0 6px 1px rgba(244, 114, 182, 0.30);
    }
    50% {
        box-shadow: 0 0 0 5px rgba(244, 114, 182, 0.00),
                    0 0 14px 3px rgba(244, 114, 182, 0.65);
    }
}
.primer-tag-info {
    cursor: pointer;
    padding: 0.1rem 0.3rem;
    background: rgba(244, 114, 182, 0.14);
    color: #f472b6;
    animation: primer-info-blush-pulse 2.2s ease-in-out infinite;
    transition: transform 0.16s ease, background 0.16s ease;
}
.primer-tag-info:hover {
    animation-play-state: paused;
    transform: scale(1.08);
    background: rgba(244, 114, 182, 0.28);
}
[data-theme="dark"] .primer-tag-info {
    background: rgba(244, 114, 182, 0.18);
    color: #f9a8d4;
}
@media (prefers-reduced-motion: reduce) {
    .primer-tag-info {
        animation: none;
        box-shadow: 0 0 8px 1px rgba(244, 114, 182, 0.4);
    }
}

.primer-tag-timer {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    font-size: 0.7rem;
}

[data-theme="dark"] .primer-tag-timer {
    background: rgba(59, 130, 246, 0.25);
    color: #60a5fa;
}

/* Master toggle OFF hides every list-transfer surface in the app */
body.list-transfer-disabled .list-transfer-section,
body.list-transfer-disabled .primer-tag-transfer,
body.list-transfer-disabled .primer-tag-close {
    display: none !important;
}

.primer-tag-transfer {
    background: rgba(99, 102, 241, 0.2);
    color: #6366f1;
    font-size: 0.6875rem;
    padding: 0.125rem 0.4rem;
    border-radius: 4px;
}
.primer-tag-close {
    background: rgba(255, 149, 0, 0.2);
    color: #ff9500;
    font-size: 0.6875rem;
    padding: 0.125rem 0.4rem;
    border-radius: 4px;
}
[data-theme="dark"] .primer-tag-transfer { background: rgba(99, 102, 241, 0.25); color: #818cf8; }
[data-theme="dark"] .primer-tag-close { background: rgba(255, 149, 0, 0.25); color: #ffb340; }

/* Dream tag */
.primer-tag-dream {
    font-size: 0.6rem;
    padding: 1px 6px;
    border-radius: 8px;
    font-weight: 600;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.85;
    transition: opacity 0.15s ease;
}

.primer-tag-dream:hover {
    opacity: 1;
}

/* Dream color picker in modals */
.dream-color-picker {
    width: 50px;
    height: 36px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: transparent;
    padding: 0;
}

.dream-color-picker::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.dream-color-picker::-webkit-color-swatch {
    border: 2px solid var(--border-color);
    border-radius: 6px;
}

.subtask-timer-badge {
    font-size: 0.7rem;
    color: #3b82f6;
    margin-left: 4px;
    opacity: 0.8;
}

/* Action buttons — small, inline */
.primer-card-actions {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
    align-items: center;
}

.primer-action-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.8rem;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.primer-action-btn:active {
    transform: scale(0.9);
}

.primer-action-redistribute {
    color: var(--primary-color);
}

.primer-action-redistribute:hover {
    background: rgba(var(--primary-rgb), 0.15);
}

.primer-action-hold {
    color: #f59e0b;
}

.primer-action-hold:hover {
    background: rgba(245, 158, 11, 0.15);
}

.primer-action-activate {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.primer-action-activate:hover {
    background: rgba(16, 185, 129, 0.2);
}

.primer-action-btn .icon-fa { display: none; }
.fa-loaded .primer-action-btn .icon-emoji { display: none; }
.fa-loaded .primer-action-btn .icon-fa { display: inline; font-size: 0.75rem; }

/* Section labels */
.primer-section {
    margin-bottom: 1rem;
}

.primer-section-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    margin-bottom: 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

.primer-section-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.primer-section-count {
    background: var(--bg-tertiary);
    padding: 0 0.4rem;
    border-radius: 8px;
    font-size: 0.6rem;
}

/* Primer tag letter colors */
.primer-tag-letter.letter-A { background: #ff3b30; }
.primer-tag-letter.letter-B { background: #ff9500; }
.primer-tag-letter.letter-C { background: #ffcc00; color: #333; }
.primer-tag-letter.letter-D { background: #34c759; }
.primer-tag-letter.letter-E { background: #00d4aa; }
.primer-tag-letter.letter-F { background: #007AFF; }
.primer-tag-letter.letter-G { background: #5856d6; }
.primer-tag-letter.letter-H { background: #af52de; }
.primer-tag-letter.letter-S, .primer-tag-letter.letter-Starter { background: #ff6b35; }

/* Primer card border colors (maps task-border-X to border-left) */
.primer-card.task-border-A { border-left-color: #ff3b30; }
.primer-card.task-border-B { border-left-color: #ff9500; }
.primer-card.task-border-C { border-left-color: #ffcc00; }
.primer-card.task-border-D { border-left-color: #34c759; }
.primer-card.task-border-E { border-left-color: #00d4aa; }
.primer-card.task-border-F { border-left-color: #007AFF; }
.primer-card.task-border-G { border-left-color: #5856d6; }
.primer-card.task-border-H { border-left-color: #af52de; }
.primer-card.task-border-Starter { border-left-color: #ff6b35; }

/* Hide task-card ::before pseudo on primer-card */
.primer-card:not(.drop-above)::before { display: none !important; }

/* Drag handle inside primer-card */
.primer-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: grab;
    opacity: 0.4;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}

.primer-drag-handle:hover { opacity: 1; }
.primer-drag-handle:active { cursor: grabbing; }

/* Ensure drop indicators work on primer-card */
.primer-card.draggable-task { position: relative; }

/* === TODAY PAGE primer-card variant === */
.today-primer-card {
    border-left: none;
}

.today-primer-card.today-completed {
    opacity: 0.5;
}

.today-primer-card.today-completed .primer-card-title {
    text-decoration: line-through;
}

.primer-action-remove {
    color: var(--text-secondary);
    background: transparent;
    width: 30px;
    height: 30px;
}

.primer-action-remove:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* Today page source type tags */
.primer-tag-source-task {
    background: rgba(0, 132, 255, 0.15);
    color: var(--accent-color);
}

.primer-tag-source-subtask {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.primer-tag-source-standalone {
    background: rgba(255, 140, 0, 0.15);
    color: #ff8c00;
}

.primer-tag-group {
    background: rgba(100, 116, 139, 0.12);
    color: var(--text-secondary);
}

.primer-tag-parent {
    background: rgba(100, 116, 139, 0.08);
    color: var(--text-secondary);
    font-style: italic;
}

/* === LIST ITEM primer-card variant === */
.list-item-card {
    border-left: 4px solid transparent;
    cursor: pointer;
}

.list-item-card .primer-card-title {
    font-size: 0.85rem;
    font-weight: 600;
}

.list-item-card .primer-card-actions {
    gap: 0.5rem;
}

.list-task-count-badge {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.primer-action-delete {
    color: var(--text-secondary);
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.list-item-card:hover .primer-action-delete {
    opacity: 1;
}

.primer-action-delete:hover {
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.1);
}

/* Map nested-list-border classes to primer-card border-left */
.primer-card.nested-list-border-A { border-left-color: #ff3b30; }
.primer-card.nested-list-border-B { border-left-color: #ff9500; }
.primer-card.nested-list-border-C { border-left-color: #ffcc00; }
.primer-card.nested-list-border-D { border-left-color: #34c759; }
.primer-card.nested-list-border-E { border-left-color: #00d4aa; }
.primer-card.nested-list-border-F { border-left-color: #007AFF; }
.primer-card.nested-list-border-G { border-left-color: #5856d6; }
.primer-card.nested-list-border-H { border-left-color: #af52de; }
.primer-card.nested-list-border-I { border-left-color: #ff2d92; }
.primer-card.nested-list-border-J { border-left-color: #ff6b6b; }
.primer-card.nested-list-border-K { border-left-color: #6c757d; }
.primer-card.nested-list-border-L { border-left-color: #495057; }
.primer-card.nested-list-border-M { border-left-color: #fd7e14; }
.primer-card.nested-list-border-N { border-left-color: #20c997; }
.primer-card.nested-list-border-O { border-left-color: #6f42c1; }
.primer-card.nested-list-border-P { border-left-color: #e83e8c; }
.primer-card.nested-list-border-Q { border-left-color: #17a2b8; }
.primer-card.nested-list-border-R { border-left-color: #28a745; }
.primer-card.nested-list-border-S { border-left-color: #ffc107; }
.primer-card.nested-list-border-T { border-left-color: #dc3545; }
.primer-card.nested-list-border-U { border-left-color: #6610f2; }
.primer-card.nested-list-border-V { border-left-color: #e067fd; }
.primer-card.nested-list-border-W { border-left-color: #fd9644; }
.primer-card.nested-list-border-X { border-left-color: #20c9a6; }
.primer-card.nested-list-border-Y { border-left-color: #9254de; }
.primer-card.nested-list-border-Z { border-left-color: #f759ab; }
.primer-card.nested-list-border-Starter { border-left-color: #ff6b35; }

/* === LIST MODAL primer-card variant === */
.list-primer-card {
    border-left: 4px solid transparent;
}

.primer-action-expand {
    font-size: 0.65rem;
    width: 24px;
    height: 24px;
    color: var(--text-secondary);
}

.primer-action-expand:hover {
    background: rgba(var(--primary-rgb), 0.1);
}

/* Inline subtasks inside primer layout */
.primer-inline-subtasks {
    margin-left: 2.5rem;
    margin-bottom: 0.5rem;
    padding: 0.25rem 0;
    border-left: 2px solid var(--border-color);
    padding-left: 0.75rem;
}

/* === SUBTASK MODAL primer-card variant === */
.subtask-primer-card {
    border-left: none;
    cursor: default;
}

.subtask-primer-card .primer-card-actions {
    position: relative;
    z-index: 2;
}

.subtask-primer-card .primer-card-check {
    position: relative;
    z-index: 2;
}

.subtask-primer-card .primer-card-title {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}

.subtask-primer-card.subtask-completed {
    opacity: 0.5;
}

.subtask-primer-card.subtask-completed .primer-card-title {
    text-decoration: line-through;
}

.subtask-primer-card.is-priority {
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.subtask-primer-card .subtask-priority-toggle {
    position: static;
    transform: none;
    background: transparent;
    border: none;
    width: 28px;
    height: 28px;
    min-width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s ease;
    padding: 0;
}

.subtask-primer-card .subtask-priority-toggle:hover {
    background: rgba(245, 158, 11, 0.15);
    transform: none;
}

.subtask-primer-card .subtask-priority-toggle .priority-icon {
    font-size: 1.2rem;
    line-height: 1;
    pointer-events: none;
}

/* ============================
   DEADLINE PRIMER CARDS
   ============================ */
.deadline-primer-card {
    cursor: pointer;
    border: none;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    padding: var(--space-md) var(--space-lg);
}

.deadline-primer-card:hover {
    background: var(--bg-hover);
}

.deadline-primer-card .deadline-progress-container {
    margin-top: var(--space-sm);
    height: 3px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
}

.deadline-primer-card .deadline-progress-bar {
    height: 100%;
    border-radius: 2px;
    width: 0%;
    transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.deadline-group-section {
    margin-bottom: var(--space-lg);
}

.deadline-group-section .group-section-content {
    padding: 0;
}

/* Deadline status tag colors */
.primer-tag-due-critical { background: var(--deadline-critical, #ef4444); color: white; }
.primer-tag-due-urgent { background: var(--deadline-urgent, #f97316); color: white; }
.primer-tag-due-warning { background: var(--deadline-warning, #eab308); color: #000; }
.primer-tag-due-caution { background: var(--deadline-caution, #f59e0b); color: #000; }
.primer-tag-due-safe { background: var(--deadline-safe, #22c55e); color: white; }
.primer-tag-due-distant { background: var(--deadline-distant, #6366f1); color: white; }
.primer-tag-due-no-date { background: var(--text-muted); color: white; }

/* ============================
   ARCHIVE PRIMER CARDS
   ============================ */
.archive-primer-card {
    border: none;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    padding: var(--space-sm) var(--space-md);
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
}

.archive-primer-card:hover {
    background: var(--bg-hover);
}

.archive-primer-card .primer-card-actions {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.archive-primer-card:hover .primer-card-actions {
    opacity: 1;
}

.archive-primer-left {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-shrink: 0;
    padding-top: 2px;
}

.archive-hierarchy-icon {
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.archive-primer-card .archive-item-task {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-bottom: 2px;
}

.archive-primer-card .archive-item-meta {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-bottom: 2px;
}

.archive-primer-card .archive-item-parent-context {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 2px var(--space-xs);
    background: rgba(255, 193, 7, 0.1);
    border-radius: var(--border-radius-small);
    font-size: 0.75rem;
    margin-bottom: 2px;
}

.archive-primer-card .archive-expand-toggle {
    width: 18px;
    height: 18px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.archive-primer-card .archive-expand-toggle:hover {
    background: var(--hover-bg);
    border-color: var(--border-hover);
}

.archive-primer-card .archive-expand-toggle.expanded {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

.archive-primer-card .archive-children-container {
    margin-left: var(--space-lg);
    border-left: 2px solid var(--border-color);
}

/* Archive type tags */
.primer-tag-archive-task { background: #3b82f6; color: white; }
.primer-tag-archive-subtask { background: #22c55e; color: white; }
.primer-tag-archive-timeline { background: #8b5cf6; color: white; }
.primer-tag-warning { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }

.archive-group-section {
    margin-bottom: var(--space-lg);
}

.archive-group-section .group-section-content {
    padding: var(--space-sm);
}

/* Archive item nesting levels inside primer cards */
.archive-primer-card.level-1 {
    padding-left: calc(var(--space-md) + var(--space-lg));
}

.archive-primer-card.level-2 {
    padding-left: calc(var(--space-md) + var(--space-lg) * 2);
}

/* Keep old class for backward compat — hide if still referenced */
.primer-redistribute-btn { display: none; }
.primer-task-item .task-header { display: none; }

/* PRIMER PAGE TABS */
.primer-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--border-color);
    padding: 0 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}

.primer-tabs::-webkit-scrollbar {
    display: none;
}

.primer-tab {
    background: transparent;
    border: none;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: -2px;
    white-space: nowrap;
    flex-shrink: 0;
}

.primer-tab:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.primer-tab.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    background: transparent;
}

.primer-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.5rem;
    background: var(--bg-tertiary);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.primer-tab.active .primer-tab-count {
    background: var(--primary-color);
    color: white;
}

/* Holding tab badges - yellow to highlight paused tasks */
.primer-tab-holding .primer-tab-count {
    background: #f59e0b;
    color: white;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.primer-tab-holding.active .primer-tab-count {
    background: #fbbf24;
    color: #78350f;
    box-shadow: 0 2px 12px rgba(251, 191, 36, 0.5);
}

.primer-tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.primer-tab-content.active {
    display: block;
}

/* Dynamic holding tab date label */
.primer-tab-date {
    font-size: 0.6rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-left: -0.25rem;
    white-space: nowrap;
}

.primer-tab-holding.active .primer-tab-date {
    color: var(--primary-color);
}

/* Add holding tab button */
.primer-tab-add {
    padding: 0.5rem 0.75rem !important;
    font-size: 1.1rem !important;
    color: var(--text-muted) !important;
    font-weight: 400 !important;
    opacity: 0.6;
    transition: all 0.2s ease;
    min-width: auto;
}

.primer-tab-add:hover {
    opacity: 1;
    color: var(--primary-color) !important;
    background: rgba(var(--primary-rgb), 0.1) !important;
}

/* Edit dots on holding tabs */
.primer-tab-edit {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--text-muted);
    padding: 2px 4px;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.5;
    margin-left: 2px;
    transition: opacity 0.15s ease;
    letter-spacing: 1px;
}

.primer-tab-edit:hover,
.primer-tab-edit:active {
    opacity: 1;
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

/* Generic overlay modal used by holding tabs, dream linking, etc. */
.holding-tab-edit-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200000;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 1rem;
}

.holding-tab-edit-content {
    background: var(--bg-secondary);
    border-radius: 16px;
    padding: 1.5rem;
    width: 100%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

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

/* DRAG AND DROP STYLING FOR MORNING PAGE */
.draggable-task {
transition: all 0.2s ease;
cursor: grab;
}

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

.draggable-task.dragging {
opacity: 0.5;
transform: rotate(2deg);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
z-index: 1000;
}

.draggable-task.drop-target {
border-top: 3px solid var(--accent-color);
background-color: var(--hover-bg);
}

.drag-handle {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 100%;
color: var(--text-muted);
font-size: 14px;
cursor: grab;
opacity: 0.6;
transition: opacity 0.2s ease;
}

.drag-handle:hover {
opacity: 1;
color: var(--accent-color);
}

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

/* Ensure drag handle doesn't interfere with task content */
.draggable-task .task-header {
position: relative;
}

.draggable-task .task-content {
flex: 1;
}

/* Hide drag handle on non-draggable tasks */
.task-item:not(.draggable-task) .drag-handle {
display: none;
}

/* DROP INDICATOR STYLING - Highlight the task being displaced */
.draggable-task.drop-above,
.draggable-task.drop-below {
background-color: rgba(14, 165, 233, 0.1); /* Light blue background */
border: 2px solid var(--accent-color);
box-shadow: 0 0 12px rgba(14, 165, 233, 0.2);
transform: scale(1.02);
transition: all 0.2s ease;
}

/* Add line indicator for clarity */
.draggable-task.drop-above::before {
content: '';
position: absolute;
top: -4px;
left: 0;
right: 0;
height: 4px;
background: var(--accent-color);
border-radius: 2px;
animation: linePulse 1s ease-in-out infinite;
}

.draggable-task.drop-below::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
right: 0;
height: 4px;
background: var(--accent-color);
border-radius: 2px;
animation: linePulse 1s ease-in-out infinite;
}

@keyframes linePulse {
0%, 100% {
    opacity: 0.6;
    transform: scaleX(0.95);
}
50% {
    opacity: 1;
    transform: scaleX(1);
}
}

/* Ensure proper positioning for pseudo-elements */
.draggable-task {
position: relative;
}

/* Dark mode adjustments */
[data-theme="dark"] .draggable-task.drop-above,
[data-theme="dark"] .draggable-task.drop-below {
background-color: rgba(14, 165, 233, 0.2);
box-shadow: 0 0 16px rgba(14, 165, 233, 0.4);
}

/* ======================== GROUP REORDER & MODE TOGGLE ======================== */

.group-mode-bar {
display: flex;
justify-content: center;
gap: 8px;
padding: 8px 0 12px;
/* Sticky so Multi-Select / Reorder stay visible while scrolling. On
   desktop the scroll container is .center-pane (which starts below
   the fixed header), so top:0 is correct. On mobile the body scrolls
   under the fixed .header-nav-icons row (~54px), so the mobile
   override below bumps top to 54px to clear it. */
position: sticky;
top: 0;
z-index: 50;
background: var(--bg-primary);
}

.group-mode-btn {
padding: 6px 14px;
border: 1px solid var(--border-color);
border-radius: 20px;
background: var(--bg-tertiary);
color: var(--text-secondary);
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}

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

.group-mode-btn:hover:not(.active) {
background: var(--bg-secondary);
border-color: var(--accent-color);
color: var(--accent-color);
}

/* =========================================================
   Reorder Mode Interaction Lockout
   When group reorder mode is active, disable all tap/click
   interactions on cards and group contents so only drag
   can initiate. Drag handles, chevrons, and the mode
   toggle bar remain interactive.
   ========================================================= */

body.reorder-mode-active .primer-card,
body.reorder-mode-active .group-section-header,
body.reorder-mode-active .group-item {
    cursor: grab;
}

body.reorder-mode-active .primer-card:active,
body.reorder-mode-active .group-section-header:active,
body.reorder-mode-active .group-item:active {
    cursor: grabbing;
}

/* Disable interactive children inside cards and groups */
body.reorder-mode-active .primer-card-check,
body.reorder-mode-active .primer-tag-copy,
body.reorder-mode-active .primer-tag-subtask,
body.reorder-mode-active .primer-tag-image,
body.reorder-mode-active .primer-tag-ip,
body.reorder-mode-active .primer-tag-timer,
body.reorder-mode-active .primer-tag-priority,
body.reorder-mode-active .primer-tag-dream,
body.reorder-mode-active .priority-toggle,
body.reorder-mode-active .subtask-priority-toggle,
body.reorder-mode-active .inline-subtask-item,
body.reorder-mode-active .primer-card button:not(.drag-handle),
body.reorder-mode-active .primer-card input,
body.reorder-mode-active .primer-card textarea,
body.reorder-mode-active .group-section-header button:not(.group-section-chevron):not(.drag-handle),
body.reorder-mode-active .group-item button:not(.drag-handle) {
    pointer-events: none !important;
    opacity: 0.6;
}

/* Stop the image/IP/info pulse while reorder modes dim the pills — a
   dimmed-but-pulsing pill looks odd. Covers both group-reorder + task-reorder. */
body.reorder-mode-active .primer-tag-image,
body.reorder-mode-active .primer-tag-ip,
body.reorder-mode-active .primer-tag-info,
body.task-reorder-mode-active .primer-tag-image,
body.task-reorder-mode-active .primer-tag-ip,
body.task-reorder-mode-active .primer-tag-info {
    animation: none !important;
    box-shadow: none !important;
}

/* Keep drag handles and mode bar fully interactive. Chevrons are intentionally
   NOT exempt — expand/collapse is locked out in reorder mode (JS guards in
   toggleGroupExpansion and toggleGroupSection also enforce this). */
body.reorder-mode-active .drag-handle,
body.reorder-mode-active .group-mode-bar,
body.reorder-mode-active .group-mode-btn {
    pointer-events: auto !important;
    opacity: 1;
}

/* Highlight drag handles so they stand out */
body.reorder-mode-active .drag-handle {
    background: var(--primary-color, #6366f1);
    color: #fff;
    border-radius: 6px;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

/* Slight dim on cards/groups to reinforce "drag only" mode */
body.reorder-mode-active .primer-card,
body.reorder-mode-active .group-section {
    opacity: 0.92;
}

/* Floating action buttons and header nav stay fully interactive */
body.reorder-mode-active .floating-action,
body.reorder-mode-active .floating-action-secondary,
body.reorder-mode-active .floating-action-tertiary,
body.reorder-mode-active .floating-action-quaternary,
body.reorder-mode-active .sidebar,
body.reorder-mode-active .nav-header,
body.reorder-mode-active .nav-icon {
    pointer-events: auto !important;
    opacity: 1;
}

.draggable-group {
cursor: grab;
transition: all 0.2s ease;
}

.draggable-group:active {
cursor: grabbing;
}

.group-item.dragging {
opacity: 0.5;
transform: rotate(1deg);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
z-index: 1000;
}

.group-item.drop-above,
.group-item.drop-below {
position: relative;
background-color: rgba(14, 165, 233, 0.1);
border: 2px solid var(--accent-color) !important;
box-shadow: 0 0 12px rgba(14, 165, 233, 0.2);
transform: scale(1.01);
transition: all 0.2s ease;
}

.group-item.drop-above::before {
content: '';
position: absolute;
top: -4px;
left: 0;
right: 0;
height: 4px;
background: var(--accent-color);
border-radius: 2px;
animation: linePulse 1s ease-in-out infinite;
z-index: 10;
}

.group-item.drop-below::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
right: 0;
height: 4px;
background: var(--accent-color);
border-radius: 2px;
animation: linePulse 1s ease-in-out infinite;
z-index: 10;
}

.group-task-count-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
border-radius: 11px;
background: var(--accent-color);
color: white;
font-size: 0.7rem;
font-weight: 700;
margin-left: 8px;
flex-shrink: 0;
}

.group-drag-handle {
display: inline-flex;
align-items: center;
color: var(--text-muted);
font-size: 14px;
cursor: grab;
margin-right: 4px;
padding: 2px;
}

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

[data-theme="dark"] .group-item.drop-above,
[data-theme="dark"] .group-item.drop-below {
background-color: rgba(14, 165, 233, 0.2);
box-shadow: 0 0 16px rgba(14, 165, 233, 0.4);
}

/* FLOATING BULK WORK BUTTON */
/* 2026-05-13: round 56×56 circular button matching the focus-jump FAB
   style. Takes the up-jump's slot in the right-side FAB stack so it lines
   up with the redistribute + down-jump buttons (which are at right: 90px
   inline because the Focus page also has a progress FAB at the far-right
   column). Desktop: bottom 192px; mobile: bottom 144px (overridden below).
   When the bulk button is visible the up-jump is auto-hidden via the
   :has() rule below so they don't collide. */
.floating-bulk-button {
/* !important on position only — the tap-feedback system injects
   .lam-ripple-host on first tap which has position:relative at equal
   specificity but later source order. Without !important the FAB
   falls out of fixed positioning and lands off-screen at end of body
   flow. The overflow:hidden from .lam-ripple-host stays in effect
   (clips the ripple), only position needs to win. */
position: fixed !important;
bottom: 192px;
right: 90px;
background: var(--accent-color);
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
box-shadow: var(--shadow-medium);
transition: all 0.3s ease;
z-index: var(--z-bulk-operations) !important;
padding: 0;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: translateY(20px);
animation: bulkButtonSlideIn 0.4s ease-out forwards;
}

/* When the bulk button is visible (selection mode), hide the up-jump
   so they don't stack on the same slot. The user rarely needs to jump
   between groups while actively selecting tasks. */
body:has(#floatingBulkButton.show) .floating-action-quaternary {
    display: none !important;
}

/* When the bulk-operations modal is open, hide the bulk button itself
   so it doesn't overlap the modal content (the modal already has its
   own Cancel + actions). Use visibility instead of display:none so the
   FAB stays in the layout during the click event lifecycle — otherwise
   the click that opened the modal can bleed through to the card behind
   the FAB once it disappears mid-event. */
body:has(#bulkOperationsModal.active) #floatingBulkButton {
    visibility: hidden !important;
    pointer-events: none !important;
}

.floating-bulk-button:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: var(--shadow-soft);
background: color-mix(in srgb, var(--accent-color) 90%, white);
}

/* Count is the only child — parent .floating-bulk-button already
   centers it via display:flex + align/justify center. pointer-events
   :none routes all taps to the FAB itself so the inner span never
   intercepts (defense against finger taps that land slightly off-center
   and would otherwise register on the card behind it). */
#bulkButtonCount {
font-weight: 800;
font-size: 1.25rem;
color: white;
letter-spacing: -0.02em;
line-height: 1;
text-align: center;
pointer-events: none;
}

/* Bulk Button Animations */
@keyframes bulkButtonSlideIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

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

.floating-bulk-button.hiding {
animation: bulkButtonSlideOut 0.3s ease-in forwards;
}

/* Show/Hide states for floating bulk button */
.floating-bulk-button.show {
opacity: 1;
transform: translateY(0);
animation: bulkButtonSlideIn 0.4s ease-out forwards;
}

.floating-bulk-button.hide {
animation: bulkButtonSlideOut 0.3s ease-in forwards;
}

/* NOTIFICATIONS */
/* ===== TOAST NOTIFICATION SYSTEM ===== */
.notification-container {
    position: fixed;
    top: 50px;
    right: 0;
    z-index: var(--z-notification);
    width: auto;
    max-width: 320px;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    padding: 12px 12px 0 0;
}

.in-app-notification {
    position: relative;
    width: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    pointer-events: auto;
    animation: toastSlideIn 0.35s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.in-app-notification:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Type icon (added by JS) */
.notification-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

/* Header row: title + close */
.notification-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.notification-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.notification-body {
    font-size: 0.7rem;
    color: var(--text-secondary);
    line-height: 1.2;
    margin-top: 1px;
}

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

.notification-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    padding: 2px;
    line-height: 1;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
    align-self: flex-start;
}

.notification-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Progress bar at bottom of toast */
.notification-progress {
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    height: 2px;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}

.notification-progress-bar {
    height: 100%;
    border-radius: 3px;
    transform-origin: left;
    animation: toastProgress var(--toast-duration, 3s) linear forwards;
}

/* ---- Type-specific colors ---- */
.notification-success .notification-icon { background: rgba(0, 168, 107, 0.12); color: var(--success-color); }
.notification-success .notification-progress-bar { background: var(--success-color); }
.notification-success { border-left: none; border-bottom: 2px solid var(--success-color); }

.notification-completion .notification-icon { background: rgba(40, 167, 69, 0.15); color: #28a745; }
.notification-completion .notification-progress-bar { background: #28a745; }
.notification-completion {
    border-left: none;
    border-bottom: 2px solid #28a745;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(40, 167, 69, 0.08) 100%);
}
.notification-completion .notification-title { color: #28a745; }

.notification-error .notification-icon { background: rgba(220, 53, 69, 0.12); color: var(--danger-color); }
.notification-error .notification-progress-bar { background: var(--danger-color); }
.notification-error { border-left: none; border-bottom: 2px solid var(--danger-color); }

.notification-warning .notification-icon { background: rgba(255, 140, 0, 0.12); color: var(--warning-color); }
.notification-warning .notification-progress-bar { background: var(--warning-color); }
.notification-warning { border-left: none; border-bottom: 2px solid var(--warning-color); }

.notification-info .notification-icon { background: rgba(0, 102, 204, 0.12); color: var(--accent-color); }
.notification-info .notification-progress-bar { background: var(--accent-color); }
.notification-info { border-left: none; border-bottom: 2px solid var(--accent-color); }

.notification-priority .notification-icon { background: rgba(220, 53, 69, 0.15); color: var(--danger-color); }
.notification-priority .notification-progress-bar { background: var(--danger-color); }
.notification-priority {
    border-left: none;
    border-bottom: 2px solid var(--danger-color);
    background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(220, 53, 69, 0.06) 100%);
    animation: toastSlideIn 0.35s cubic-bezier(0.21, 1.02, 0.73, 1) forwards, toastPulse 2s ease-in-out 0.35s infinite;
}

/* ---- Dark-mode enhancements ---- */
[data-theme="dark"] .in-app-notification {
    background: rgba(30, 30, 30, 0.95);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .notification-success .notification-icon { background: rgba(0, 168, 107, 0.18); }
[data-theme="dark"] .notification-completion .notification-icon { background: rgba(40, 167, 69, 0.2); }
[data-theme="dark"] .notification-completion { background: linear-gradient(135deg, rgba(30, 30, 30, 0.95) 0%, rgba(40, 167, 69, 0.12) 100%); }
[data-theme="dark"] .notification-error .notification-icon { background: rgba(220, 53, 69, 0.18); }
[data-theme="dark"] .notification-warning .notification-icon { background: rgba(255, 140, 0, 0.18); }
[data-theme="dark"] .notification-info .notification-icon { background: rgba(0, 102, 204, 0.18); }
[data-theme="dark"] .notification-priority { background: linear-gradient(135deg, rgba(30, 30, 30, 0.95) 0%, rgba(220, 53, 69, 0.1) 100%); }

/* ---- Animations ---- */
@keyframes toastSlideDown {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastSlideUp {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

@keyframes toastProgress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

@keyframes toastPulse {
    0%, 100% { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08); }
    50% { box-shadow: 0 8px 32px rgba(220, 53, 69, 0.2), 0 2px 12px rgba(220, 53, 69, 0.15); }
}

/* CONTEXT MENU AND BULK OPERATIONS */
.task-context-menu {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.95);
background: var(--bg-secondary);
border-radius: 20px;
padding: 0;
z-index: var(--z-context-menu);
/* Cap to the viewport + lay out as a column so a long action list scrolls
   internally (the handle + header stay pinned) instead of overflowing the
   screen with no way to reach the bottom items. dvh accounts for the mobile
   URL bar; vh is the fallback. */
display: flex;
flex-direction: column;
max-height: 85vh;
max-height: 85dvh;
max-width: 400px;
width: calc(100% - 32px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.25s ease;
overflow: hidden;
opacity: 0;
pointer-events: none;
}

.task-context-menu.active {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
pointer-events: auto;
}

/* Drag handle pill */
.context-menu-handle {
width: 36px;
height: 4px;
background: var(--text-muted);
border-radius: 2px;
margin: 10px auto 0;
opacity: 0.5;
}

.context-menu-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 20px 10px;
border-bottom: none;
margin-bottom: 0;
}

.context-menu-title {
font-size: 0.95rem;
font-weight: 700;
color: var(--text-primary);
max-width: 80%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.context-menu-close {
background: var(--bg-tertiary);
border: none;
font-size: 0.85rem;
cursor: pointer;
color: var(--text-secondary);
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.15s ease;
}

.context-menu-close:hover {
background: var(--danger-color);
color: white;
transform: scale(1.05);
}

.context-menu-actions {
display: flex;
flex-direction: column;
gap: 0;
padding: 4px 12px 16px;
padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
/* Scroll the action list when it's taller than the capped menu. min-height:0
   lets this flex child shrink below its content height so overflow kicks in. */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
min-height: 0;
flex: 1 1 auto;
}

/* Separator line between action groups */
.context-action-separator {
height: 1px;
background: var(--border-color);
margin: 4px 8px;
opacity: 0.5;
}

.context-action {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 12px;
background: transparent;
border: none;
border-radius: 12px;
cursor: pointer;
transition: background 0.15s ease;
font-size: 0.9rem;
color: var(--text-primary);
font-weight: 500;
text-align: left;
width: 100%;
}

.context-action:hover,
.context-action:active {
background: var(--bg-tertiary);
}

.context-action.danger {
color: var(--danger-color);
}

.context-action.danger:hover,
.context-action.danger:active {
background: rgba(220, 53, 69, 0.1);
}

.context-action.warning {
color: var(--warning-color);
}

.context-action.warning:hover,
.context-action.warning:active {
background: rgba(255, 193, 7, 0.1);
}

.context-action-icon {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
background: var(--bg-tertiary);
border-radius: 10px;
flex-shrink: 0;
}

.context-action.danger .context-action-icon {
background: rgba(220, 53, 69, 0.12);
}

.context-action.warning .context-action-icon {
background: rgba(255, 193, 7, 0.12);
}

.context-action-text {
flex: 1;
font-weight: 500;
}

/* Edit Task modal — Memorigi style */
.edit-task-modal-redesign.active {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.edit-task-modal-content {
    background: var(--bg-secondary) !important;
    border-radius: 20px !important;
    border: none !important;
    padding: 0 !important;
    max-width: 440px !important;
    width: calc(100% - 24px) !important;
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    overflow: hidden;
}

.edit-task-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px 8px;
    flex-shrink: 0;
}

.edit-task-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.edit-task-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 20px 12px;
    -webkit-overflow-scrolling: touch;
}

.edit-task-body .task-field-primary {
    margin-bottom: 0.75rem;
}

.edit-task-body .task-name-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--border-color);
    border-radius: 0;
    padding: 10px 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    transition: border-color 0.2s ease;
}

.edit-task-body .task-name-input:focus {
    outline: none;
    border-bottom-color: var(--accent-color);
}

.edit-task-body .task-name-input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

.edit-task-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.edit-task-input {
    width: 100%;
    background: var(--bg-tertiary) !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    font-size: 0.88rem;
    color: var(--text-primary);
    transition: border-color 0.2s ease;
}

textarea.edit-task-input {
    overflow: hidden;
    resize: none;
    field-sizing: content;
    min-height: 80px;
}

.edit-task-input:focus {
    outline: none;
    border-color: var(--accent-color) !important;
}

.edit-task-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

.edit-task-toggle-label {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
}

.edit-task-toggle-hint {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 1px;
}

.edit-task-footer {
    padding: 12px 20px 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    flex-shrink: 0;
}

.edit-task-save-btn {
    width: 100%;
    padding: 13px;
    background: var(--accent-color);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.15s ease;
}

.edit-task-save-btn:hover {
    filter: brightness(1.1);
}

.edit-task-save-btn:active {
    transform: scale(0.97);
}

/* Move modal — Memorigi style */
.move-modal-redesign.active {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.move-modal-content {
    background: var(--bg-secondary) !important;
    border-radius: 20px !important;
    border: none !important;
    padding: 0 !important;
    max-width: 440px !important;
    width: calc(100% - 24px) !important;
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    overflow: hidden;
}

.move-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px 8px;
}

.move-modal-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.move-modal-body {
    padding: 4px 20px 16px;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.move-modal-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.move-custom-select {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.move-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--bg-tertiary);
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.move-custom-select.open .move-select-trigger {
    border-color: var(--accent-color);
    background: var(--bg-primary);
    border-radius: 12px 12px 0 0;
}

.move-select-text {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
}

.move-select-arrow {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--text-muted);
    transition: transform 0.2s ease;
}

.move-custom-select.open .move-select-arrow {
    transform: rotate(180deg);
}

.move-select-dropdown {
    display: none;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 12px 12px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.move-custom-select.open .move-select-dropdown {
    display: block;
}

.move-custom-select.open {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.move-dropdown-group {
    padding: 11px 14px 8px;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
}

.move-dropdown-group:not(:first-child) {
    margin-top: 4px;
    border-top: 1px solid var(--border-color);
}

/* Quick-jump highlight on the group a user jumped to / was last viewing,
   mirroring the Add-Task picker's .focus-picker-group-active. */
.move-dropdown-group.move-dropdown-group-active {
    background: color-mix(in srgb, var(--primary-color) 32%, var(--bg-primary)) !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 2px var(--primary-color);
}

/* Card-style task/list rows (matches the app's primer-card aesthetic) instead
   of plain text lines — used by the Move + Convert-to-subtask pickers. */
.move-dropdown-item {
    position: relative;
    margin: 6px 10px;
    padding: 11px 14px 11px 16px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-left: 3px solid color-mix(in srgb, var(--primary-color) 55%, transparent);
    border-radius: 10px;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.move-dropdown-item:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
    border-left-color: var(--primary-color);
    transform: translateX(2px);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--primary-color) 22%, transparent);
}

.move-dropdown-item.selected {
    color: var(--text-primary);
    font-weight: 600;
    background: color-mix(in srgb, var(--primary-color) 16%, var(--bg-secondary));
    border-color: var(--primary-color);
    border-left-color: var(--primary-color);
}

.move-dropdown-item:last-child {
    border-radius: 10px;
}

/* Scrollbar styling for dropdown */
.move-select-dropdown::-webkit-scrollbar {
    width: 4px;
}
.move-select-dropdown::-webkit-scrollbar-track {
    background: transparent;
}
.move-select-dropdown::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 2px;
}

.move-modal-footer {
    padding: 0 20px 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

.move-modal-btn {
    width: 100%;
    padding: 12px;
    background: var(--accent-color);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.move-modal-btn:hover {
    filter: brightness(1.1);
}

.move-modal-btn:active {
    transform: scale(0.97);
}

/* Bulk operations modal — Memorigi style. Sizes to its content;
   pinned vertically near the top with a small offset on mobile. */
.bulk-operations-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.95);
background: var(--bg-secondary);
border-radius: 20px;
padding: 0;
z-index: var(--z-bulk-operations);
max-width: 400px;
width: calc(100% - 32px);
height: auto;
max-height: 85vh;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
opacity: 0;
pointer-events: none;
transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.25s ease;
overflow: hidden;
display: flex;
flex-direction: column;
}

.bulk-operations-modal.active {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
pointer-events: auto;
}

.bulk-operations-header {
text-align: center;
padding: 16px 20px 10px;
margin-bottom: 0;
border-bottom: none;
}

.bulk-operations-title {
font-size: 0.95rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 2px;
}

.bulk-operations-count {
font-size: 0.8rem;
color: var(--text-secondary);
font-weight: 500;
}

.bulk-operations-actions {
display: flex;
flex-direction: column;
gap: 0;
padding: 4px 12px 16px;
}

.bulk-action-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
background: transparent;
border: none;
padding: 14px 12px;
border-radius: 14px;
cursor: pointer;
transition: background 0.15s ease;
font-size: 1.05rem;
font-weight: 600;
color: var(--text-primary);
text-align: center;
width: 100%;
}

.bulk-action-btn:hover,
.bulk-action-btn:active {
background: var(--bg-tertiary);
}

.bulk-action-btn.success {
color: var(--success-color);
background: transparent;
}

.bulk-action-btn.success:hover,
.bulk-action-btn.success:active {
background: rgba(0, 168, 107, 0.1);
}

.bulk-action-btn.danger {
color: var(--danger-color);
background: transparent;
}

.bulk-action-btn.danger:hover,
.bulk-action-btn.danger:active {
background: rgba(220, 53, 69, 0.1);
}

.bulk-action-btn.warning {
color: var(--warning-color);
background: transparent;
}

.bulk-action-btn.warning:hover,
.bulk-action-btn.warning:active {
background: rgba(255, 140, 0, 0.1);
}

.bulk-action-btn.secondary {
color: var(--text-secondary);
background: transparent;
}

.bulk-action-btn.secondary:hover,
.bulk-action-btn.secondary:active {
background: var(--bg-tertiary);
}

/* BACKDROP 
* Z-Index Hierarchy:
* 10000+ : Modal system
* 10006  : Bulk operations modal
* 10005  : General modals and notifications  
* 10004  : (unused, reserved)
* 10003  : Context menus
* 10002  : Context menu backdrop
* 10001  : Bulk operations backdrop
* 1-100  : Standard UI elements (headers, nav, buttons)
*/
.context-menu-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: calc(var(--z-context-menu) - 1);
display: none;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
opacity: 0;
transition: opacity 0.3s ease;
}

.context-menu-backdrop.active {
display: block;
opacity: 1;
}

.bulk-operations-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: calc(var(--z-bulk-operations) - 1);
display: none;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
opacity: 0;
transition: opacity 0.3s ease;
}

.bulk-operations-backdrop.active {
display: block;
opacity: 1;
}

/* SELECTION INDICATORS */
.selection-indicator {
position: absolute;
top: var(--space-md);
left: var(--space-md);
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--accent-color);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
font-weight: bold;
opacity: 1;
transition: all 0.2s ease;
z-index: var(--z-content);
border: 2px solid white;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.selection-checkmark {
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
animation: checkmarkPop 0.2s ease-out;
}

.selection-number {
position: absolute;
bottom: -8px;
right: -8px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--success-color);
color: white;
font-size: 0.7rem;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
animation: numberPop 0.2s ease-out;
}


@keyframes checkmarkPop {
0% { transform: scale(0.8); opacity: 0.5; }
50% { transform: scale(1.2); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}

/* EDITABLE ELEMENTS */
.editable {
cursor: pointer;
padding: 2px 6px;
border-radius: 4px;
transition: all 0.2s ease;
border: 1px solid transparent;
}

.editable:hover {
background: var(--hover-bg);
border-color: var(--border-color);
}

.editable.editing {
background: var(--bg-primary);
border: 1px solid var(--accent-color);
outline: none;
padding: 4px 8px;
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1);
}

/* CONFIRMATION DIALOG */
.confirm-content {
background: var(--bg-primary);
border: 2px solid var(--warning-color);
border-radius: var(--border-radius);
padding: var(--space-2xl);
text-align: center;
max-width: 400px;
position: relative;
transition: all 0.3s ease;
box-shadow: var(--shadow-medium);
z-index: var(--z-loading);
}

.confirm-title {
color: var(--warning-color);
font-size: 1.25rem;
font-weight: 600;
margin-bottom: var(--space-lg);
}

.confirm-message {
color: var(--text-secondary);
margin-bottom: var(--space-xl);
font-size: 0.875rem;
line-height: 1.5;
}

.confirm-actions {
display: flex;
gap: var(--space-md);
justify-content: center;
}

/* LOGIN PAGE */
.login-page {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
text-align: center;
height: 100vh;
padding: 0;
position: relative;
overflow: hidden;
}

.login-page.active {
display: flex;
}

.logo {
font-size: 3rem;
font-weight: 700;
margin-bottom: var(--space-lg);
color: white;
text-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.login-subtitle {
font-size: 1.25rem;
font-weight: 500;
margin-bottom: var(--space-2xl);
color: rgba(255,255,255,0.9);
}

.login-btn {
background: linear-gradient(135deg, #ff6b6b, #ee5a24);
color: white;
border: none;
padding: var(--space-lg) var(--space-2xl);
font-size: 1.125rem;
font-weight: 600;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(238, 90, 36, 0.4);
text-transform: uppercase;
letter-spacing: 1px;
}

.login-btn:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 12px 35px rgba(238, 90, 36, 0.6);
}

/* RESPONSIVE DESIGN - UNIFIED MOBILE BREAKPOINT */
/* Single, consistent mobile breakpoint to avoid conflicts */
@media (max-width: 768px) {
.container {
max-width: 100%;
margin: 0;
}

/* Mobile task layout - move all controls to bottom */
.task-header {
flex-direction: column;
align-items: stretch;
gap: var(--space-sm);
}

.task-content {
display: flex;
flex-direction: column;
flex: 1;
padding-right: var(--space-xs); /* Reduce right padding */
}

.task-name {
margin-bottom: 0;
max-width: 100%; /* Use full available width */
padding-right: 0; /* Remove any padding */
}

/* Bottom control bar with all elements aligned horizontally */
.task-bottom-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: var(--space-sm);
border-top: 1px solid var(--border-color);
flex-wrap: nowrap;
gap: var(--space-xs); /* Reduce gap */
margin-top: var(--space-md);
}

/* Checkbox styling in bottom bar */
.task-bottom-bar .task-checkbox {
flex-shrink: 0;
margin-top: 0;
}

/* Meta items in center of bottom bar */
.task-bottom-bar .task-meta {
display: flex;
align-items: center;
gap: 2px; /* Minimal gap between meta items */
flex: 1;
justify-content: center;
margin-bottom: 0;
flex-wrap: nowrap; /* Prevent wrapping */
}

.task-bottom-bar .task-meta-item {
flex-shrink: 0;
white-space: nowrap; /* Prevent text wrapping in meta items */
}

/* Ensure letter badge doesn't wrap */
.task-bottom-bar .task-letter {
flex-shrink: 0;
min-width: 24px;
text-align: center;
}

/* Menu button styling in bottom bar */
.task-bottom-bar .task-menu-btn {
flex-shrink: 0;
margin-left: 0;
}

/* Reduce task card padding on mobile for more content space */
.task-item {
padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-md); /* Reduce from --space-lg */
}

/* Specific task name optimization for mobile */
.task-name {
margin-right: 0 !important;
padding-right: 0 !important;
width: 100% !important;
}

.task-content {
margin-right: 0 !important;
padding-right: 0 !important;
}

.page-content {
padding: var(--space-lg) var(--space-md);
}

.header {
padding: var(--space-lg) var(--space-md);
padding-left: var(--space-md);
}

.nav {
padding: 0 var(--space-md);
}

/* MOBILE LAYOUT RESTRUCTURE - List name at top, actions below */
@media (max-width: 768px) {
.nested-list-item {
display: flex !important;
flex-direction: column !important; /* Stack vertically */
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
padding: var(--space-md) !important;
box-sizing: border-box !important;
}

/* List name section - full width at top */
.nested-list-item .list-content {
width: 100% !important;
max-width: 100% !important;
flex: none !important; /* Don't flex, just take space needed */
margin-bottom: var(--space-sm) !important;
overflow: hidden !important;
}

.nested-list-item .list-content .list-name {
width: 100% !important;
max-width: 100% !important;
font-size: 1rem !important;
line-height: 1.4 !important;
font-weight: 600 !important;
margin-bottom: 0 !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
white-space: normal !important;
hyphens: auto !important;
}

.nested-list-item .list-content .list-name .editable,
.nested-list-item .list-content .list-name span {
width: 100% !important;
max-width: 100% !important;
font-size: 1rem !important;
line-height: 1.4 !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
white-space: normal !important;
display: block !important;
hyphens: auto !important;
}

/* Create a new bottom row that includes EVERYTHING horizontally */
.nested-list-item {
position: relative !important;
}

/* Bottom row with evenly distributed elements */
.nested-list-item .list-content {
position: relative !important;
padding-bottom: calc(var(--space-sm) + 32px) !important; /* Extra space for bottom row */
}

/* Position meta text on bottom left */
.nested-list-item .list-content .list-meta {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
font-size: 0.8rem !important;
color: var(--text-secondary) !important;
margin: 0 !important;
z-index: 1 !important;
white-space: nowrap !important;
max-width: 40% !important; /* Limit width to avoid overlap */
overflow: hidden !important;
text-overflow: ellipsis !important;
}

/* Position actions on bottom right with consistent spacing */
.nested-list-item .list-actions {
position: absolute !important;
bottom: 0 !important;
right: 0 !important;
display: flex !important;
align-items: center !important;
gap: 12px !important; /* Fixed gap for consistency across devices */
margin: 0 !important;
padding: 0 !important;
z-index: 1 !important;
max-width: 55% !important; /* Leave space for meta */
justify-content: flex-end !important;
box-sizing: border-box !important;
}

/* Actions layout */
.nested-list-item .list-letter-badge {
order: 1 !important;
}

.nested-list-item .list-task-count {
order: 2 !important;
font-size: 0.9rem !important;
}

.nested-list-item .covert-delete {
order: 3 !important;
}

/* Consistent mobile text containment - works on all devices */
.nested-list-item .list-content .list-name .editable,
.nested-list-item .list-content .list-name span {
width: 100% !important;
max-width: 100% !important; /* Container-relative, not viewport */
word-break: break-word !important;
overflow-wrap: break-word !important;
white-space: normal !important;
box-sizing: border-box !important;
display: block !important;
overflow: hidden !important;
}

/* Universal container-aware text wrapping for ALL screen sizes */
.nested-list-item .list-content {
    overflow: hidden !important; /* Prevent any child from overflowing */
}

.nested-list-item .list-content .list-name {
    width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* MOBILE ONLY: Force text wrapping for mobile devices */
@media (max-width: 768px) {
.nested-list-item .list-content .list-name span,
.nested-list-item .list-content .list-name .editable {
    width: 100% !important;
    max-width: 100% !important;
    word-break: break-word !important; /* Break at word boundaries */
    overflow-wrap: break-word !important; /* Break at word boundaries */
    word-wrap: break-word !important; /* Legacy support */
    white-space: normal !important;
    display: block !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    hyphens: auto !important;
    line-height: 1.4 !important;
    /* Force container awareness */
    contain: layout style !important;
}
}

/* Force container constraints on mobile */
@supports (width: 100dvw) {
    body .nested-list-item .list-content .list-name .editable {
        max-width: calc(100dvw - 120px) !important;
    }
}

/* Device-agnostic mobile text handling - single breakpoint approach */
@media (max-width: 768px) {
    .nested-list-item .list-content .list-name span,
    .nested-list-item .list-content .list-name .editable {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        line-height: 1.4 !important;
        hyphens: auto !important;
    }
}

/* Container query fallback - for when media queries fail */
.nested-list-item {
    container-type: inline-size;
}

@container (max-width: 400px) {
    .nested-list-item .list-content .list-name span,
    .nested-list-item .list-content .list-name .editable {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 95% !important;
    }
}

/* MOBILE ONLY: Maximum specificity text wrap for mobile devices */
@media (max-width: 768px) {
body .group-item .group-lists .nested-list-item .list-content .list-name span.editable,
body .group-item .group-lists .nested-list-item .list-content .list-name span,
html body .nested-list-item .list-content .list-name .editable {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    white-space: normal !important;
    max-width: 100% !important;
    width: 100% !important;
    display: block !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    hyphens: auto !important;
    line-height: 1.4 !important;
}

/* CRITICAL: Mobile fix for list names - mobile devices only */
.nested-list-item .list-content .list-name span.editable {
    /* Force text to break and wrap within card boundaries */
    width: 100% !important;
    max-width: 100% !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    display: block !important;
    vertical-align: top !important;
    line-height: 1.4 !important;
    hyphens: auto !important;
    box-sizing: border-box !important;
}
}

/* Mobile-specific click targets with consistent sizing */
@media (max-width: 768px) {
    .nested-list-item .list-content .list-name span[onclick] {
        max-width: 100% !important; /* Container-relative sizing */
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        box-sizing: border-box !important;
        padding-right: 0 !important;
        margin-right: 0 !important;
    }
}

}

/* Desktop list content styling - restore clean horizontal layout */
@media (min-width: 769px) {
.nested-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    gap: var(--space-md);
}

.nested-list-item .list-content {
    flex: 1;
    position: static;
    padding-bottom: 0;
    margin-bottom: 0;
}

.nested-list-item .list-content .list-meta {
    position: static;
    margin-top: var(--space-xs);
}

.nested-list-item .list-actions {
    position: static;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
}
}

.list-content {
width: 100%;
overflow: hidden;
}

.nested-list-item {
padding: var(--space-md);
}

/* Enhanced touch targets for mobile */
.btn,
.nav-btn,
.task-item,
.card {
min-height: 48px;
touch-action: manipulation;
}

/* DEVICE-AGNOSTIC MOBILE FIXES - Addresses real device vs simulation differences */
@media (max-width: 768px) {
    /* Ensure consistent viewport interpretation across all mobile devices */
    .nested-list-item {
        contain: layout style !important; /* Isolate layout calculations */
        will-change: auto !important; /* Reset hardware acceleration */
    }
    
    /* Force consistent text measurement and wrapping */
    .nested-list-item .list-content {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        contain: layout !important;
    }
    
    /* Prevent subpixel rendering differences */
    .nested-list-item .list-content .list-name {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        transform: translateZ(0) !important; /* Force GPU layer */
    }
    
    /* Ensure text elements respect their containers consistently */
    .nested-list-item .list-content .list-name .editable,
    .nested-list-item .list-content .list-name span {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        white-space: normal !important;
        display: block !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        text-align: left !important;
        direction: ltr !important;
        unicode-bidi: normal !important;
        line-height: 1.4 !important;
        font-size: 1rem !important;
        /* Force consistent font rendering */
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
        text-rendering: optimizeLegibility !important;
    }
    
    /* Normalize bottom row positioning across devices */
    .nested-list-item .list-content .list-meta {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: auto !important;
        max-width: 45% !important;
        height: auto !important;
        transform: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .nested-list-item .list-actions {
        position: absolute !important;
        bottom: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-width: 50% !important;
        height: auto !important;
        transform: none !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }
}

/* Improve mobile navigation */
.nav-btn {
padding: var(--space-lg) var(--space-md);
font-size: 0.875rem;
}

/* Mobile floating button adjustments — 60px spacing */
/* Mobile far-right stacking — bumped to clear the primary FAB (which sits
   at the bottom-right corner). 2026-05-22 follow-up to the right: 90px
   removal. 2026-05-23 — Send-to-Primer green FAB shrunk to 40×40 and
   shifted to right: 8px to align with mobile Quick-Jump Letter circles. */
.floating-action-secondary {
    bottom: 80px !important;
    width: 32px !important;
    height: 32px !important;
    right: 8px !important;
    font-size: 0.85rem !important;
}

.floating-action-tertiary {
    bottom: auto !important;
    top: calc(50% + 4px) !important;
    right: 8px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 0.85rem !important;
}

.floating-action-quaternary {
    bottom: auto !important;
    top: calc(50% - 36px) !important;
    right: 8px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 0.85rem !important;
}

.floating-action-quinary {
    bottom: 128px !important;
    width: 32px !important;
    height: 32px !important;
    right: 8px !important;
    font-size: 0.85rem !important;
}

/* Mobile primer card — slightly tighter but keep checkbox gap */
.primer-card {
    padding: 0.625rem 0.75rem;
    gap: 1rem;
}

.stats-grid {
grid-template-columns: 1fr;
gap: var(--space-md);
}

.deadline-stats {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: var(--space-sm);
}

.task-item, .card, .nested-list-item, .group-item {
padding: var(--space-sm) var(--space-md);
margin-bottom: var(--space-sm);
}

.task-name {
font-size: 0.875rem;
line-height: 1.3;
}

.modal {
padding: var(--space-sm);
}

.modal-content {
padding: var(--space-lg);
margin: 0;
max-width: 100%;
max-height: 85vh; /* Reduce height on mobile for better viewport fit */
overflow-y: auto; /* Ensure scrolling works */
-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
border-radius: var(--border-radius-small);
}

/* Ensure task list inside modal can scroll properly on mobile */
#listViewTasks {
max-height: 60vh; /* Constrain task list height */
overflow-y: auto; /* Enable scrolling for task list */
-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
margin-top: var(--space-md);
}

.notification-container {
    width: calc(100vw - 1.5rem);
    padding-top: 10px;
}

.floating-action {
bottom: var(--space-lg);
right: var(--space-lg);
width: 48px;
height: 48px;
font-size: 1.25rem;
}

/* Mobile: bulk button takes the up-jump's slot (bottom: 144px). The
   up-jump auto-hides when bulk is visible (see :has() rule above), so
   no collision. right: 90px matches the existing Focus FAB column
   (sendAllToPrimerBtn / focusJumpDownBtn). */
.floating-bulk-button {
bottom: 144px;
right: 90px;
width: 56px;
height: 56px;
}

/* Mobile: bump the sticky group-mode bar below the fixed header-nav
   icons row (~54px tall) so it doesn't get covered. Desktop uses
   .center-pane as the scroll container which already starts below
   the header, so top:0 is correct there (set in the base rule). */
.group-mode-bar {
top: 54px;
}

.bulk-button-content {
padding: 0;
gap: 0;
}

.bulk-button-text {
font-size: 0.85rem;
}

.bulk-button-count {
font-size: 0.75rem;
padding: 1px 6px;
}

.task-context-menu {
width: calc(100vw - 2rem);
max-width: 100%;
padding: var(--space-lg);
}

.undo-redo-controls {
bottom: var(--space-sm);
left: var(--space-sm);
opacity: 0.75;
}

.undo-btn, .redo-btn {
width: 36px;
height: 36px;
font-size: 0.9rem;
}

/* Mobile group layout optimizations */
.group-actions {
flex-wrap: nowrap;
gap: var(--space-xs);
}

.group-actions .btn {
flex: none;
min-width: auto;
}


/* Deadline cards mobile optimization */
.deadline-card {
padding: var(--space-md);
}

.deadline-cards-container {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
}


/* Expand/Collapse Controls Mobile */
.expand-toggle {
min-width: 44px !important;
min-height: 44px !important;
padding: var(--space-sm) !important;
font-size: 1rem !important;
margin-right: var(--space-sm) !important;
}

.expand-toggle.subtask-toggle {
min-width: 40px !important;
min-height: 40px !important;
padding: var(--space-xs) !important;
font-size: 0.875rem !important;
}


/* Delete Buttons Mobile */
.delete-btn, .orphaned-delete-btn {
min-width: 44px !important;
min-height: 44px !important;
padding: var(--space-sm) !important;
font-size: 1rem !important;
margin-left: var(--space-sm) !important;
flex-shrink: 0 !important;
}


/* Repeated Task Mobile */
.repeated-task-completions {
padding-left: var(--space-md) !important;
}

.completion-entry {
padding: var(--space-sm) !important;
margin-bottom: var(--space-xs) !important;
font-size: 0.875rem !important;
}

.completion-delete-btn {
min-width: 36px !important;
min-height: 36px !important;
padding: var(--space-xs) !important;
font-size: 0.875rem !important;
}

}

/* CLEAN SCROLLBARS */
::-webkit-scrollbar {
width: 4px;
}

::-webkit-scrollbar-track {
background: var(--bg-tertiary);
border-radius: 2px;
}

::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
background: var(--text-muted);
}

/* ================================
ARCHIVE PAGE STYLING
================================ */

/* Archive Content Wrapper */
.archive-content-wrapper {
    position: relative;
    min-height: 400px;
}

.archive-container {
    position: relative;
    min-height: 300px;
}

/* Loading State */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xxl);
    text-align: center;
    color: var(--text-secondary);
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top: 3px solid var(--accent-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: var(--space-md);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text {
    font-size: 0.9rem;
    font-weight: 500;
}

/* Archive Page Header */
.archive-page-header {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-md);
    padding: 14px 16px;
    background: var(--bg-secondary);
    border: none;
    border-radius: 16px;
    box-shadow: none;
    gap: 10px;
}

.archive-page-title {
flex: 1;
}

.archive-page-title h2,
.archive-page-title h3 {
margin: 0 0 2px 0;
font-size: 1.1rem;
font-weight: 700;
color: var(--text-primary);
}

.archive-page-subtitle {
margin: 0 0 4px 0;
color: var(--text-muted);
font-size: 0.78rem;
}

.archive-page-actions {
display: flex;
gap: 6px;
align-items: center;
flex-wrap: wrap;
justify-content: flex-start;
}

.archive-page-actions .btn-secondary {
padding: 6px 12px;
background: var(--bg-tertiary);
color: var(--text-secondary);
border: none;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
min-height: 28px;
}

/* Archive action chips — Memorigi style */
.archive-select-all-btn,
.archive-delete-selected-btn,
.archive-expand-btn,
.archive-collapse-btn,
.clear-orphaned-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 6px 12px;
background: var(--bg-tertiary);
color: var(--text-secondary);
border: none;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease;
text-decoration: none;
white-space: nowrap;
user-select: none;
min-height: 28px;
box-shadow: none;
}

.archive-select-all-btn:hover,
.archive-expand-btn:hover,
.archive-collapse-btn:hover {
background: var(--hover-bg);
color: var(--text-primary);
}

.archive-delete-selected-btn {
background: rgba(220, 53, 69, 0.12);
color: var(--danger-color);
border: none;
}

.archive-delete-selected-btn:hover {
background: rgba(220, 53, 69, 0.2);
}

.clear-orphaned-btn {
background: rgba(255, 140, 0, 0.12);
color: var(--warning-color);
border: none;
}

.clear-orphaned-btn:hover {
background: rgba(255, 140, 0, 0.2);
}

/* Enhanced Archive Card System */
.archive-item {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
margin-bottom: var(--space-md);
position: relative;
overflow: hidden;
}

.archive-item:hover {
border-color: var(--border-hover);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transform: translateY(-1px);
}

.archive-item.selected {
border-color: var(--accent-color);
background: rgba(0, 102, 204, 0.05);
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1), 0 4px 12px rgba(0, 102, 204, 0.15);
}

.archive-item.selected::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--accent-color);
border-radius: 0 2px 2px 0;
}

.archive-stats {
    display: flex;
    gap: 6px;
    margin-top: 2px;
    flex-wrap: wrap;
}

.archive-stat-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    background: var(--bg-tertiary);
    border: none;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
}

.archive-stat-item.orphaned {
    background: rgba(255, 193, 7, 0.1);
    color: var(--warning-color);
}

.archive-stat-item .icon-emoji {
    font-size: 0.75rem;
}

.orphaned-count {
padding: var(--space-xs) var(--space-sm);
background: var(--warning-color);
color: white;
border-radius: var(--border-radius-small);
font-size: 0.8rem;
font-weight: 500;
}

/* Archive Items */
.archive-item {
display: flex;
flex-direction: column;
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
margin-bottom: var(--space-sm);
transition: all 0.2s ease;
position: relative;
}

/* Archive item hover and selected states already defined above */

.archive-item-header {
display: flex;
align-items: center;
padding: var(--space-md);
gap: var(--space-sm);
border-bottom: 1px solid var(--border-color);
background: var(--bg-tertiary);
cursor: pointer;
transition: background-color 0.2s ease;
}

.archive-item-header:hover {
background: rgba(0, 102, 204, 0.02);
}

.archive-item-hierarchy-with-toggle {
display: flex;
align-items: center;
gap: var(--space-xs);
min-width: 0;
}

.archive-item-hierarchy {
font-family: 'Courier New', monospace;
color: var(--text-muted);
font-size: 0.9rem;
white-space: nowrap;
}

.archive-expand-toggle {
width: 20px;
height: 20px;
border: 1px solid var(--border-color);
background: var(--bg-secondary);
border-radius: 3px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
color: var(--text-primary);
transition: all 0.2s ease;
}

.archive-expand-toggle:hover {
background: var(--hover-bg);
border-color: var(--border-hover);
}

.archive-expand-toggle.expanded {
background: var(--accent-color);
color: white;
border-color: var(--accent-color);
}

.archive-item-content {
flex: 1;
cursor: pointer;
padding: var(--space-xs);
border-radius: var(--border-radius-small);
transition: background-color 0.2s ease;
}

.archive-item-content:hover {
background: var(--hover-bg);
}

.archive-item-name {
font-weight: 500;
color: var(--text-primary);
margin-bottom: var(--space-xs);
line-height: 1.4;
}

.archive-item-task {
color: var(--text-secondary);
font-size: 0.9rem;
margin-bottom: var(--space-xs);
line-height: 1.3;
}

.archive-item-meta {
color: var(--text-muted);
font-size: 0.85rem;
margin-bottom: var(--space-xs);
line-height: 1.3;
}

.archive-item-time {
color: var(--text-muted);
font-size: 0.8rem;
font-family: 'Courier New', monospace;
}

/* Archive Parent Context (for orphaned items) */
.archive-item-parent-context {
display: flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-xs);
background: var(--warning-color);
color: white;
border-radius: var(--border-radius-small);
font-size: 0.8rem;
margin-bottom: var(--space-xs);
}

.parent-context-icon {
font-size: 0.9rem;
}

.parent-context-text {
flex: 1;
}

.parent-status-indicator {
font-size: 0.8rem;
opacity: 0.9;
}

/* Archive Children Container */
.archive-children-container {
overflow: hidden;
transition: all 0.3s ease;
border-top: 1px solid var(--border-color);
}

.archive-children-container.collapsed {
max-height: 0;
opacity: 0;
}

.archive-children-container.expanded {
max-height: 2000px;
opacity: 1;
}

.archive-children-container.transitioning {
transition: max-height 0.3s ease, opacity 0.2s ease;
}

.archive-children-container > .archive-item {
margin: 0;
border-radius: 0;
border-left: none;
border-right: none;
border-bottom: 1px solid var(--border-color);
}

.archive-children-container > .archive-item:last-child {
border-bottom: none;
}

/* Archive Item Level Styling */
.archive-item.level-0 {
margin-left: 0;
}

.archive-item.level-1 {
margin-left: var(--space-md);
}

.archive-item.level-2 {
margin-left: var(--space-lg);
}

.archive-item.level-3 {
margin-left: var(--space-xl);
}

/* Archive Item Types */
.archive-item.task-item {
border-left: 4px solid var(--accent-color);
}

.archive-item.subtask-item {
border-left: 4px solid var(--success-color);
}

.archive-item.timeline-item {
border-left: 4px solid var(--text-muted);
}

.archive-item.repeated-task-item {
border-left: 4px solid var(--warning-color);
}

/* Orphaned Items */
.archive-item.orphaned-item {
border-left: 4px solid var(--danger-color);
background: rgba(220, 53, 69, 0.02);
}

.archive-item.orphaned-item .archive-item-header {
background: rgba(220, 53, 69, 0.05);
}

/* Archive Selection */
.archive-selection-indicator {
position: absolute;
top: var(--space-xs);
right: var(--space-xs);
background: var(--accent-color);
color: white;
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 600;
z-index: var(--z-content);
}

.selection-checkmark {
font-size: 0.9rem;
}

.selection-number {
font-size: 0.7rem;
font-weight: 700;
}

/* Archive Action Buttons */
.archive-remove-btn,
.orphaned-remove-btn {
padding: var(--space-xs);
background: transparent;
border: 1px solid var(--border-color);
border-radius: var(--border-radius-small);
color: var(--text-muted);
cursor: pointer;
transition: all 0.2s ease;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
}

.archive-remove-btn:hover {
background: var(--danger-color);
border-color: var(--danger-color);
color: white;
}

.orphaned-remove-btn:hover {
background: var(--warning-color);
border-color: var(--warning-color);
color: white;
}

/* Repeated Task Items */
.repeated-task-header {
cursor: pointer;
padding: var(--space-xs);
border-radius: var(--border-radius-small);
transition: background-color 0.2s ease;
}

.repeated-task-header:hover {
background: var(--hover-bg);
}

.repeated-task-title {
display: flex;
align-items: center;
gap: var(--space-sm);
}

.repeated-task-name {
font-weight: 500;
color: var(--text-primary);
}

.repeated-task-count {
color: var(--text-muted);
font-size: 0.85rem;
}

.repeated-task-expand-icon {
margin-left: auto;
color: var(--text-muted);
}

/* Archive Sections */
.archive-section {
margin-bottom: var(--space-xl);
}

.archive-section-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-md);
padding-bottom: var(--space-xs);
border-bottom: 2px solid var(--border-color);
}

/* Archive Search */
.archive-search-container {
margin-bottom: var(--space-lg);
}

#archiveSearchInput {
width: 100%;
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
font-size: 1rem;
transition: all 0.2s ease;
}

#archiveSearchInput:focus {
outline: none;
border-color: var(--accent-color);
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1);
}

/* Responsive Design */
/* More comprehensive mobile breakpoints */
@media (max-width: 768px), (max-width: 480px), (max-width: 360px) {

.archive-item.level-1,
.archive-item.level-2,
.archive-item.level-3 {
margin-left: var(--space-sm);
}

.archive-select-all-btn,
.archive-delete-selected-btn,
.archive-expand-btn,
.archive-collapse-btn,
.clear-orphaned-btn {
min-height: 32px;
}

.archive-item {
margin-bottom: var(--space-sm);
}

.archive-item-header {
padding: var(--space-sm);
}

.archive-item-hierarchy {
font-size: 0.8rem;
}

.archive-item.level-1,
.archive-item.level-2,
.archive-item.level-3 {
margin-left: var(--space-sm);
}
}

/* SIDEBAR NAVIGATION STYLES
Desktop/Tablet Sidebar Navigation Enhancement
============================================ */

/* Sidebar container - fixed position on desktop/tablet */
.sidebar-nav {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 100vh;
background: var(--bg-secondary);
border-right: 1px solid var(--border-color);
transform: translateX(0);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: var(--z-navigation);
display: none; /* Hidden by default, shown via media query */
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: var(--border-color) transparent;
}

/* Custom scrollbar for sidebar */
.sidebar-nav::-webkit-scrollbar {
width: 6px;
}

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

.sidebar-nav::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 3px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
background: var(--border-hover);
}

/* Sidebar header/logo area */
.sidebar-header {
padding: var(--space-md) var(--space-lg);
border-bottom: 1px solid var(--border-color);
display: flex;
flex-direction: column;
gap: var(--space-sm);
}

/* Hamburger badge — Facebook-style top-right red/cyan dot */
/* Fixed header nav icons (Morning, Focus, Primer) */
.header-nav-icons {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    gap: 12px;
    align-items: center;
    justify-content: flex-start;
    padding: 12px 60px 8px;
    /* overflow-y was 'hidden' but that clipped the top edge of notification
       badges that sit at `top: -5px` of each icon. Set to visible so the
       badges' halo border (drawn in --bg-primary) shows cleanly. The horizontal
       scroll stays via overflow-x: auto. */
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(128, 128, 128, 0.4) transparent;
    flex-wrap: nowrap;
}

.header-nav-icons::-webkit-scrollbar {
    height: 4px;
}

.header-nav-icons::-webkit-scrollbar-track {
    background: transparent;
}

.header-nav-icons::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.4);
    border-radius: 2px;
}

.header-nav-icons::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 128, 128, 0.7);
}

/* Real touch devices (phones, tablets) already scroll via swipe — keep the
   row clean of any scrollbar there. Desktop browsers (and narrow-window
   mobile emulation) get the subtle 4px bar above. */
@media (hover: none) and (pointer: coarse) {
    .header-nav-icons {
        scrollbar-width: none;
    }
    .header-nav-icons::-webkit-scrollbar {
        display: none;
    }
}

body.logged-in .header-nav-icons {
    display: flex;
}

/* Modal clearance below fixed header nav.
   Modals open at z-index 50000 per ModalManager; header-nav-icons sits at
   99999 (documented hierarchy in CLAUDE.md). So the header nav covers any
   modal that extends to the viewport top. Add explicit top padding to .modal
   when logged in so flex-centering happens inside a virtual area that
   clears the nav row — keeps the modal title/close button visible on tall
   modals like the subtasks view. Only affects logged-in state so the login
   screen isn't pushed down. */
body.logged-in .modal {
    padding-top: 64px;
}

/* Push page content below fixed header nav.
   Bumped 50px → 54px because the row gained 4px top padding to give
   notification badges (top:-5px + 2px halo) breathing room. */
body.logged-in .main-container {
    padding-top: 54px;
}

/* Push page headers below the fixed header nav bar */
body.logged-in .header {
    top: 54px;
}

/* Push page content below both fixed bars (nav icons 50px + page header ~39px) */
body.logged-in .page-content {
    padding-top: 8px;
}

.header-nav-icon {
    position: relative;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.3rem;
    padding: 6px 10px;
    border-radius: 10px;
    transition: background 0.15s ease, transform 0.1s ease;
    color: var(--text-secondary);
    line-height: 1;
    overflow: visible;
    flex-shrink: 0;
}

/* The tap-feedback handler injects .lam-ripple-host on first tap, which
   forces overflow: hidden to contain the ripple animation. That clips
   the .header-nav-badge children (positioned at top:-5px right:-6px,
   intentionally outside the button's box). Override with !important so
   badges keep rendering as fully-rounded pills after the first tap.
   Trade-off: the ripple may extend a few px outside the button on tap,
   but the badges sit on a dark row where any brief ripple bleed is
   visually negligible. */
.header-nav-icon.lam-ripple-host {
    overflow: visible !important;
}

.header-nav-icon:hover {
    background: var(--hover-bg);
}

.header-nav-icon:active {
    transform: scale(0.9);
}

.header-nav-icon.active {
    color: var(--accent-color);
    background: var(--hover-bg);
}

.header-nav-badge {
    display: none;
    position: absolute;
    /* Pulled further from the icon corner (was top:-2/right:-4) so the
       halo border doesn't intrude on the icon glyph. */
    top: -5px;
    right: -6px;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    padding: 0 5px;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
    background: var(--accent-color);
    /* 2px halo in --bg-secondary (one shade up from --bg-primary, used
       for cards). Must NOT match --bg-primary, which is also the row's
       background — otherwise the halo blends into the row and the badge's
       rounded corners read as clipped (flat top). The slightly lighter
       halo separates the badge from both the dark row AND the icon glyph
       beneath. */
    border: 2px solid var(--bg-secondary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    max-width: 34px;
}

.header-nav-badge.has-count {
    display: flex;
}

/* Unique badge colors per page */
#headerBadgeMorning { background: var(--badge-morning-color, #f59e0b); color: #1a1a1a; }
#headerBadgeFocus { background: var(--badge-focus-color, #00bcd4); color: #0a2a28; }
#headerBadgePrimer { background: var(--badge-primer-color, #6366f1); color: #1a1a1a; }
#headerBadgeToday { background: var(--badge-today-color, #4caf50); color: #fff; }
#headerBadgeDeadlines { background: var(--badge-deadlines-color, #ef4444); color: #fff; }

/* Toggleable header nav icons — hidden by default, shown when page visibility enabled */
.header-nav-toggleable {
    display: none;
}

.hamburger-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #00bcd4;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    pointer-events: none;
}

.sidebar-close-btn {
align-self: flex-end;
background: transparent;
border: none;
color: var(--text-secondary);
font-size: 1.25rem;
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
transition: color 0.15s ease, background 0.15s ease;
}

.sidebar-close-btn:hover {
color: var(--text-primary);
background: var(--hover-bg);
}

.sidebar-header h2 {
font-size: 1.125rem;
font-weight: 700;
color: var(--text-primary);
margin: 0;
letter-spacing: 0.02em;
}

/* Sidebar navigation items container */
.sidebar-nav-items {
padding: var(--space-sm) 0;
}

/* Individual sidebar navigation item */
.sidebar-nav-item {
display: flex;
align-items: center;
gap: var(--space-md);
padding: 10px var(--space-lg);
color: var(--text-secondary);
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
border: none;
background: transparent;
width: 100%;
text-align: left;
cursor: pointer;
transition: color 0.15s ease, background 0.15s ease;
position: relative;
border-left: 3px solid transparent;
}

.sidebar-nav-item:hover {
color: var(--text-primary);
background: var(--hover-bg);
}

/* Active state with accent color indicator */
.sidebar-nav-item.active {
color: var(--accent-color);
background: var(--hover-bg);
font-weight: 600;
border-left-color: var(--accent-color);
}

/* Badge positioning in sidebar — far right, inline with text */
nav.sidebar-nav #sidebarMorningBtn .nav-badge,
nav.sidebar-nav #sidebarFocusBtn .nav-badge,
nav.sidebar-nav #sidebarTodayBtn .nav-badge,
nav.sidebar-nav #sidebarPrimerBtn .nav-badge,
nav.sidebar-nav #sidebarDeadlinesBtn .nav-badge,
nav.sidebar-nav .sidebar-nav-item .nav-badge {
    position: static !important;
    transform: none !important;
    margin-left: auto !important;
    bottom: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    flex-shrink: 0 !important;
}

/* Icon styling within sidebar items */
.sidebar-nav-item .nav-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
font-size: 1rem;
flex-shrink: 0;
opacity: 0.8;
}

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

/* Blinking animations for special items */
.sidebar-nav-item.morning-blink {
animation: sidebarMorningBlink 1s 15;
}

.sidebar-nav-item.focus-blink {
animation: sidebarFocusBlink 1s 15;
}

@keyframes sidebarMorningBlink {
0%, 50% { 
color: var(--morning-blink-color);
font-weight: 600;
}
51%, 100% { 
color: var(--text-secondary);
font-weight: 500;
}
}

@keyframes sidebarFocusBlink {
0%, 50% { 
color: var(--focus-blink-color);
font-weight: 600;
}
51%, 100% { 
color: var(--text-secondary);
font-weight: 500;
}
}

/* Main content container adjustment */
.main-container {
transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
margin-left: 0;
}

/* Toggle button — hidden (using horizontal nav instead) */
.sidebar-toggle {
display: none;
position: fixed;
top: 6px;
left: 8px;
z-index: 100001;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 8px 12px;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: var(--shadow-soft);
}

.sidebar-toggle:hover {
background: var(--hover-bg);
border-color: var(--border-hover);
box-shadow: var(--shadow-medium);
}

.sidebar-toggle .icon {
font-size: 1.25rem;
color: var(--text-primary);
}

/* Sidebar backdrop */
.sidebar-backdrop {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: calc(var(--z-navigation) - 1);
opacity: 0;
transition: opacity 0.3s ease;
}

/* Global: hamburger slide-in for all logged-in users */
body.logged-in .sidebar-nav {
    display: block;
    transform: translateX(-100%);
}
body.logged-in .sidebar-nav.active {
    transform: translateX(0);
    box-shadow: var(--shadow-medium);
}
body.logged-in .sidebar-toggle {
    display: block;
}
body.logged-in .sidebar-backdrop {
    display: block;
    pointer-events: none;
}
body.logged-in .sidebar-backdrop.active {
    pointer-events: auto;
}
/* Hide horizontal nav bars — sidebar is the primary navigation */
body.logged-in .nav {
    display: none !important;
}
body:not(.logged-in) .sidebar-nav,
body:not(.logged-in) .sidebar-toggle,
body:not(.logged-in) .sidebar-backdrop {
    display: none !important;
}

.sidebar-backdrop.active {
opacity: 1;
}

/* Media Queries for Responsive Behavior */

/* Desktop view (min-width: 1025px) — hamburger slide-in (same as mobile/tablet) */
@media (min-width: 1025px) {
/* Sidebar slides in from left, hidden by default */
body.logged-in .sidebar-nav {
    display: block;
    transform: translateX(-100%);
}

body.logged-in .sidebar-nav.active {
    transform: translateX(0);
    box-shadow: var(--shadow-medium);
}

/* Show hamburger toggle */
body.logged-in .sidebar-toggle {
    display: block;
}

/* Show backdrop when sidebar open */
body.logged-in .sidebar-backdrop {
    display: block;
    pointer-events: none;
}

body.logged-in .sidebar-backdrop.active {
    pointer-events: auto;
}

/* Hide horizontal nav */
body.logged-in .nav {
    display: none !important;
}

/* No left margin — sidebar is overlay, not permanent */
body.logged-in .main-container {
    margin-left: 0;
    min-height: 100vh;
}

/* Remove fixed-header padding — header is sticky on desktop */
body.logged-in .page {
    padding-top: 0;
}

/* Login page should fill full screen */
body:not(.logged-in) .sidebar-nav,
body:not(.logged-in) .sidebar-toggle,
body:not(.logged-in) .sidebar-backdrop {
    display: none !important;
}

body:not(.logged-in) .main-container {
    margin-left: 0 !important;
}

/* Adjust header only when logged in — compact on desktop */
body.logged-in .header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    z-index: var(--z-header);
    padding: var(--space-sm) var(--space-xl);
    padding-left: var(--space-md);
    box-sizing: border-box;
}

body.logged-in .header h1 {
    font-size: 1.15rem;
}

body.logged-in .header .page-subtitle {
    font-size: 0.8rem;
    margin-top: 2px;
}

/* Header on login page should be normal */
body:not(.logged-in) .header {
    position: static;
    left: 0;
    padding: var(--space-lg);
}

/* Desktop page content — constrained width centered in center-pane */
.page-content {
padding: var(--space-lg) var(--space-2xl);
max-width: 1200px;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
}

/* Desktop container — constrained width centered in center-pane */
.container {
max-width: 1200px;
margin: 0 auto;
width: 100%;
padding: 0 var(--space-lg) 160px;
box-sizing: border-box;
}

/* Better desktop card layouts — fill container naturally */
.card {
margin-bottom: var(--space-lg);
max-width: 100%;
box-shadow: var(--shadow-soft);
transition: box-shadow 0.2s ease;
}

.card:hover {
box-shadow: var(--shadow-medium);
}

/* Settings buttons — reasonable width */
.settings-button {
max-width: 500px;
}

/* Optimize desktop modals */
.modal-content {
max-width: 700px;
margin: 5vh auto;
}

/* Better desktop floating action buttons */
.floating-action {
bottom: var(--space-2xl);
right: var(--space-2xl);
width: 56px;
height: 56px;
font-size: 1.35rem;
}

/* Optimize desktop grid layouts — multi-column groups */
.groups-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: var(--space-lg);
padding: var(--space-md);
}

/* Enhanced desktop buttons */
.btn {
transition: all 0.2s ease;
}

.btn:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-medium);
}

/* Desktop-optimized login page */
body:not(.logged-in) .login-page {
max-width: none;
width: 100%;
height: 100vh;
margin: 0;
padding: var(--space-2xl);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 40%, #667eea 100%);
background-size: 400% 400%;
animation: gradientShift 15s ease infinite;
position: relative;
overflow: hidden;
}

/* Animated gradient background */
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

/* Add subtle background pattern */
body:not(.logged-in) .login-page::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: 
radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
z-index: -1;
}

/* Enhanced login content container for desktop */
body:not(.logged-in) .login-page .login-content {
max-width: 600px;
width: 100%;
text-align: center;
padding: var(--space-2xl) var(--space-xl);
background: rgba(255, 255, 255, 0.1);
border-radius: 24px;
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
position: relative;
overflow: hidden;
animation: loginContentFloat 6s ease-in-out infinite;
}

/* Floating animation for login content */
@keyframes loginContentFloat {
0%, 100% { 
transform: translateY(0px);
}
50% { 
transform: translateY(-10px);
}
}

/* Add subtle glow effect */
body:not(.logged-in) .login-page .login-content::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, 
rgba(255, 255, 255, 0.1), 
rgba(255, 255, 255, 0.05), 
rgba(255, 255, 255, 0.1));
border-radius: 26px;
z-index: -1;
animation: loginGlow 4s ease-in-out infinite;
}

@keyframes loginGlow {
0%, 100% { 
opacity: 0.5;
}
50% { 
opacity: 0.8;
}
}

/* Enhanced logo for desktop */
body:not(.logged-in) .logo {
font-size: 4rem;
margin-bottom: var(--space-xl);
text-shadow: 0 4px 30px rgba(0,0,0,0.4);
}

/* Enhanced subtitle for desktop */
body:not(.logged-in) .login-subtitle {
font-size: 1.5rem;
margin-bottom: var(--space-2xl);
opacity: 0.9;
font-weight: 400;
}

/* Enhanced button for desktop */
body:not(.logged-in) .login-btn {
padding: var(--space-lg) var(--space-2xl);
font-size: 1.25rem;
min-width: 200px;
border-radius: 60px;
box-shadow: 0 10px 35px rgba(238, 90, 36, 0.5);
}

body:not(.logged-in) .login-btn:hover {
transform: translateY(-4px) scale(1.08);
box-shadow: 0 15px 45px rgba(238, 90, 36, 0.7);
}

/* Desktop lists — fill container naturally */
.list-container {
max-width: 100%;
}

/* Enhanced desktop deadlines view */
.deadline-categories {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: var(--space-lg);
}
}

/* Tablet view (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
/* Enhanced login page for tablet */
body:not(.logged-in) .login-page .login-content {
max-width: 500px;
padding: var(--space-xl) var(--space-lg);
}

body:not(.logged-in) .logo {
font-size: 3.5rem;
}

body:not(.logged-in) .login-subtitle {
font-size: 1.4rem;
}

body:not(.logged-in) .login-btn {
font-size: 1.2rem;
padding: var(--space-lg) var(--space-xl);
}
/* Show sidebar but allow toggle only when logged in */
body.logged-in .sidebar-nav {
display: block;
transform: translateX(-100%);
}

body.logged-in .sidebar-nav.active {
transform: translateX(0);
box-shadow: var(--shadow-medium);
}

/* Show hamburger toggle when logged in */
body.logged-in .sidebar-toggle {
display: block;
}

/* Show backdrop when sidebar is active and logged in */
body.logged-in .sidebar-backdrop {
display: block;
pointer-events: none;
}

body.logged-in .sidebar-backdrop.active {
pointer-events: auto;
}

/* Hide horizontal nav only when logged in */
body.logged-in .nav {
display: none !important;
}

/* Hide sidebar completely when not logged in */
body:not(.logged-in) .sidebar-nav,
body:not(.logged-in) .sidebar-toggle,
body:not(.logged-in) .sidebar-backdrop {
display: none !important;
}

/* Adjust main container when sidebar is active */
.main-container.sidebar-active {
margin-left: 200px;
}

/* Adjust header positioning */
.header {
position: sticky;
top: 0;
left: 0;
right: 0;
z-index: var(--z-header);
padding-left: calc(60px + var(--space-lg)); /* Space for toggle button */
}
}

/* Mobile view (max-width: 768px) - Hamburger slide-in menu */
@media (max-width: 768px), (max-width: 480px), (max-width: 360px) {
/* Show sidebar as slide-in overlay (same as tablet) */
body.logged-in .sidebar-nav {
    display: block !important;
    transform: translateX(-100%);
}

body.logged-in .sidebar-nav.active {
    transform: translateX(0);
    box-shadow: var(--shadow-medium);
}

/* Show hamburger toggle when logged in */
body.logged-in .sidebar-toggle {
    display: block !important;
}

/* Show backdrop when sidebar is active */
body.logged-in .sidebar-backdrop {
    display: block !important;
    pointer-events: none;
}

body.logged-in .sidebar-backdrop.active {
    pointer-events: auto;
}

/* Hide horizontal nav — replaced by hamburger menu */
body.logged-in .nav {
    display: none !important;
}

/* Hide sidebar when not logged in */
body:not(.logged-in) .sidebar-nav,
body:not(.logged-in) .sidebar-toggle,
body:not(.logged-in) .sidebar-backdrop {
    display: none !important;
}

/* Ensure main container has no left margin */
.main-container {
margin-left: 0 !important;
}

/* Mobile login page optimization */
body:not(.logged-in) .login-page .login-content {
max-width: 90%;
padding: var(--space-lg);
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(8px);
}

body:not(.logged-in) .logo {
font-size: 2.5rem;
}

body:not(.logged-in) .login-subtitle {
font-size: 1.1rem;
margin-bottom: var(--space-lg);
}

body:not(.logged-in) .login-btn {
width: 100%;
max-width: 280px;
font-size: 1.1rem;
padding: var(--space-md) var(--space-lg);
}
}

/* Mobile readability: enforce minimum font sizes */
@media (max-width: 768px) {
    /* Broad minimum font-size for all readable content */
    .container,
    .center-pane,
    .page-content {
        font-size: 0.875rem;
    }

    .archive-status-badge,
    .task-due-date,
    .stat-card .stat-label,
    .stat-card .stat-value,
    .deadline-item .deadline-date,
    .deadline-item .deadline-info,
    .archive-item .archive-info,
    .archive-item .archive-date,
    .task-meta,
    .task-date,
    .group-meta,
    .subtask-item,
    .task-item span,
    .task-item small,
    .card small,
    .card .text-muted {
        font-size: max(0.75rem, 11px) !important;
    }

    /* Ensure touch targets meet 44x44 minimum */
    .task-item,
    .group-item,
    .nested-list-item,
    .archive-item,
    .deadline-item {
        min-height: 44px;
    }

    /* Nav buttons need adequate touch targets */
    .nav .nav-btn {
        min-height: 44px;
        padding: var(--space-sm) var(--space-md);
        font-size: 0.8rem;
    }

    .nav-btn {
        min-height: 44px;
    }

    /* Compact header and nav on mobile */
    .header,
    body.logged-in .header {
        padding: 0.35rem var(--space-md) !important;
        margin: 0 !important;
        border-bottom: none !important;
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        padding-left: var(--space-md) !important;
    }

    .header h1,
    body.logged-in .header h1 {
        font-size: 1.1rem;
        margin: 0 !important;
    }

    .nav,
    body.logged-in .nav {
        display: flex !important;
        position: sticky !important;
        top: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
    }

    .nav .nav-btn {
        padding: 0.25rem var(--space-sm);
        min-height: 32px;
        font-size: 0.8rem;
    }

    /* Remove fixed-header offset — header/nav are sticky on mobile */
    .page {
        padding-top: 0 !important;
    }
}

/* Small screen nav adjustments */
@media (max-width: 360px) {
    .nav-btn {
        padding: var(--space-xs) var(--space-sm);
        font-size: 0.75rem;
    }
}

/* Landscape nav: use sidebar menu on small-height devices too */
@media (max-height: 500px) and (orientation: landscape) {
    .nav,
    body.logged-in .nav {
        display: none !important;
    }
    .main-container,
    body.logged-in .main-container,
    .main-container.sidebar-active {
        margin-left: 0 !important;
    }
    .nav-btn {
        padding: var(--space-xs) var(--space-sm);
        font-size: 0.8rem;
        min-height: 36px;
    }
}

/* Sidebar separator for grouping items */
.sidebar-separator {
height: 1px;
background: var(--border-color);
margin: var(--space-xs) var(--space-lg);
opacity: 0.6;
}

/* Sidebar footer for logout */
.sidebar-footer {
margin-top: auto;
padding: var(--space-sm) 0;
border-top: 1px solid var(--border-color);
}

/* Focus states for accessibility */
.sidebar-nav-item:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: -2px;
}

/* Smooth transitions for theme changes */
[data-theme="dark"] .sidebar-nav {
background: var(--bg-secondary);
border-color: var(--border-color);
}

[data-theme="dark"] .sidebar-nav-item:hover {
background: var(--hover-bg);
}

/* Enhanced visual feedback for touch devices */
@media (hover: none) {
.sidebar-nav-item:active {
background: var(--hover-bg);
transform: scale(0.98);
}
}

/* Utility classes for sidebar state management */
body.sidebar-open {
overflow: hidden; /* Prevent body scroll when sidebar is open on tablet */
}

@media (min-width: 1025px) {
body.sidebar-open {
overflow: auto; /* Allow scroll on desktop */
}
}

/* ============================================================================
   DESKTOP THREE-PANE LAYOUT SYSTEM
   ============================================================================ */

/* Desktop layout container - Three-pane system */
@media (min-width: 1025px) {
    .desktop-layout {
        display: flex;
        height: 100vh;
        width: 100%;
    }
    
    /* Center pane - Main content area */
    .center-pane {
        flex: 1;
        min-width: 400px;
        margin-left: 200px; /* Account for sidebar */
        transition: margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-x: hidden;
    }
    
    /* When right pane is active, adjust center pane */
    .center-pane.right-pane-active {
        margin-right: 350px;
    }
    
    /* Right pane - Detail content area */
    .right-pane {
        position: fixed;
        top: 0;
        right: -350px; /* Hidden by default */
        width: 350px;
        height: 100vh;
        background: var(--bg-primary);
        border-left: 1px solid var(--border-color);
        display: flex;
        flex-direction: column;
        z-index: 1000;
        transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
        visibility: hidden;
    }
    
    /* Active state - slide in from right */
    .right-pane.active {
        right: 0;
        visibility: visible;
    }
    
    /* Right pane header */
    .right-pane-header {
        position: sticky;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-lg) var(--space-lg) var(--space-md);
        background: var(--bg-primary);
        border-bottom: 1px solid var(--border-color);
        z-index: 10;
    }
    
    .right-pane-title {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
        flex: 1;
        padding-right: var(--space-md);
    }
    
    .right-pane-close {
        background: none;
        border: none;
        font-size: 1.5rem;
        color: var(--text-secondary);
        cursor: pointer;
        padding: var(--space-xs);
        border-radius: var(--border-radius-small);
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
    }
    
    .right-pane-close:hover {
        background: var(--bg-tertiary);
        color: var(--text-primary);
    }
    
    /* Right pane content */
    .right-pane-content {
        flex: 1;
        overflow-y: auto;
        padding: var(--space-md) var(--space-lg);
        -webkit-overflow-scrolling: touch;
    }
    
    /* Custom scrollbar for right pane */
    .right-pane-content::-webkit-scrollbar {
        width: 6px;
    }
    
    .right-pane-content::-webkit-scrollbar-track {
        background: var(--bg-secondary);
    }
    
    .right-pane-content::-webkit-scrollbar-thumb {
        background: var(--text-muted);
        border-radius: 3px;
    }
    
    .right-pane-content::-webkit-scrollbar-thumb:hover {
        background: var(--text-secondary);
    }
    
    /* Loading state for right pane */
    .right-pane-loading {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 200px;
        color: var(--text-secondary);
    }
    
    /* Responsive right pane sizes */
    @media (min-width: 1440px) {
        .right-pane {
            width: 400px;
            right: -400px;
        }
        
        .center-pane.right-pane-active {
            margin-right: 400px;
        }
    }
    
    @media (min-width: 1920px) {
        .right-pane {
            width: 450px;
            right: -450px;
        }
        
        .center-pane.right-pane-active {
            margin-right: 450px;
        }
    }
    
    /* Dark theme support */
    [data-theme="dark"] .right-pane {
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
    }
    
    /* Hide/show utility classes for desktop */
    .hide-on-desktop {
        display: none !important;
    }
    
    .show-on-desktop {
        display: block !important;
    }
}

/* Mobile/Tablet: Hide desktop-specific elements */
@media (max-width: 1024px) {
    .desktop-layout {
        display: block; /* Fallback to normal flow */
    }
    
    .center-pane {
        margin-left: 0;
        margin-right: 0;
    }
    
    .right-pane {
        display: none !important; /* Force hide on mobile */
    }
    
    .hide-on-mobile {
        display: none !important;
    }
    
    .show-on-mobile {
        display: block !important;
    }
}

/* MOBILE INPUT ENHANCEMENT */
/* More comprehensive mobile breakpoints */
@media (max-width: 768px), (max-width: 480px), (max-width: 360px) {
/* Base state for mobile inputs */
.mobile-input-enhanced {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced behavior when focused on mobile */
.mobile-input-enhanced:focus {
font-size: 18px !important;
padding: 16px !important;
min-height: 3rem !important;
border-width: 2px !important;
}

/* Auto-expanding list name specific styling for mobile */
#listName.mobile-input-enhanced:focus,
#listName.mobile-focused {
font-size: 20px !important;
line-height: 1.4 !important;
min-height: 4rem !important;
max-height: 10rem !important;
box-shadow: 0 4px 20px rgba(0, 102, 204, 0.15) !important;
}

/* General auto-expand textarea mobile enhancement */
.auto-expand.mobile-input-enhanced:focus,
.auto-expand.mobile-focused {
font-size: 18px !important;
min-height: 3.5rem !important;
max-height: 18.75rem !important;
}

/* Expanded mobile input state (for future full-screen implementation) */
.mobile-input-expanded {
position: fixed !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
z-index: var(--z-mobile-input) !important;
width: calc(100vw - 20px) !important;
height: auto !important;
min-height: 120px !important;
font-size: 24px !important;
line-height: 1.4 !important;
padding: 20px !important;
border-radius: 12px !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
background: var(--bg-primary) !important;
border: 3px solid var(--accent-color) !important;
resize: none !important;
margin: 0 !important;
}

/* Dark mode adjustments */
[data-theme="dark"] .mobile-input-expanded {
background: var(--bg-secondary) !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}

/* Hide modal background when input is expanded */
.mobile-input-active .modal-content {
background: transparent !important;
box-shadow: none !important;
}

.mobile-input-active .modal {
background: rgba(0, 0, 0, 0.2) !important;
}

/* Make other form elements less prominent when input is expanded */
.mobile-input-active .form-group:not(.input-expanded-group) {
opacity: 0.3;
pointer-events: none;
transition: opacity 0.3s ease;
}

/* Ensure buttons and action elements remain visible and functional during mobile input expansion */
.mobile-input-active .btn,
.mobile-input-active button,
.mobile-input-active .modal-footer,
.mobile-input-active .modal-actions,
.mobile-input-active .form-actions,
.mobile-input-active div[style*="text-align: center"] {
opacity: 1 !important;
pointer-events: auto !important;
visibility: visible !important;
}

/* Ensure save button always works on mobile - highest specificity */
@media (max-width: 768px) {
    .btn-primary,
    button.btn-primary,
    .modal-footer .btn-primary,
    .modal-footer button.btn-primary {
        pointer-events: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        touch-action: manipulation !important;
        cursor: pointer !important;
    }
}

/* Modal actions container styling */
.modal-actions {
margin-top: var(--space-lg);
padding: var(--space-md) 0;
border-top: 1px solid var(--border-color);
background: var(--bg-primary);
position: relative;
z-index: 10;
}

/* Ensure modal actions stay visible during mobile input interactions */
.modal-actions .btn {
min-width: 120px;
margin: 0 var(--space-sm);
}

/* Additional protection for inline edit elements */
.mobile-input-active .inline-edit-input,
.mobile-input-active .edit-controls,
.mobile-input-active .save-edit-btn,
.mobile-input-active .cancel-edit-btn {
opacity: 1 !important;
pointer-events: auto !important;
visibility: visible !important;
z-index: 1000;
}

/* Placeholder text styling for expanded input */
.mobile-input-expanded::placeholder {
font-size: 20px;
opacity: 0.6;
color: var(--text-secondary);
}

/* Focus state for expanded input */
.mobile-input-expanded:focus {
outline: none !important;
border-color: var(--accent-color) !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 
0 0 0 4px rgba(0, 102, 204, 0.2) !important;
}
}

/* ENHANCED FULL-SCREEN INPUT SYSTEM */

/* Modal Enhancement System - Replace Full-Screen Overlay */
.modal-enhanced {
    animation: modalEnhanceIn 0.3s ease-out forwards;
    /* z-index handled dynamically by ModalManager */
}

.modal-enhanced .modal-content-enhanced {
    transform: scale(1.05) !important;
    width: 95% !important;
    max-width: 900px !important;
    height: auto !important;
    min-height: 60vh !important;
    max-height: 90vh !important;
    margin: 5vh auto !important;
    overflow-y: auto !important;
}

.modal-enhanced .input-enhanced {
    font-size: 1.5rem !important;
    line-height: 1.6 !important;
    padding: 20px !important;
    border-radius: 8px !important;
    border: 2px solid var(--accent-color) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    resize: vertical !important;
    min-height: 250px !important;
}

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

/* Dark mode support for enhanced modals */
[data-theme="dark"] .modal-enhanced .input-enhanced {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--accent-color) !important;
}

[data-theme="dark"] .modal-enhanced .modal-content-enhanced {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Full-screen input container - Optimized for screen utilization */
.modal-input-enhanced {
    overflow: hidden;
}

@keyframes modalEnhanceIn {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.02);
    }
}

/* Enhanced modal styling for better visibility */
.modal-enhanced {
will-change: transform, opacity;
transform: translateZ(0);
animation: slideInScaleOptimized 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes slideInScale {
from {
transform: scale(0.9) translateY(20px);
opacity: 0;
}
to {
transform: scale(1) translateY(0);
opacity: 1;
}
}

@keyframes slideInScaleOptimized {
from {
transform: translateZ(0) scale(0.95) translateY(10px);
opacity: 0;
}
to {
transform: translateZ(0) scale(1) translateY(0);
opacity: 1;
}
}

/* Removed full-screen overlay styles - replaced with modal enhancement */

.input-hints {
display: none; /* Hide input hints completely for cleaner UI */
}

/* Removed full-screen action button styles - no longer needed with modal enhancement */

.input-hints span {
display: none; /* Hide all input hint text */
}

/* Removed dark mode full-screen styles - replaced with modal enhancement */

/* Mobile-specific adjustments for modal enhancement */
@media (max-width: 768px) {
    .modal-enhanced .modal-content-enhanced {
        width: 98% !important;
        margin: 1vh auto !important;
        max-height: 95vh !important;
    }
    
    .modal-enhanced .input-enhanced {
        font-size: 1.3rem !important;
        padding: 16px !important;
        min-height: 200px !important;
    }
}

@media (max-width: 480px) {
    .modal-enhanced .input-enhanced {
        font-size: 1.2rem !important;
        padding: 14px !important;
        min-height: 180px !important;
    }
}

/* Accessibility improvements for modal enhancement */
@media (prefers-reduced-motion: reduce) {
.modal-enhanced,
.modal-content-enhanced,
.input-enhanced {
animation: none !important;
transition: none !important;
}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
.input-enhanced {
border-width: 3px !important;
}
}

/* COMPREHENSIVE TEXT WRAPPING SYSTEM - ENHANCED */
/* Universal text wrapping for all text elements EXCEPT textareas */
.form-input:not(textarea),
input[type="text"],
.editable,
.group-name,
.list-name,
.task-name,
.subtask-name,
.task-content,
.list-content,
.group-content,
.card-title,
.modal-title {
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    hyphens: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Separate rules for textareas - live word boundary wrapping */
textarea {
    word-wrap: break-word !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: pre-wrap !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    -moz-hyphens: none !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    line-break: strict !important;
    -webkit-line-break: strict !important;
}

/* Enhanced input text wrapping for modal enhancement */
.input-enhanced {
    /* Additional wrapping properties for enhanced mode */
    text-overflow: ellipsis !important;
    -webkit-hyphens: none !important;
    -moz-hyphens: none !important;
    -ms-hyphens: none !important;
    hyphens: none !important;
    line-break: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    word-spacing: normal !important;
    letter-spacing: normal !important;
}

/* Mobile-specific text wrapping */
@media (max-width: 768px) {
    .form-input:not(textarea),
    input[type="text"],
    .editable,
    .input-enhanced {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        white-space: normal !important;
    }
    
    /* Special handling for textareas on mobile - live word boundary wrapping */
    textarea {
        word-break: normal !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        white-space: pre-wrap !important;
        hyphens: none !important;
        -webkit-hyphens: none !important;
        line-break: strict !important;
        -webkit-line-break: strict !important;
    }
    
    /* Ensure all displayed items wrap properly on mobile */
    .group-name,
    .list-name,
    .task-name,
    .subtask-name {
        word-break: normal !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        white-space: normal !important;
        hyphens: none !important;
        max-width: 100% !important; /* Use full available width */
    }
    
    /* But override for input fields - live word boundary wrapping */
    textarea.task-name,
    textarea#taskName,
    textarea#quickTaskName,
    textarea#subtaskName {
        word-break: normal !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        line-break: strict !important;
        -webkit-line-break: strict !important;
    }
}

/* Container-based text wrapping */
.task-item,
.list-item,
.group-item,
.nested-list-item,
.card {
    overflow: hidden !important;
    word-wrap: break-word !important;
}

/* Ensure textarea inputs in modals use live word boundary wrapping */
.modal-content textarea {
    word-break: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    line-break: strict !important;
    -webkit-line-break: strict !important;
}

/* Ensure text never overflows its container - but exclude textareas */
*:not(textarea) {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* RESPONSIVE TEXT SIZING SYSTEM */
/* Desktop optimized sizes (default) */
/* Responsive font sizing for enhanced modal inputs */

/* Large desktop screens */
@media (min-width: 1440px) {
    .input-enhanced {
        font-size: 1.8rem !important;
        padding: 24px !important;
    }
    
    .input-enhanced::placeholder {
        font-size: 1.6rem !important;
    }
}

/* Standard desktop screens */
@media (min-width: 1024px) and (max-width: 1439px) {
    .input-enhanced {
        font-size: 1.6rem !important;
        padding: 20px !important;
    }
    
    .input-enhanced::placeholder {
        font-size: 1.4rem !important;
    }
}

/* Desktop task card improvements - proper layout with checkbox left, menu right */
@media (min-width: 769px) {
    /* Reset mobile task header styles for desktop */
    .task-header {
        display: flex;
        align-items: flex-start;
        gap: var(--space-md);
        flex-direction: row !important;
    }
    
    .task-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding-right: 0;
    }
    
    /* Desktop bottom bar layout - completely override mobile styles */
    .task-bottom-bar {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: var(--space-sm) !important;
        padding-top: var(--space-sm) !important;
        border-top: 1px solid var(--border-color) !important;
        margin-top: var(--space-md) !important;
        flex-wrap: nowrap !important;
    }
    
    /* Move checkbox to the very left */
    .task-bottom-bar .task-checkbox {
        order: -1 !important;
        margin-right: var(--space-md) !important;
        margin-left: 0 !important;
        flex-shrink: 0 !important;
    }
    
    /* Meta items aligned to center-left */
    .task-bottom-bar .task-meta {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: var(--space-sm) !important;
        margin-bottom: 0 !important;
        flex-wrap: nowrap !important;
    }
    
    .task-bottom-bar .task-meta-item {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    
    /* Menu button at the far right */
    .task-bottom-bar .task-menu-btn {
        margin-left: auto !important;
        flex-shrink: 0 !important;
        order: 999 !important;
    }
}

/* Tablet screens */
@media (min-width: 769px) and (max-width: 1023px) {
    .input-enhanced {
        font-size: 1.5rem !important;
        padding: 18px !important;
    }
    
    .input-enhanced::placeholder {
        font-size: 1.3rem !important;
    }
}

/* SYNC STATUS INDICATOR */
.sync-status-indicator {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: var(--z-floating);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    user-select: none;
}

/* Badge - The main clickable indicator */
.sync-indicator-badge {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
}

.sync-indicator-badge:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-medium);
}

.sync-indicator-badge:active {
    transform: scale(0.95);
}

/* Status dot - small indicator showing current state */
.sync-status-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--bg-card);
    transition: all 0.3s ease;
}

/* Status icon - main icon in the center */
.sync-status-icon {
    font-size: 18px;
    transition: all 0.3s ease;
}

/* State-based styling */
.sync-indicator-badge.state-inactive {
    border-color: var(--text-muted);
}

.sync-indicator-badge.state-inactive .sync-status-dot {
    background: var(--text-muted);
}

.sync-indicator-badge.state-inactive .sync-status-icon {
    color: var(--text-muted);
}

.sync-indicator-badge.state-active {
    border-color: var(--success-color);
}

.sync-indicator-badge.state-active .sync-status-dot {
    background: var(--success-color);
    box-shadow: 0 0 0 2px rgba(0, 168, 107, 0.2);
}

.sync-indicator-badge.state-active .sync-status-icon {
    color: var(--success-color);
}

.sync-indicator-badge.state-syncing {
    border-color: var(--accent-color);
    animation: pulse-sync 2s infinite;
}

.sync-indicator-badge.state-syncing .sync-status-dot {
    background: var(--accent-color);
    animation: blink-sync 1s infinite;
}

.sync-indicator-badge.state-syncing .sync-status-icon {
    color: var(--accent-color);
}

.sync-indicator-badge.state-error {
    border-color: var(--danger-color);
    animation: shake 0.5s ease-in-out;
}

.sync-indicator-badge.state-error .sync-status-dot {
    background: var(--danger-color);
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.3);
}

.sync-indicator-badge.state-error .sync-status-icon {
    color: var(--danger-color);
}

.sync-indicator-badge.state-offline {
    border-color: var(--warning-color);
    opacity: 0.7;
}

.sync-indicator-badge.state-offline .sync-status-dot {
    background: var(--warning-color);
}

.sync-indicator-badge.state-offline .sync-status-icon {
    color: var(--warning-color);
}

/* Page hidden state - dimmed when page is not visible */
.sync-status-indicator.page-hidden {
    opacity: 0.5;
}

/* Expanded state */
.sync-status-indicator.expanded .sync-indicator-badge {
    border-radius: 12px 12px 0 0;
    width: 280px;
    height: 48px;
    justify-content: flex-start;
    padding: 0 16px;
}

.sync-status-indicator.expanded .sync-status-dot {
    position: relative;
    top: auto;
    right: auto;
    margin-right: 12px;
}

.sync-status-indicator.expanded .sync-status-icon {
    margin-right: auto;
}

/* Expanded panel */
.sync-expanded-panel {
    position: absolute;
    top: 48px;
    right: 0;
    width: 280px;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 12px 12px;
    box-shadow: var(--shadow-medium);
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
    max-height: 400px;
    overflow-y: auto;
}

.sync-expanded-panel.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Panel header */
.sync-panel-header {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-tertiary);
}

.sync-panel-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.sync-panel-actions {
    display: flex;
    gap: 8px;
}

.sync-action-btn,
.sync-close-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.2s ease;
}

.sync-action-btn:hover,
.sync-close-btn:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
    transform: scale(1.05);
}

.sync-action-btn:active,
.sync-close-btn:active {
    transform: scale(0.95);
}

.sync-close-btn {
    background: var(--danger-color);
    color: white;
}

.sync-close-btn:hover {
    background: #c82333;
}

/* Panel content */
.sync-panel-content {
    padding: 16px;
}

.sync-status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 13px;
}

.sync-status-item:last-child {
    margin-bottom: 0;
}

.sync-status-label {
    color: var(--text-secondary);
    font-weight: 500;
}

.sync-status-value {
    color: var(--text-primary);
    font-weight: 600;
    text-align: right;
}

.sync-status-value.state-active {
    color: var(--success-color);
}

.sync-status-value.state-syncing {
    color: var(--accent-color);
}

.sync-status-value.state-error {
    color: var(--danger-color);
}

.sync-status-value.state-offline {
    color: var(--warning-color);
}

.sync-status-value.state-inactive {
    color: var(--text-muted);
}

.sync-status-value.online {
    color: var(--success-color);
}

.sync-status-value.offline {
    color: var(--danger-color);
}

/* Error section */
.sync-errors {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.sync-error-list {
    margin-top: 8px;
}

.sync-error-item {
    font-size: 12px;
    color: var(--danger-color);
    background: rgba(220, 53, 69, 0.1);
    padding: 6px 8px;
    border-radius: 4px;
    margin-bottom: 4px;
    border-left: 3px solid var(--danger-color);
}

/* Performance section */
.sync-performance {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.sync-perf-item {
    flex: 1;
    text-align: center;
}

.sync-perf-label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.sync-perf-value {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Animations */
@keyframes pulse-sync {
    0%, 100% { 
        box-shadow: var(--shadow-soft), 0 0 0 0 rgba(0, 102, 204, 0.4);
    }
    50% { 
        box-shadow: var(--shadow-soft), 0 0 0 8px rgba(0, 102, 204, 0.1);
    }
}

@keyframes blink-sync {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

/* Responsive design */
/* More comprehensive mobile breakpoints */
@media (max-width: 768px), (max-width: 480px), (max-width: 360px) {
    .sync-status-indicator {
        top: 15px;
        right: 15px;
    }
    
    .sync-indicator-badge {
        width: 44px;
        height: 44px;
    }
    
    .sync-status-icon {
        font-size: 16px;
    }
    
    .sync-status-dot {
        width: 10px;
        height: 10px;
        top: 3px;
        right: 3px;
    }
    
    .sync-expanded-panel,
    .sync-status-indicator.expanded .sync-indicator-badge {
        width: 260px;
    }
}

@media (max-width: 480px) {
    .sync-status-indicator {
        top: 10px;
        right: 10px;
    }
    
    .sync-expanded-panel,
    .sync-status-indicator.expanded .sync-indicator-badge {
        width: calc(100vw - 20px);
        right: -10px;
    }
    
    .sync-expanded-panel {
        max-height: 300px;
    }
}

/* Dark mode adjustments */
[data-theme="dark"] .sync-indicator-badge {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .sync-expanded-panel {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .sync-panel-header {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .sync-action-btn,
[data-theme="dark"] .sync-close-btn {
    background: var(--bg-secondary);
}

[data-theme="dark"] .sync-action-btn:hover {
    background: var(--hover-bg);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .sync-indicator-badge {
        border-width: 3px;
    }
    
    .sync-status-dot {
        border-width: 3px;
    }
    
    .sync-expanded-panel {
        border-width: 3px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .sync-indicator-badge,
    .sync-expanded-panel,
    .sync-status-dot,
    .sync-status-icon,
    .sync-action-btn,
    .sync-close-btn {
        transition: none;
        animation: none;
    }
    
    .sync-indicator-badge:hover {
        transform: none;
    }
    
    .sync-indicator-badge:active {
        transform: none;
    }
}

/* Navigation Badge Bottom Positioning - MOVE INSIDE BUTTON */
span.nav-badge,
button span.nav-badge,
.nav-btn span.nav-badge,
button.nav-btn span.nav-badge,
.sidebar-nav-item span.nav-badge,
#morningNavBtn .nav-badge,
#focusNavBtn .nav-badge,
#morningNavBtnActive .nav-badge,
#focusNavBtnActive .nav-badge,
#deadlinesNavBtn .nav-badge,
#deadlinesNavBtnActive .nav-badge,
#deadlinesNavBtnFromMorning .nav-badge,
#deadlinesNavBtnFromFocus .nav-badge,
#deadlinesNavBtnFromPrimer .nav-badge,
#deadlinesNavBtnFromStats .nav-badge,
#deadlinesNavBtnFromArchive .nav-badge,
#deadlinesNavBtnFromSettings .nav-badge,
#primerNavBtn .nav-badge,
#primerNavBtnActive .nav-badge,
#primerNavBtnFromMorning .nav-badge,
#primerNavBtnFromFocus .nav-badge,
#primerNavBtnFromDeadlines .nav-badge,
#primerNavBtnFromStats .nav-badge,
#primerNavBtnFromArchive .nav-badge,
#primerNavBtnFromSettings .nav-badge,
#morningNavBtnFromDreams .nav-badge,
#focusNavBtnFromDreams .nav-badge,
#primerNavBtnFromDreams .nav-badge,
#deadlinesNavBtnFromDreams .nav-badge {
    position: absolute !important;
    bottom: -2px !important;
    top: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin-top: 0 !important;
    color: #1a1a1a !important;
    border-radius: 50% !important;
    min-width: 16px !important;
    height: 16px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    padding: 0 2px !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1000 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
    pointer-events: none !important;
}

/* Show badge only when it has content */
.nav-badge.has-count,
.sidebar-nav-item .nav-badge.has-count {
    display: flex !important;
}

/* Default badge background - Lower specificity, will be overridden by type-specific colors */
.nav-badge {
    background: var(--accent-color) !important;
}

/* Badge type-specific colors - Higher specificity to override generic styles */
span.nav-badge.nav-badge-morning,
button span.nav-badge.nav-badge-morning,
.nav-btn span.nav-badge.nav-badge-morning,
button.nav-btn span.nav-badge.nav-badge-morning,
.sidebar-nav-item span.nav-badge.nav-badge-morning,
#morningNavBtnFromDreams span.nav-badge.nav-badge-morning {
    background: var(--badge-morning-color) !important;
    color: #1a1a1a !important;
    font-weight: 800 !important;
    text-shadow: 0 0 1px rgba(255,255,255,0.3) !important;
}

span.nav-badge.nav-badge-focus,
button span.nav-badge.nav-badge-focus,
.nav-btn span.nav-badge.nav-badge-focus,
button.nav-btn span.nav-badge.nav-badge-focus,
.sidebar-nav-item span.nav-badge.nav-badge-focus,
#focusNavBtnFromDreams span.nav-badge.nav-badge-focus {
    background: var(--badge-focus-color) !important;
    color: #0a2a28 !important;
    font-weight: 800 !important;
    text-shadow: 0 0 1px rgba(255,255,255,0.3) !important;
}

span.nav-badge.nav-badge-primer,
button span.nav-badge.nav-badge-primer,
.nav-btn span.nav-badge.nav-badge-primer,
button.nav-btn span.nav-badge.nav-badge-primer,
.sidebar-nav-item span.nav-badge.nav-badge-primer,
#primerNavBtnFromDreams span.nav-badge.nav-badge-primer {
    background: var(--badge-primer-color) !important;
    color: #1a1a1a !important;
    font-weight: 800 !important;
    text-shadow: 0 0 1px rgba(255,255,255,0.3) !important;
}

span.nav-badge.nav-badge-deadlines,
button span.nav-badge.nav-badge-deadlines,
.nav-btn span.nav-badge.nav-badge-deadlines,
button.nav-btn span.nav-badge.nav-badge-deadlines,
.sidebar-nav-item span.nav-badge.nav-badge-deadlines,
#deadlinesNavBtnFromDreams span.nav-badge.nav-badge-deadlines {
    background: var(--badge-deadline-color) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
}

span.nav-badge.nav-badge-today,
button span.nav-badge.nav-badge-today,
.nav-btn span.nav-badge.nav-badge-today,
button.nav-btn span.nav-badge.nav-badge-today,
.sidebar-nav-item span.nav-badge.nav-badge-today,
#todayNavBtnFromDreams span.nav-badge.nav-badge-today {
    background: var(--badge-today-color) !important;
    color: #0a200a !important;
    font-weight: 800 !important;
    text-shadow: 0 0 1px rgba(255,255,255,0.3) !important;
}

/* List background colors for A, B, C lists - matching letter box colors */
.nested-list-item[data-list-name="A"],
.nested-list-item.list-a {
    background: rgba(255, 59, 48, 0.1) !important; /* Light red background matching letter A */
    border-left: 4px solid #ff3b30 !important; /* Same red as letter A */
}

.nested-list-item[data-list-name="B"],
.nested-list-item.list-b {
    background: rgba(255, 149, 0, 0.1) !important; /* Light orange background matching letter B */
    border-left: 4px solid #ff9500 !important; /* Same orange as letter B */
}

.nested-list-item[data-list-name="C"],
.nested-list-item.list-c {
    background: rgba(255, 204, 0, 0.1) !important; /* Light yellow background matching letter C */
    border-left: 4px solid #ffcc00 !important; /* Same yellow as letter C */
}

/* Dark theme versions - same colors but slightly more opacity for better contrast */
[data-theme="dark"] .nested-list-item[data-list-name="A"],
[data-theme="dark"] .nested-list-item.list-a {
    background: rgba(255, 59, 48, 0.15) !important; /* Slightly more opacity for dark theme */
    border-left: 4px solid #ff3b30 !important; /* Same red as letter A */
}

[data-theme="dark"] .nested-list-item[data-list-name="B"],
[data-theme="dark"] .nested-list-item.list-b {
    background: rgba(255, 149, 0, 0.15) !important; /* Slightly more opacity for dark theme */
    border-left: 4px solid #ff9500 !important; /* Same orange as letter B */
}

[data-theme="dark"] .nested-list-item[data-list-name="C"],
[data-theme="dark"] .nested-list-item.list-c {
    background: rgba(255, 204, 0, 0.15) !important; /* Slightly more opacity for dark theme */
    border-left: 4px solid #ffcc00 !important; /* Same yellow as letter C */
}

/* Hover effects for colored lists - matching letter box colors */
.nested-list-item[data-list-name="A"]:hover,
.nested-list-item.list-a:hover {
    background: rgba(255, 59, 48, 0.2) !important; /* Stronger red background on hover */
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.3) !important;
}

.nested-list-item[data-list-name="B"]:hover,
.nested-list-item.list-b:hover {
    background: rgba(255, 149, 0, 0.2) !important; /* Stronger orange background on hover */
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(255, 149, 0, 0.3) !important;
}

.nested-list-item[data-list-name="C"]:hover,
.nested-list-item.list-c:hover {
    background: rgba(255, 204, 0, 0.2) !important; /* Stronger yellow background on hover */
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(255, 204, 0, 0.3) !important;
}

/* Auto-apply list colors based on text content using CSS :has() and attribute selectors */
.nested-list-item:has(.list-name[data-text="A"]),
.nested-list-item:has([title="A"]),
.nested-list-item:has(.list-content:contains("A")) {
    background: rgba(255, 59, 48, 0.1) !important; /* Light red background matching letter A */
    border-left: 4px solid #ff3b30 !important; /* Same red as letter A */
}

.nested-list-item:has(.list-name[data-text="B"]),
.nested-list-item:has([title="B"]),
.nested-list-item:has(.list-content:contains("B")) {
    background: rgba(255, 149, 0, 0.1) !important; /* Light orange background matching letter B */
    border-left: 4px solid #ff9500 !important; /* Same orange as letter B */
}

.nested-list-item:has(.list-name[data-text="C"]),
.nested-list-item:has([title="C"]),
.nested-list-item:has(.list-content:contains("C")) {
    background: rgba(255, 204, 0, 0.1) !important; /* Light yellow background matching letter C */
    border-left: 4px solid #ffcc00 !important; /* Same yellow as letter C */
}

/* Force navigation buttons to be positioned containers */
.nav-btn,
button.nav-btn,
.sidebar-nav-item,
button.sidebar-nav-item,
#morningNavBtn,
#focusNavBtn,
#morningNavBtnActive,
#focusNavBtnActive,
#sidebarMorningBtn,
#sidebarFocusBtn,
#sidebarPrimerBtn,
#sidebarDeadlinesBtn,
#deadlinesNavBtn,
#deadlinesNavBtnActive,
#deadlinesNavBtnFromMorning,
#deadlinesNavBtnFromFocus,
#deadlinesNavBtnFromPrimer,
#deadlinesNavBtnFromStats,
#deadlinesNavBtnFromArchive,
#deadlinesNavBtnFromSettings,
#primerNavBtn,
#primerNavBtnActive,
#primerNavBtnFromMorning,
#primerNavBtnFromFocus,
#primerNavBtnFromDeadlines,
#primerNavBtnFromStats,
#primerNavBtnFromArchive,
#primerNavBtnFromSettings,
#morningNavBtnFromDreams,
#focusNavBtnFromDreams,
#primerNavBtnFromDreams,
#deadlinesNavBtnFromDreams {
    position: relative !important;
    overflow: visible !important;
}

/* ============================================
   DESKTOP THREE-PANE LAYOUT SYSTEM
   ============================================ */

/* Desktop Layout Container - Only for desktop screens */
@media (min-width: 1025px) {
    
    /* Main desktop layout container */
    body.logged-in .desktop-layout {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }
    
    /* Left Pane - Sidebar (already exists, just ensure proper integration) */
    body.logged-in .desktop-layout .sidebar-nav {
        position: relative;
        flex: 0 0 200px;
        height: 100vh;
        margin: 0;
        transform: none;
        box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);
        z-index: var(--z-fixed);
    }
    
    /* Center Pane - Main Content Area */
    body.logged-in .desktop-layout .center-pane {
        flex: 1;
        min-width: 400px;
        height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
        background: var(--bg-primary);
        position: relative;
        transition: margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        /* Push the scrolling pane down past the fixed header-nav-icons row
           (z-index 99999 at top: 0). Without this, the desktop sticky
           page-header (.header inside .center-pane) sits at viewport top: 0
           and is covered by the nav row — the page title + subtitle get
           hidden behind it. */
        padding-top: 54px;
    }
    
    /* Right Pane - Detail Content Area */
    body.logged-in .desktop-layout .right-pane {
        position: absolute;
        top: 0;
        right: 0;
        width: 350px;
        height: 100vh;
        background: var(--bg-secondary);
        border-left: 1px solid var(--border-color);
        overflow-y: auto;
        overflow-x: hidden;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s;
        z-index: var(--z-floating);
        box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
        visibility: hidden;
    }

    /* Right Pane Active State */
    body.logged-in .desktop-layout .right-pane.active {
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
    }
    
    /* Center Pane Content Adjustment when Right Pane is Active */
    body.logged-in .desktop-layout .center-pane.right-pane-active {
        margin-right: 350px;
    }
    
    /* Right Pane Header */
    .right-pane-header {
        position: sticky;
        top: 0;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-color);
        padding: var(--space-lg);
        z-index: var(--z-sticky);
        backdrop-filter: blur(8px);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .right-pane-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0;
    }
    
    .right-pane-close {
        background: none;
        border: none;
        color: var(--text-secondary);
        font-size: 1.5rem;
        cursor: pointer;
        padding: var(--space-sm);
        border-radius: var(--radius-sm);
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
    }
    
    .right-pane-close:hover {
        background: var(--hover-bg);
        color: var(--text-primary);
    }
    
    /* Right Pane Content */
    .right-pane-content {
        padding: var(--space-lg);
        height: calc(100vh - 80px); /* Account for header */
        overflow-y: auto;
    }
    
    /* Custom scrollbar for right pane */
    .right-pane::-webkit-scrollbar {
        width: 6px;
    }
    
    .right-pane::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .right-pane::-webkit-scrollbar-thumb {
        background: var(--border-color);
        border-radius: 3px;
    }
    
    .right-pane::-webkit-scrollbar-thumb:hover {
        background: var(--border-hover);
    }
    
    /* Adjust existing main-container for desktop layout */
    body.logged-in .main-container {
        margin-left: 0 !important;
        position: relative;
        height: 100vh;
        overflow: hidden;
    }
    
    /* Page content adjustments for center pane — constrained and centered */
    body.logged-in .desktop-layout .center-pane .page-content {
        padding: var(--space-xl) var(--space-2xl);
        max-width: 1200px;
        margin: 0 auto;
        min-height: calc(100vh - var(--space-xl) * 2);
    }

    /* Header adjustments for desktop layout — full width of center-pane */
    body.logged-in .desktop-layout .center-pane .header {
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        max-width: none;
        z-index: var(--z-header);
        margin: 0;
    }
    
    /* Responsive adjustments for different desktop sizes */
    @media (min-width: 1440px) {
        body.logged-in .desktop-layout .right-pane {
            width: 400px;
        }

        body.logged-in .desktop-layout .center-pane.right-pane-active {
            margin-right: 400px;
        }
    }

    @media (min-width: 1920px) {
        body.logged-in .desktop-layout .right-pane {
            width: 450px;
        }

        body.logged-in .desktop-layout .center-pane.right-pane-active {
            margin-right: 450px;
        }

        body.logged-in .desktop-layout .center-pane {
            min-width: 500px;
        }
    }
    
    /* Animation utilities for smooth transitions */
    .right-pane-enter {
        transform: translateX(100%);
    }
    
    .right-pane-enter-active {
        transform: translateX(0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .right-pane-exit {
        transform: translateX(0);
    }
    
    .right-pane-exit-active {
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Focus management for accessibility */
    .right-pane.active:focus-within {
        outline: 2px solid var(--accent-color);
        outline-offset: -2px;
    }
    
    /* Dark theme adjustments */
    [data-theme="dark"] .right-pane {
        background: var(--bg-secondary);
        border-color: var(--border-color);
    }
    
    [data-theme="dark"] .right-pane-header {
        background: var(--bg-secondary);
        border-color: var(--border-color);
    }
    
    /* Loading state for right pane */
    .right-pane.loading {
        pointer-events: none;
    }
    
    .right-pane.loading::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.8);
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    [data-theme="dark"] .right-pane.loading::before {
        background: rgba(0, 0, 0, 0.8);
    }
}

/* Mobile and Tablet - Preserve existing modal behavior */
@media (max-width: 1024px) {
    /* Ensure desktop layout classes don't interfere with mobile */
    .desktop-layout,
    .center-pane,
    .right-pane {
        display: contents;
    }
    
    .right-pane {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--bg-primary);
        z-index: var(--z-modal);
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .right-pane.active {
        transform: translateY(0);
    }
    
    /* Mobile right pane takes full screen */
    .right-pane-content {
        padding: var(--space-lg);
        height: calc(100vh - 80px);
        overflow-y: auto;
    }
}

/* Utility classes for JavaScript integration */
.hide-on-desktop {
    display: block;
}

@media (min-width: 1025px) {
    .hide-on-desktop {
        display: none !important;
    }
}

.show-on-desktop {
    display: none;
}

@media (min-width: 1025px) {
    .show-on-desktop {
        display: block !important;
    }
}

/* ===== DREAMS PAGE STYLES ===== */

.dreams-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-md);
}

.dreams-header {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-xl);
}

.dreams-header .btn {
    font-size: 1.1em;
    padding: var(--space-md) var(--space-xl);
    background: linear-gradient(135deg, #6f42c1 0%, #8e44ad 100%);
    border: none;
    color: white;
    box-shadow: 0 4px 15px rgba(111, 66, 193, 0.3);
    transition: all 0.3s ease;
}

.dreams-header .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(111, 66, 193, 0.4);
}

/* Year Sections */
.dreams-year-section {
    margin-bottom: var(--space-xxl);
}

.dreams-year-title {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--border-color);
    font-size: 1.5em;
    font-weight: 600;
    width: 100%;
}

.year-number {
    color: var(--text-primary);
    font-weight: 700;
}

.year-badge {
    padding: var(--space-xs) var(--space-sm);
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.year-badge.current {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
}

.year-badge.past {
    background: linear-gradient(135deg, #6c757d, #495057);
    color: white;
}

.year-badge.future {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
}

/* Dreams Grid */
.dreams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

/* Desktop: 3 dream cards per row in 1200px container */
@media (min-width: 1025px) {
    .dreams-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
}

/* Dream Cards */
.dream-card {
    background: var(--bg-card);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-medium);
    transition: all 0.3s ease;
    position: relative;
    border: 2px solid transparent;
}

.dream-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-large);
}

.dream-card.completed {
    border-color: #28a745;
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(40, 167, 69, 0.05) 100%);
}

.dream-photo {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
}

.dream-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.dream-card:hover .dream-photo img {
    transform: scale(1.05);
}

.dream-content {
    padding: var(--space-lg);
}

.dream-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-md);
}

.dream-title {
    font-size: 1.25em;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
    flex: 1;
    margin-right: var(--space-sm);
}

.dream-actions {
    display: flex;
    gap: var(--space-xs);
    flex-shrink: 0;
}

.dream-action-btn {
    background: none;
    border: none;
    font-size: 1.2em;
    padding: var(--space-xs);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.85;
}

.dream-action-btn:hover {
    opacity: 1;
    background: var(--bg-hover);
    transform: scale(1.1);
}

.dream-action-btn.complete:hover {
    background: rgba(40, 167, 69, 0.1);
}

.dream-action-btn.edit:hover {
    background: rgba(0, 123, 255, 0.1);
}

.dream-action-btn.delete:hover {
    background: rgba(220, 53, 69, 0.1);
}

.dream-action-btn.create-tasks {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-color);
}

.dream-action-btn.create-tasks:hover {
    background: rgba(var(--primary-rgb), 0.2);
}

.dream-description {
    color: var(--text-secondary);
    font-size: 0.95em;
    line-height: 1.5;
    margin: 0 0 var(--space-md) 0;
}

.dream-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9em;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

.dream-year {
    font-weight: 500;
    color: var(--accent-color);
}

.dream-completed {
    color: #28a745;
    font-weight: 500;
}

.dream-celebration {
    text-align: center;
    font-size: 1.1em;
    font-weight: 600;
    color: #28a745;
    padding: var(--space-sm);
    background: rgba(40, 167, 69, 0.1);
    border-radius: 8px;
    margin-top: var(--space-sm);
    animation: celebration 2s ease-in-out infinite alternate;
}

@keyframes celebration {
    0% { transform: scale(1); }
    100% { transform: scale(1.02); }
}

/* Add Dream Modal Enhancements - FIXED SCROLLING ISSUE */
#addDreamModal .modal-content {
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Container should not scroll, only the body */
}

#addDreamModal .modal-header {
    flex-shrink: 0; /* Header stays fixed */
}

#addDreamModal .modal-footer {
    flex-shrink: 0; /* Footer stays fixed */
}

#addDreamModal .modal-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: var(--space-sm); /* Account for scrollbar */
    /* Remove max-height constraint to allow proper flex behavior */
}

/* Ensure proper scrolling on mobile */
@media (max-width: 768px) {
    #addDreamModal {
        padding: var(--space-sm);
        align-items: flex-start !important; /* Allow modal to start at top on mobile */
        justify-content: flex-start !important; /* Ensure modal starts at top */
    }
    
    #addDreamModal .modal-content {
        max-height: 95vh !important; /* Override general mobile modal height and increase for better experience */
        margin: 0 !important;
        width: calc(100% - 2 * var(--space-sm)) !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    #addDreamModal .modal-body {
        /* Let flexbox handle the height automatically */
        max-height: none !important;
        flex: 1 !important;
        overflow-y: auto !important;
    }
}

#addDreamModal .form-group {
    margin-bottom: var(--space-lg);
}

#addDreamModal .form-group:last-child {
    margin-bottom: 0; /* Remove bottom margin from last form group */
}

/* Ensure photo preview is properly contained within scrollable area */
#addDreamModal .photo-preview {
    margin-top: var(--space-md);
    margin-bottom: var(--space-md);
    max-width: 100%;
}

/* Improve touch scrolling on all mobile devices */
@media (hover: none) and (pointer: coarse) {
    #addDreamModal .modal-body {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        /* Add momentum scrolling for better mobile experience */
        overscroll-behavior: contain;
    }
}

#addDreamModal .form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: var(--text-primary);
}

#addDreamModal input,
#addDreamModal textarea {
    width: 100%;
    padding: var(--space-md);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 1em;
    transition: border-color 0.3s ease;
    background: var(--bg-secondary);
    color: var(--text-primary);
}

#addDreamModal input:focus,
#addDreamModal textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

#addDreamModal input[type="file"] {
    border: 2px dashed var(--border-color);
    padding: var(--space-lg);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

#addDreamModal input[type="file"]:hover {
    border-color: var(--accent-color);
    background: rgba(0, 102, 204, 0.05);
}

.file-upload-hint {
    font-size: 0.85em;
    color: var(--text-secondary);
    margin-top: var(--space-xs);
    text-align: center;
}

.photo-preview {
    position: relative;
    margin-top: var(--space-md);
    border-radius: 8px;
    overflow: hidden;
    max-width: 100%;
}

.photo-preview img {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: cover;
}

.remove-photo {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    background: rgba(220, 53, 69, 0.8);
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 1.2em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.remove-photo:hover {
    background: rgba(220, 53, 69, 1);
}

/* Year Section Styling */
.dreams-year-section.current-year .dreams-year-title {
    border-bottom-color: #28a745;
}

.dreams-year-section.past-year .dreams-year-title {
    border-bottom-color: #6c757d;
    opacity: 0.8;
}

.dreams-year-section.future-year .dreams-year-title {
    border-bottom-color: #007bff;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .dreams-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .dreams-container {
        padding: var(--space-sm);
    }
    
    .dream-card {
        margin-bottom: var(--space-md);
    }
    
    .dream-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }
}

/* ===== PHOTO GALLERY SLIDER STYLES ===== */

/* Photo Gallery Container */
.dream-photo-gallery {
    position: relative;
    width: 100%;
    max-height: 200px;
    overflow: hidden;
    border-radius: var(--border-radius);
    margin-bottom: var(--space-md);
    background: #f8f9fa;
}

.photo-gallery-container {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.photo-gallery-track {
    display: flex;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
}

.photo-gallery-slide {
    min-width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-gallery-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Gallery Navigation */
.photo-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 18px;
    font-weight: bold;
    color: white;
    z-index: 3;
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
    opacity: 0.8; /* Make arrows visible by default */
}

.photo-gallery-nav:hover {
    background: rgba(0, 0, 0, 0.9);
    border-color: var(--accent-color);
    transform: translateY(-50%) scale(1.15);
    box-shadow: 0 4px 16px rgba(0,0,0,0.6);
    color: var(--accent-color);
}

.photo-gallery-nav.prev {
    left: 8px;
}

.photo-gallery-nav.next {
    right: 8px;
}

/* Show navigation on hover/touch */
.dream-photo-gallery:hover .photo-gallery-nav,
.dream-photo-gallery.touch-active .photo-gallery-nav {
    opacity: 1;
}

/* Make navigation more visible on mobile */
@media (max-width: 768px) {
    .photo-gallery-nav {
        width: 44px;
        height: 44px;
        font-size: 20px;
        background: rgba(0, 0, 0, 0.8);
        opacity: 1; /* Always visible on mobile */
    }
    
    /* Ensure page scrolling works properly on mobile.
       overflow-y: visible (NOT auto) on body/html and the page wrappers.
       Per CSS spec, `overflow: auto/hidden/scroll` creates a scroll
       container for position:sticky purposes even when no scrollbar
       actually appears. With `height: auto` body grows to fit content
       and the viewport scrolls; setting overflow-y: visible lets sticky
       descendants (e.g. .group-mode-bar) attach to the viewport scroller
       instead of being trapped by a no-op scroll context on body. */
    body, html {
        overflow-y: visible !important;
        height: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .page, .page-content {
        overflow-y: visible !important;
        height: auto !important;
        min-height: 100vh;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Ensure photo gallery doesn't block page scrolling */
    .dream-photo-gallery {
        touch-action: pan-y pinch-zoom;
    }
    
    .photo-gallery-container {
        touch-action: pan-x pan-y pinch-zoom;
    }
}

/* Hide navigation for single photos */
.dream-photo-gallery[data-count="1"] .photo-gallery-nav {
    display: none;
}

/* Gallery Indicators */
.photo-gallery-indicators {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 3;
    background: rgba(0, 0, 0, 0.3);
    padding: 6px 12px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
}

.photo-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.photo-indicator:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: scale(1.2);
}

.photo-indicator.active {
    background: var(--accent-color);
    border-color: white;
    transform: scale(1.3);
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* Mobile indicator styling */
@media (max-width: 768px) {
    .photo-indicator {
        width: 12px;
        height: 12px;
    }
    
    .photo-gallery-indicators {
        bottom: 8px;
        gap: 10px;
    }
}

/* Hide indicators for single photos */
.dream-photo-gallery[data-count="1"] .photo-gallery-indicators {
    display: none;
}

/* ===== FULLSCREEN IMAGE VIEWER STYLES ===== */

/* Fullscreen Modal Container */
.fullscreen-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    z-index: var(--z-fullscreen-viewer);
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(3px);
}

.fullscreen-modal.active {
    display: flex;
    opacity: 1;
}

/* Fullscreen Backdrop */
.fullscreen-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* Close Button */
.fullscreen-close-btn {
    position: absolute;
    top: 20px;
    right: 25px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 28px;
    font-weight: bold;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    z-index: calc(var(--z-fullscreen-viewer) + 2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    line-height: 1;
}

.fullscreen-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

/* Navigation Buttons */
.fullscreen-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 24px;
    font-weight: bold;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    cursor: pointer;
    z-index: calc(var(--z-fullscreen-viewer) + 2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    opacity: 0.7;
}

.fullscreen-nav:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-50%) scale(1.1);
    opacity: 1;
}

.fullscreen-nav-prev {
    left: 30px;
}

.fullscreen-nav-next {
    right: 30px;
}

.fullscreen-nav span {
    font-size: 30px;
    line-height: 1;
    margin-top: -2px;
}

/* Hide navigation for single images */
.fullscreen-modal.single-image .fullscreen-nav {
    display: none;
}

/* Image Container */
.fullscreen-image-container {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: calc(var(--z-fullscreen-viewer) + 1);
}

/* Main Fullscreen Image */
.fullscreen-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
    opacity: 0;
    transform: scale(0.9);
}

.fullscreen-image.loaded {
    opacity: 1;
    transform: scale(1);
}

/* Loading Spinner */
.fullscreen-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: calc(var(--z-fullscreen-viewer) + 3);
}

.fullscreen-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: 3px solid white;
    border-radius: 50%;
    animation: fullscreenSpin 1s linear infinite;
}

@keyframes fullscreenSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Image Counter */
.fullscreen-counter {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    z-index: calc(var(--z-fullscreen-viewer) + 2);
    backdrop-filter: blur(10px);
}

/* Hide counter for single images */
.fullscreen-modal.single-image .fullscreen-counter {
    display: none;
}

/* Mobile Touch Areas */
.fullscreen-touch-area {
    position: absolute;
    top: 0;
    width: 30%;
    height: 100%;
    z-index: calc(var(--z-fullscreen-viewer) + 1);
    cursor: pointer;
    display: none; /* Hidden by default, shown on touch devices */
}

.fullscreen-touch-prev {
    left: 0;
}

.fullscreen-touch-next {
    right: 0;
}

/* Show touch areas on mobile devices */
@media (max-width: 768px), (pointer: coarse) {
    .fullscreen-touch-area {
        display: block;
    }
    
    /* Make navigation buttons smaller on mobile */
    .fullscreen-nav {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
    
    .fullscreen-nav-prev {
        left: 20px;
    }
    
    .fullscreen-nav-next {
        right: 20px;
    }
    
    .fullscreen-close-btn {
        width: 45px;
        height: 45px;
        font-size: 24px;
        top: 15px;
        right: 20px;
    }
    
    /* Adjust counter position on mobile */
    .fullscreen-counter {
        bottom: 20px;
        font-size: 13px;
        padding: 6px 12px;
    }
}

/* Smooth transitions for image changes */
.fullscreen-image.changing {
    opacity: 0;
    transform: scale(0.95);
}

/* Focus styles for accessibility */
.fullscreen-close-btn:focus,
.fullscreen-nav:focus {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

/* Add cursor pointer to dream gallery images for better UX */
.dream-photo-gallery .photo-gallery-slide img {
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.dream-photo-gallery .photo-gallery-slide img:hover {
    transform: scale(1.02);
    filter: brightness(1.1);
}

/* Photos Preview in Modal */
.photos-preview {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    max-height: 200px;
    overflow-y: auto;
}

.photo-preview-item {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 2px solid var(--border-color);
}

.photo-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-preview-item .remove-photo {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--danger-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
}

.photo-preview-item .remove-photo:hover {
    background: #c82333;
}

/* Current Photos Display in Edit Modal */
.current-photos {
    margin: var(--space-md) 0;
}

.current-photos-label {
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: var(--text-color);
}

.current-photos-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.current-photo-item {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 2px solid var(--border-color);
}

.current-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.current-photo-item .remove-current-photo {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--danger-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    z-index: 3;
}

.current-photo-item .remove-current-photo:hover {
    background: #c82333;
    transform: scale(1.1);
}

/* Edit Dream Modal Styling - Match App Theme */
#editDreamModal .modal-content {
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

#editDreamModal .modal-header {
    flex-shrink: 0;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-secondary);
}

#editDreamModal .modal-header h2,
#editDreamModal .modal-header h3 {
    margin: 0;
    font-size: 1.5em;
    font-weight: 600;
    color: var(--text-primary);
}

#editDreamModal .modal-footer {
    flex-shrink: 0;
    padding: var(--space-lg);
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    display: flex;
    gap: var(--space-md);
    justify-content: flex-end;
}

#editDreamModal .modal-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-lg);
    background: var(--bg-primary);
}

#editDreamModal .form-group {
    margin-bottom: var(--space-lg);
}

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

#editDreamModal .form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: var(--text-primary);
    font-size: 0.95em;
}

#editDreamModal input,
#editDreamModal textarea {
    width: 100%;
    padding: var(--space-md);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 1em;
    transition: all 0.3s ease;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: inherit;
}

#editDreamModal input:focus,
#editDreamModal textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
    background: var(--bg-primary);
}

#editDreamModal input[type="file"] {
    border: 2px dashed var(--border-color);
    padding: var(--space-lg);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--bg-secondary);
}

#editDreamModal input[type="file"]:hover {
    border-color: var(--accent-color);
    background: rgba(0, 102, 204, 0.05);
}

#editDreamModal .file-upload-hint {
    font-size: 0.85em;
    color: var(--text-secondary);
    margin-top: var(--space-xs);
    text-align: center;
    font-style: italic;
}

#editDreamModal .current-photos-label {
    font-weight: 600;
    margin-bottom: var(--space-md);
    color: var(--text-primary);
    font-size: 1em;
    display: block;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-color);
}

#editDreamModal .current-photos-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    padding: var(--space-md) 0;
}

#editDreamModal .current-photo-item {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: var(--border-radius);
    overflow: hidden;
    border: 2px solid var(--border-color);
    transition: all 0.3s ease;
}

#editDreamModal .current-photo-item:hover {
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

#editDreamModal .current-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#editDreamModal .remove-current-photo {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--danger-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    z-index: 3;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

#editDreamModal .remove-current-photo:hover {
    background: #c82333;
    transform: scale(1.1);
    box-shadow: 0 3px 8px rgba(0,0,0,0.4);
}

/* Mobile responsive adjustments for edit modal */
@media (max-width: 768px) {
    #editDreamModal {
        padding: var(--space-sm);
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }
    
    #editDreamModal .modal-content {
        max-height: 95vh !important;
        margin: 0 !important;
        width: calc(100% - 2 * var(--space-sm)) !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    #editDreamModal .modal-body {
        max-height: none !important;
        flex: 1 !important;
        overflow-y: auto !important;
        padding: var(--space-md);
    }
    
    #editDreamModal .modal-header,
    #editDreamModal .modal-footer {
        padding: var(--space-md);
    }
    
    #editDreamModal .current-photos-grid {
        gap: var(--space-sm);
    }
    
    #editDreamModal .current-photo-item {
        width: 80px;
        height: 80px;
    }
}

/* Touch scrolling improvements for edit modal */
@media (hover: none) and (pointer: coarse) {
    #editDreamModal .modal-body {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        overscroll-behavior: contain;
    }
}

/* Dark mode specific adjustments */
[data-theme="dark"] #editDreamModal .modal-content {
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

[data-theme="dark"] #editDreamModal input[type="file"]:hover {
    background: rgba(0, 102, 204, 0.1);
}
    
    .dream-actions {
        align-self: flex-end;
    }
    
    .dreams-year-title {
        font-size: 1.3em;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }
}

/* Ensure smooth scrolling for all modal content */
.modal-content {
    scroll-behavior: smooth;
}

/* Improve modal scrolling on touch devices */
@media (hover: none) and (pointer: coarse) {
    #addDreamModal .modal-content,
    #addDreamModal .modal-body {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
}

/* ===== SUBTASKS MODAL — MEMORIGI REDESIGN ===== */
#subtasksViewModal .subtasks-modal-redesign {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    border-radius: 16px;
    max-width: 460px;
}

#subtasksViewModal .modal-header {
    flex-shrink: 0;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0;
}

#subtasksViewModal .modal-header .modal-title {
    font-size: 0.95rem;
    font-weight: 700;
}

.subtasks-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.subtasks-action-chip {
    font-size: 0.7rem !important;
    padding: 0.25rem 0.6rem !important;
    border-radius: 16px !important;
    white-space: nowrap;
}

.subtasks-modal-content {
    flex: 1;
    /* min-height: 0 is load-bearing — without it, this flex item inherits
       implicit min-height: auto which refuses to shrink below the content's
       intrinsic height, defeating overflow-y: auto. Result: long subtask
       lists push the modal taller than 90vh and the top is cut off above
       the viewport with no way to scroll. */
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-md) var(--space-lg);
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scroll-behavior: smooth;
}

#subtasksViewModal .subtasks-footer {
    flex-shrink: 0;
    padding: 0.75rem 1.25rem 1rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
}

/* Add subtask button — full width, prominent */
.subtasks-add-btn {
    width: 100%;
    padding: 0.6rem 1rem !important;
    border-radius: 10px !important;
    font-size: 0.85rem !important;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

/* Secondary footer actions (show completed, archive) */
.subtasks-footer-secondary {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

/* ─── Steps feature (2026-05-21) ─── */
/* Steps live one level under subtasks. Each subtask card gets a chevron prefix,
   an IP pill + progress bar when steps exist, and an expandable container
   underneath holding the step rows + "Add step" input. */
#subtasksViewModal .subtask-step-chevron {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    cursor: pointer;
    font-size: 0.7rem;
    user-select: none;
    margin-right: 2px;
    border-radius: 4px;
    transition: 0.12s ease;
}
#subtasksViewModal .subtask-step-chevron:hover {
    color: var(--primary-color);
    background: rgba(139, 92, 246, 0.1);
}
#subtasksViewModal .step-ip-pill {
    background: rgba(245, 158, 11, 0.18);
    color: var(--warning-color, #f59e0b);
    font-size: 0.62rem;
    padding: 1px 7px;
}
#subtasksViewModal .step-progress-bar {
    margin-top: 0.4rem;
    height: 3px;
    background: rgba(100, 116, 139, 0.18);
    border-radius: 3px;
    overflow: hidden;
}
#subtasksViewModal .step-progress-bar .step-progress-fill {
    height: 100%;
    background: var(--success-color, #10b981);
    border-radius: 3px;
    transition: width 0.25s ease;
}

/* Step container — sits BETWEEN subtask cards, indented from the chevron */
#subtasksViewModal .step-container {
    margin: 0 0.35rem 0.6rem 1.5rem;
    padding: 0.35rem 0 0.35rem 0.75rem;
    border-left: 1px dashed var(--border-color);
}
#subtasksViewModal .step-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

/* Individual step row — compact version of the subtask primer card */
#subtasksViewModal .step-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 0.4rem 0.55rem;
    transition: background 0.12s ease;
    position: relative;
    border-left: 2px solid transparent;
}
#subtasksViewModal .step-row:hover {
    background: var(--bg-hover);
}
#subtasksViewModal .step-row.is-priority {
    border-left-color: var(--gold-soft, #fbbf24);
    background: linear-gradient(
        90deg,
        rgba(251, 191, 36, 0.06),
        var(--bg-secondary) 55%
    );
}
#subtasksViewModal .step-check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    /* Brighter outline + subtle inner fill so the circle reads clearly against
       the dark step-row background. Mirrors the .primer-card-check pattern. */
    border: 2px solid var(--text-secondary);
    background: var(--bg-primary);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: transparent;
    transition: 0.15s ease;
    padding: 0;
}
#subtasksViewModal .step-check:hover {
    border-color: var(--primary-color);
    background: var(--bg-hover);
}
#subtasksViewModal .step-check.checked {
    background: var(--success-color, #10b981);
    border-color: var(--success-color, #10b981);
    color: white;
    box-shadow: none;
}
#subtasksViewModal .step-check .icon-emoji {
    opacity: 0;
    transition: opacity 0.15s ease;
    line-height: 1;
}
#subtasksViewModal .step-check.checked .icon-emoji {
    opacity: 1;
}
#subtasksViewModal .step-name {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
    word-break: break-word;
}
#subtasksViewModal .step-name.completed {
    text-decoration: line-through;
    color: var(--text-tertiary);
}
#subtasksViewModal .step-actions {
    display: flex;
    gap: 0.2rem;
    align-items: center;
    flex-shrink: 0;
}
#subtasksViewModal .step-action-btn {
    background: transparent;
    border: 0;
    color: var(--text-secondary);
    width: 26px;
    height: 26px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.12s ease;
}
#subtasksViewModal .step-action-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
#subtasksViewModal .step-action-btn.step-action-remove:hover {
    background: rgba(239, 68, 68, 0.18);
    color: var(--error-color, #ef4444);
}
#subtasksViewModal .step-action-btn.copied {
    background: var(--success-color, #10b981);
    color: white;
}
#subtasksViewModal .step-priority-toggle .priority-icon {
    font-size: 0.95rem;
}

/* "+ Add step" input row */
#subtasksViewModal .step-add-row {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.45rem;
}
#subtasksViewModal .step-add-input {
    flex: 1;
    background: var(--bg-primary);
    border: 1px dashed var(--border-color);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.82rem;
    padding: 0.4rem 0.6rem;
    border-radius: 7px;
}
#subtasksViewModal .step-add-input::placeholder {
    color: var(--text-tertiary);
}
#subtasksViewModal .step-add-input:focus {
    outline: none;
    border-color: var(--primary-color);
    border-style: solid;
}
#subtasksViewModal .step-add-btn {
    background: var(--primary-color);
    color: white;
    border: 0;
    border-radius: 7px;
    padding: 0.4rem 0.85rem;
    font-weight: 700;
    font-size: 0.78rem;
    cursor: pointer;
    font-family: inherit;
}
#subtasksViewModal .step-add-btn:hover {
    filter: brightness(1.1);
}

/* Subtask items — enhanced spacing and style */
#subtasksViewModal .subtask-item {
    margin-bottom: 0.35rem;
    border-radius: 10px;
    padding: 0.6rem 0.75rem;
    transition: background 0.12s ease, transform 0.1s ease;
}

#subtasksViewModal .subtask-item:hover {
    background: var(--bg-hover);
}

#subtasksViewModal .subtask-item:active {
    transform: scale(0.99);
}

/* Mobile adjustments for subtasks modal */
@media (max-width: 768px) {
    #subtasksViewModal .subtasks-modal-redesign {
        max-height: 95vh;
        margin: 0.5rem;
        width: calc(100% - 1rem);
        border-radius: 14px;
    }

    .subtasks-modal-content {
        padding: 0.5rem 0.75rem;
    }

    #subtasksViewModal .modal-header {
        padding: 0.75rem 1rem;
    }

    #subtasksViewModal .subtasks-footer {
        padding: 0.6rem 1rem 0.85rem;
    }
}

/* ===== SUBTASK MODAL (ADD) SCROLLING FIX ===== */
#subtaskModal .modal-content {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.subtask-modal-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-md) var(--space-lg);
}

#subtaskModal .modal-header {
    flex-shrink: 0;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--border-color);
}

#subtaskModal .modal-footer {
    flex-shrink: 0;
    padding: var(--space-lg);
    border-top: 1px solid var(--border-color);
    text-align: center;
}

/* Mobile adjustments for subtask modal */
@media (max-width: 768px) {
    #subtaskModal .modal-content {
        max-height: 95vh;
        margin: var(--space-sm);
        width: calc(100% - 2 * var(--space-sm));
    }
    
    .subtask-modal-content {
        padding: var(--space-sm) var(--space-md);
    }
    
    #subtaskModal .modal-header,
    #subtaskModal .modal-footer {
        padding: var(--space-md);
    }
}

/* ===== EDIT TASK MODAL SCROLLING FIX ===== */
#editTaskModal .modal-content {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Container should not scroll, only the content area */
}

#editTaskModal .modal-header {
    flex-shrink: 0; /* Header should not shrink */
    padding: var(--space-lg) var(--space-lg) var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-color);
}

.edit-task-modal-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-md) var(--space-lg);
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scroll-behavior: smooth;
    max-height: calc(90vh - 120px); /* Account for header and footer */
}

#editTaskModal .modal-footer {
    flex-shrink: 0; /* Footer should not shrink */
    padding: var(--space-md) var(--space-lg) var(--space-lg) var(--space-lg);
    border-top: 1px solid var(--border-color);
    text-align: center;
}

/* Mobile-specific adjustments for edit task modal */
@media (max-width: 768px) {
    #editTaskModal .modal-content {
        max-height: 95vh;
        margin: var(--space-sm);
        width: calc(100% - 2 * var(--space-sm));
    }
    
    .edit-task-modal-content {
        padding: var(--space-sm) var(--space-md);
        max-height: calc(95vh - 100px); /* Slightly less padding on mobile */
    }
    
    #editTaskModal .modal-header,
    #editTaskModal .modal-footer {
        padding: var(--space-md);
    }
}

/* ===== TASK MODAL — MEMORIGI REDESIGN ===== */
#taskModal .task-modal-redesign {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    border-radius: 16px;
    max-width: 440px;
}

#taskModal .modal-header {
    flex-shrink: 0;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0;
}

#taskModal .modal-header .modal-title {
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.task-modal-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem 1.25rem;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    max-height: calc(90vh - 110px);
}

/* Primary task name input — large, prominent */
.task-field-primary {
    margin-bottom: 0.75rem;
}

.task-name-input {
    font-size: 1rem !important;
    font-weight: 500;
    border: none !important;
    border-bottom: 2px solid var(--border-color) !important;
    border-radius: 0 !important;
    padding: 0.6rem 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    resize: none;
}

.task-name-input:focus {
    border-bottom-color: var(--accent-color) !important;
    box-shadow: none !important;
}

.task-name-input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

/* Option chips row */
.task-options-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.task-option-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.7rem;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.task-option-chip:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: rgba(0, 102, 204, 0.08);
}

.task-option-chip:active {
    transform: scale(0.96);
}

.task-option-chip .icon-fa { font-size: 0.7rem; }
.fa-loaded .task-option-chip .icon-emoji { display: none; }

/* Expandable sections — hidden by default */
.task-expand-section {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.25s ease, padding 0.25s ease;
    margin: 0;
    padding: 0 0.25rem;
}

.task-expand-section.expanded {
    max-height: none;
    opacity: 1;
    margin: 0.5rem 0;
    padding: 0.5rem 0.25rem;
    border-left: 3px solid var(--accent-color);
    padding-left: 0.75rem;
    overflow: visible;
}

.task-expand-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.35rem;
}

.task-expand-section .form-input {
    font-size: 0.85rem;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
}

.task-expand-section .form-error {
    font-size: 0.7rem;
    margin-top: 0.2rem;
}

/* Toggle switches section */
.task-toggles-row {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0.5rem;
    border-top: 1px solid var(--border-color);
    padding-top: 0.5rem;
}

.task-toggle-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.task-toggle-label {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-primary);
    display: block;
}

.task-toggle-hint {
    font-size: 0.65rem;
    color: var(--text-muted);
    display: block;
    margin-top: 1px;
}

/* Create button */
#taskModal .modal-footer {
    flex-shrink: 0;
    padding: 0.75rem 1.25rem 1rem;
    border-top: 1px solid var(--border-color);
}

.task-create-btn {
    width: 100%;
    padding: 0.65rem 1rem !important;
    border-radius: 10px !important;
    font-size: 0.9rem !important;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    #taskModal .task-modal-redesign {
        max-height: 95vh;
        margin: 0.5rem;
        width: calc(100% - 1rem);
        border-radius: 14px;
    }

    .task-modal-content {
        padding: 0.75rem 1rem;
        max-height: calc(95vh - 100px);
    }

    .task-options-row {
        gap: 0.4rem;
    }

    .task-option-chip {
        padding: 0.3rem 0.6rem;
        font-size: 0.7rem;
    }
}

/* Dark Mode Adjustments */
[data-theme="dark"] .dream-card {
    border-color: var(--border-color);
}

[data-theme="dark"] .dream-card.completed {
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(40, 167, 69, 0.1) 100%);
}

/* ===== TASK INFO ICON STYLING ===== */
.task-info-icon {
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: all 0.2s ease;
    background: rgba(var(--accent-color-rgb), 0.1);
    color: var(--accent-color);
}

.task-info-icon:hover {
    transform: scale(1.1);
    background: rgba(var(--accent-color-rgb), 0.2);
}


/* ===== TASK DETAILS IN SUBTASKS MODAL (MEMORIGI STYLE) ===== */
.task-details-simple {
    margin: 0 0 var(--space-md);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Remove border in dedicated details modal */
#detailsModal .task-details-simple {
    border-bottom: none;
    padding-bottom: 0;
}

.task-detail-simple {
    background: var(--bg-tertiary);
    border-radius: 12px;
    padding: 12px 14px;
    border-left: 3px solid var(--accent-color);
}

.task-detail-simple:last-child {
    margin-bottom: 0;
}

/* ===== TWO-COLUMN LAYOUT FOR TASK DETAILS ===== */
.task-details-two-column {
    display: flex !important;
    gap: var(--space-lg);
    margin: 0 var(--space-md) var(--space-lg) var(--space-md);
    padding: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-color);
    justify-content: space-between;
}

.task-details-two-column .task-detail-column {
    flex: 1;
    min-width: 0; /* Allows flex items to shrink below their content size */
    padding: 0 var(--space-sm);
}

.task-details-two-column .task-detail-column:first-child {
    padding-left: 0;
}

.task-details-two-column .task-detail-column:last-child {
    padding-right: 0;
}

/* Mobile-specific optimizations for better spacing */
@media (max-width: 480px) {
    .task-details-two-column {
        margin: 0 var(--space-sm) var(--space-lg) var(--space-sm);
        padding: var(--space-sm);
        gap: var(--space-md);
    }
    
    .task-details-two-column .task-detail-column {
        padding: 0 var(--space-xs);
    }
}

/* Two-column layout maintained on all screen sizes for better space utilization */

.task-detail-label-simple {
    display: inline-block;
    font-weight: 700;
    color: var(--accent-color);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
}

.task-detail-text {
    color: var(--text-primary);
    font-size: 0.88rem;
    line-height: 1.55;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    padding: 0;
}

/* Mobile text optimizations */
@media (max-width: 480px) {
    .task-detail-text {
        font-size: 0.84rem;
        line-height: 1.5;
    }
}

/* Dark mode adjustments for simplified task details */
[data-theme="dark"] .task-detail-simple {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .task-details-two-column {
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

/* ===== SUBTASK INFO ICON STYLING ===== */
.subtask-info-icon {
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 50%;
    transition: all 0.2s ease;
    margin-left: var(--space-xs);
    display: inline-flex;
    align-items: center;
    background: rgba(var(--accent-color-rgb), 0.1);
    color: var(--accent-color);
}

.subtask-info-icon:hover {
    transform: scale(1.1);
    background: rgba(var(--accent-color-rgb), 0.2);
}

.subtask-info-icon .icon {
    font-size: 0.8rem;
}

/* ===== NOTIFICATION SETTINGS MODAL SCROLLING FIX ===== */
#notificationSettingsModal .modal-content {
    max-height: 85vh;
    overflow-y: auto !important;  /* Override the global overflow: hidden */
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    position: relative;
    touch-action: pan-y;  /* Allow vertical touch scrolling */
}

/* Ensure content area can scroll on mobile */
@media (max-width: 768px) {
    #notificationSettingsModal {
        align-items: flex-start;  /* Align to top instead of center */
        padding: var(--space-xs);
    }

    #notificationSettingsModal .modal-content {
        max-height: 80vh;  /* Reduce to account for mobile browser chrome */
        height: auto;
        padding: var(--space-md);
        overflow-y: scroll !important;  /* Force scroll instead of auto */
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;  /* Enable touch scrolling on mobile */
        overscroll-behavior: contain;  /* Prevent scroll chaining */
        margin-top: var(--space-md);
        margin-bottom: var(--space-md);
    }
}

/* Settings rows should not prevent scrolling */
#notificationSettingsModal .settings-row {
    flex-shrink: 0;
    margin-bottom: var(--space-md);
}

/* Ensure save button is always visible */
#notificationSettingsModal .btn-primary {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-md);
}

/* Bulk Move Subtasks - Floating Action Button */
.bulk-move-fab {
    /* !important: this class is in the tap-feedback selector; first tap injects
       .lam-ripple-host { position: relative } which otherwise wins at equal
       specificity + later source order and drops the FAB off-screen (Pattern #11). */
    position: fixed !important;
    bottom: 2rem;
    right: 2rem;
    background: var(--primary-color);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    z-index: var(--z-bulk-operations) !important;
    transition: all 0.3s ease;
    animation: slideInUp 0.3s ease;
}

.bulk-move-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.bulk-move-fab:active {
    transform: translateY(0);
}

.bulk-move-fab .icon {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
}

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

/* ================================================================
   MOBILE LISTS VIEW REDESIGN
   Single-row group header + clean flex list items (≤768px)
   ================================================================ */

@media (max-width: 768px) {

    /* === GROUP CARD: tighter, rounder === */
    .group-item {
        margin-bottom: 10px !important;
        border-radius: 14px !important;
    }

    /* === GROUP HEADER: one horizontal flex row === */
    .group-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 11px 14px !important;
    }

    /* Group name: fills space, no bottom margin */
    .group-name {
        flex: 1 !important;
        min-width: 0 !important;
        margin-bottom: 0 !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }

    .group-name .editable,
    .group-name span.editable {
        flex: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* Group actions: compact right cluster */
    .group-actions {
        flex-shrink: 0 !important;
        width: auto !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 6px !important;
    }

    /* Chevron: small circular touch target */
    .group-actions .task-chevron {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        flex-shrink: 0 !important;
    }

    /* "+ List" button: compact rounded pill */
    .group-actions .btn {
        flex: none !important;
        width: auto !important;
        min-width: auto !important;
        padding: 5px 13px !important;
        font-size: 0.72rem !important;
        border-radius: 20px !important;
        min-height: 28px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        letter-spacing: 0.02em !important;
    }

    /* "⋯" menu button: compact */
    .group-menu-btn {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        font-size: 0.875rem !important;
        flex-shrink: 0 !important;
    }

    /* === LISTS CONTAINER: tighter inner padding === */
    .lists-container {
        padding: 6px 8px 10px !important;
    }

    /* === LIST ITEMS: clean horizontal flex row === */
    .nested-list-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        padding: 9px 12px !important;
        margin-bottom: 5px !important;
        border-radius: 9px !important;
        min-height: 44px !important;
        position: relative !important;
        contain: none !important;
    }

    /* List content: grows, clips overflow */
    .nested-list-item .list-content {
        flex: 1 !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        padding-bottom: 0 !important;
        position: static !important;
        contain: none !important;
    }

    /* List name container */
    .nested-list-item .list-content .list-name {
        width: auto !important;
        max-width: 100% !important;
        overflow: hidden !important;
        transform: none !important;
        min-width: 0 !important;
    }

    /* List name text: single-line truncation */
    .nested-list-item .list-content .list-name .editable,
    .nested-list-item .list-content .list-name span {
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        -webkit-font-smoothing: antialiased !important;
        transform: translateZ(0) !important;
    }

    /* List meta ("N active tasks"): static flow, under name */
    .nested-list-item .list-content .list-meta {
        position: static !important;
        bottom: auto !important;
        left: auto !important;
        font-size: 0.68rem !important;
        color: var(--text-secondary) !important;
        margin-top: 2px !important;
        padding: 0 !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        transform: none !important;
    }

    /* List actions: static, compact right cluster */
    .nested-list-item .list-actions {
        position: static !important;
        bottom: auto !important;
        right: auto !important;
        flex-shrink: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        margin-left: 8px !important;
        max-width: none !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        transform: none !important;
    }

    /* Letter badge: compact square */
    .nested-list-item .list-letter-badge {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        border-radius: 7px !important;
        font-size: 0.7rem !important;
        order: 1 !important;
        flex-shrink: 0 !important;
    }

    /* Task count pill */
    .nested-list-item .list-task-count {
        font-size: 0.68rem !important;
        padding: 2px 7px !important;
        min-width: 22px !important;
        text-align: center !important;
        order: 2 !important;
        flex-shrink: 0 !important;
    }

    /* Delete (covert) button */
    .nested-list-item .covert-delete {
        order: 3 !important;
        width: 28px !important;
        height: 28px !important;
        padding: 4px !important;
        font-size: 0.8rem !important;
        flex-shrink: 0 !important;
    }
}

/* Selected Subtask State */
.subtask-item.selected {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.25) 0%, rgba(var(--primary-rgb), 0.15) 100%) !important;
    border: 2px solid var(--primary-color) !important;
    border-left: 5px solid var(--primary-color) !important;
    box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.4), inset 0 0 20px rgba(var(--primary-rgb), 0.1);
    transform: scale(1.02);
    transition: all 0.2s ease;
    position: relative;
}

.subtask-item.selected::before {
    content: "✓";
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: var(--primary-color);
    color: white;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.875rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    animation: checkmarkPop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes checkmarkPop {
    0% {
        transform: translateY(-50%) scale(0);
        opacity: 0;
    }
    50% {
        transform: translateY(-50%) scale(1.2);
    }
    100% {
        transform: translateY(-50%) scale(1);
        opacity: 1;
    }
}

.subtask-item.selected:hover {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.3) 0%, rgba(var(--primary-rgb), 0.2) 100%) !important;
    box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.5), inset 0 0 25px rgba(var(--primary-rgb), 0.15);
    transform: scale(1.03);
}

/* Mobile Selection Mode Visual Feedback */
body.subtask-selection-mode {
    position: relative;
}

body.subtask-selection-mode::before {
    content: "Tap subtasks to select • Tap button when done";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--primary-color);
    color: white;
    text-align: center;
    padding: 0.75rem 3rem 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.875rem;
    z-index: var(--z-selection-mode);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    animation: slideDown 0.3s ease;
}

/* Cancel button for selection mode */
.selection-mode-cancel {
    display: none;
}

body.subtask-selection-mode .selection-mode-cancel {
    display: flex;
    position: fixed;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: bold;
    cursor: pointer;
    z-index: calc(var(--z-selection-mode) + 1);
    transition: background 0.2s ease;
}

body.subtask-selection-mode .selection-mode-cancel:hover {
    background: rgba(255, 255, 255, 0.3);
}

body.subtask-selection-mode .selection-mode-cancel:active {
    background: rgba(255, 255, 255, 0.4);
}

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

/* Highlight subtask items in selection mode */
body.subtask-selection-mode .subtask-item {
    cursor: pointer;
    transition: background 0.2s ease;
}

body.subtask-selection-mode .subtask-item:active {
    background: var(--bg-tertiary);
}

/* PRIMER TASK SELECTION MODE */

/* Selected Primer Task State */
.primer-task-item.selected,
.primer-card.selected {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.25) 0%, rgba(var(--primary-rgb), 0.15) 100%) !important;
    border: 2px solid var(--primary-color) !important;
    border-left: 5px solid var(--primary-color) !important;
    box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.4), inset 0 0 20px rgba(var(--primary-rgb), 0.1);
    transform: scale(1.02);
    transition: all 0.2s ease;
    position: relative;
}

.primer-task-item.selected::after,
.primer-card.selected::after {
    content: "✓";
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: var(--primary-color);
    color: white;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.75rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    animation: checkmarkPop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.primer-task-item.selected:hover,
.primer-card.selected:hover {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.3) 0%, rgba(var(--primary-rgb), 0.2) 100%) !important;
    box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.5), inset 0 0 25px rgba(var(--primary-rgb), 0.15);
    transform: scale(1.03);
}

/* Mobile Selection Mode Visual Feedback for Primer */
body.primer-selection-mode {
    position: relative;
}

body.primer-selection-mode::before {
    content: "Tap tasks to select • Tap button when done";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--primary-color);
    color: white;
    text-align: center;
    padding: 0.75rem 3rem 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.875rem;
    z-index: var(--z-selection-mode);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    animation: slideDown 0.3s ease;
}

.selection-mode-cancel.primer-cancel {
    display: none;
}

body.primer-selection-mode .selection-mode-cancel.primer-cancel {
    display: flex;
}

/* Highlight primer task items in selection mode */
body.primer-selection-mode .primer-task-item,
body.primer-selection-mode .primer-card {
    cursor: pointer;
    transition: background 0.2s ease;
}

body.primer-selection-mode .primer-task-item:active,
body.primer-selection-mode .primer-card:active {
    background: var(--bg-tertiary);
}

/* ===== MOBILE MORNING / FOCUS PAGE TASK CARD REDESIGN ===== */
@media (max-width: 768px) {
    /*
     * 4-column grid: [drag 22px] [checkbox 28px] [name+meta 1fr] [menu auto]
     * .task-bottom-bar uses display:contents so its children (checkbox, meta,
     * menu) become direct grid items and can be placed individually.
     */
    #morningPage .draggable-task .task-header,
    #focusPage .draggable-task .task-header {
        display: grid !important;
        grid-template-columns: 22px 28px 1fr auto !important;
        grid-template-rows: auto auto !important;
        column-gap: 6px !important;
        row-gap: 2px !important;
        flex-direction: unset !important;
        align-items: center !important;
        padding: 0 !important;
    }

    /* Drag handle: col 1, spans both rows */
    #morningPage .draggable-task .drag-handle,
    #focusPage .draggable-task .drag-handle {
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;
        align-self: center !important;
        justify-self: center !important;
        width: 22px !important;
        font-size: 1.1rem !important;
        color: var(--text-muted) !important;
        opacity: 0.5 !important;
    }

    /* Task name: col 3, row 1 */
    #morningPage .draggable-task .task-content,
    #focusPage .draggable-task .task-content {
        grid-column: 3 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
        padding: 0 !important;
    }

    /* Dissolve task-bottom-bar so its children become grid items */
    #morningPage .draggable-task .task-bottom-bar,
    #focusPage .draggable-task .task-bottom-bar {
        display: contents !important;
    }

    /* Checkbox: col 2, spans both rows — vertically centered beside name+meta */
    #morningPage .draggable-task .task-checkbox,
    #focusPage .draggable-task .task-checkbox {
        grid-column: 2 !important;
        grid-row: 1 / 3 !important;
        align-self: center !important;
        justify-self: center !important;
        margin: 0 !important;
        padding: 0 !important;
        border-top: none !important;
        width: 22px !important;
        height: 22px !important;
        flex-shrink: 0 !important;
    }

    /* Meta badges: col 3, row 2 — sits below the task name */
    #morningPage .draggable-task .task-meta,
    #focusPage .draggable-task .task-meta {
        grid-column: 3 !important;
        grid-row: 2 !important;
        align-self: center !important;
        gap: 4px !important;
        flex-wrap: wrap !important;
    }

    /* Menu button: col 4, spans both rows */
    #morningPage .draggable-task .task-menu-btn,
    #focusPage .draggable-task .task-menu-btn {
        grid-column: 4 !important;
        grid-row: 1 / 3 !important;
        align-self: center !important;
        justify-self: end !important;
        margin-left: 0 !important;
    }

    /* Compact card padding */
    #morningPage .task-item,
    #focusPage .task-item {
        padding: 10px 12px !important;
        margin-bottom: 6px !important;
    }

    /* Task name size */
    #morningPage .task-name,
    #focusPage .task-name {
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
    }

    /* Meta badge sizing */
    #morningPage .task-meta-item,
    #focusPage .task-meta-item {
        font-size: 0.72rem !important;
        padding: 1px 5px !important;
    }

    /* Group section header spacing */
    #morningPage .morning-group-section,
    #focusPage .focus-group-section {
        margin-bottom: 12px !important;
    }

    #morningPage .morning-group-header,
    #focusPage .focus-group-header {
        padding: 8px 12px !important;
        font-size: 0.8rem !important;
    }
}

/* ===== MOBILE PRIMER PAGE COMPACT ===== */
@media (max-width: 768px) {
    /* Compact page header */
    #primerPage .header {
        padding: 8px 12px !important;
    }

    #primerPage .header h1 {
        font-size: 1.1rem !important;
        font-weight: 600 !important;
    }

    /* Compact page content */
    #primerPage .page-content {
        padding: 10px 12px !important;
    }

    /* Compact sub-tabs */
    #primerPage .primer-tabs {
        margin-bottom: 10px !important;
        padding: 0 !important;
    }

    #primerPage .primer-tab {
        padding: 6px 14px !important;
        font-size: 0.9rem !important;
    }

    #primerPage .primer-tab-count {
        min-width: 1.2rem !important;
        height: 1.2rem !important;
        font-size: 0.7rem !important;
        padding: 0 4px !important;
    }

    #primerPage .primer-tab-date {
        font-size: 0.55rem !important;
    }

    #primerPage .primer-tab-add {
        padding: 6px 8px !important;
        font-size: 1rem !important;
    }

    /* Compact empty state */
    #primerPage .empty-state {
        padding: 20px 16px !important;
    }

    #primerPage .empty-state-icon {
        font-size: 1.8rem !important;
        margin-bottom: 8px !important;
    }

    #primerPage .empty-state-title {
        font-size: 1rem !important;
        margin-bottom: 6px !important;
    }

    #primerPage .empty-state-message {
        font-size: 0.8rem !important;
        line-height: 1.5 !important;
    }

    /* Compact primer cards on mobile — keep checkbox gap for touch accuracy */
    .primer-card {
        padding: 0.5rem 0.65rem;
        gap: 0.875rem;
        margin-bottom: 0.375rem;
        border-radius: 10px;
    }

    .primer-card-check {
        width: 20px;
        height: 20px;
        min-width: 20px;
    }

    .primer-card-title {
        font-size: 0.825rem;
    }

    .primer-tag {
        font-size: 0.6rem;
        padding: 0.05rem 0.35rem;
    }

    .primer-action-btn {
        width: 26px;
        height: 26px;
        font-size: 0.75rem;
    }

    .primer-section-label {
        font-size: 0.65rem;
    }

    /* Group section header — tighter on mobile */
    #primerPage .group-section-header {
        padding: 0.5rem 0;
    }

    #primerPage .group-section-title {
        font-size: 0.85rem;
    }
}

/* ===== LIST VIEW MODAL REDESIGN ===== */

/* Make the modal a flex column so header/toolbar are sticky and tasks scroll */
.list-view-modal-content {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    overflow: hidden !important;
}

.list-view-modal-header {
    padding: 16px 20px !important;
    flex-shrink: 0;
}

/* Compact toolbar: count on left, add-button on right */
.list-view-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    gap: 12px;
}

.list-view-count {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* Compact pill-shaped add button */
.list-view-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 16px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.35);
    letter-spacing: 0.01em;
}

.list-view-add-btn:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.45);
    transform: translateY(-1px);
}

.list-view-add-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(var(--primary-rgb), 0.3);
}

.list-view-add-icon {
    font-size: 1.1rem;
    line-height: 1;
    margin-top: -1px;
    font-weight: 400;
}

/* Tasks area: scrolls independently */
#listViewTasks {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px 20px;
    -webkit-overflow-scrolling: touch;
}

/* Slightly refined task cards within this modal */
#listViewTasks .task-card {
    margin-bottom: 8px;
    border-radius: 10px;
}

#listViewTasks .task-card:last-child {
    margin-bottom: 0;
}

/* ===== TAKE ACTION PAGE TABS ===== */
.take-action-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.take-action-tab {
    padding: 0.6rem 1.2rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.take-action-tab.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.take-action-tab:hover {
    color: var(--text-primary);
}

/* Dream Progress Dashboard */
.dream-progress-dashboard {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.dream-dashboard-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 1rem;
    border-left: 4px solid #5856d6;
}

.dream-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.dream-dashboard-title {
    font-size: 0.95rem;
    font-weight: 700;
}

.dream-dashboard-year {
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    padding: 2px 8px;
    border-radius: 6px;
}

.dream-dashboard-progress {
    margin-bottom: 0.5rem;
}

.dream-progress-bar-container {
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.35rem;
}

.dream-progress-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.dream-progress-text {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.dream-dashboard-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.5rem;
}

.dream-dashboard-completed {
    font-size: 0.75rem;
    color: var(--success-color);
    margin-top: 0.5rem;
    font-weight: 600;
}

/* ===== PRINT STYLES ===== */
@media print {
  .sidebar, .nav, .modal, .landing-overlay, #landingOverlay,
  button, .fab, .floating-btn {
    display: none !important;
  }
  body {
    background: white !important;
    color: black !important;
  }
}

/* ============================================================================
   Cash Rewards (2026-05-18)
   Foundation styles for the dedicated page. Full feature styles for hero card,
   dual-color bar, sparkles, widget, celebration, etc. land in later chunks.
   ============================================================================ */

/* The local CSS variables here mirror the mockup at src/mockups/cash-rewards-mobile-preview.html */
#cashRewardsPage {
    --cash-gold: #fbbf24;
    --cash-success: #10b981;
    --cash-cyan: #06b6d4;
}

/* On-page master toggle — large, prominent, top of page */
.cash-master-toggle-card {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--cash-gold) 14%, var(--bg-secondary)),
        var(--bg-secondary));
    border: 1px solid color-mix(in srgb, var(--cash-gold) 30%, var(--border-color));
    border-radius: 18px;
    padding: 1.5rem 1.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}
.cash-master-toggle-card::before {
    content: "";
    position: absolute;
    top: -40px; right: -40px;
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.18), transparent 70%);
    pointer-events: none;
}
.cash-master-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}
.cash-master-toggle-info {
    flex: 1;
    min-width: 0;
}
.cash-master-toggle-title {
    font-weight: 800;
    font-size: 1.15rem;
    margin-bottom: 0.3rem;
    color: var(--text-primary);
}
.cash-master-toggle-desc {
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.4;
}

/* Chunk 1 placeholder body — replaced in Chunk 3 */
.cash-placeholder {
    background: var(--bg-secondary);
    border: 1px dashed var(--border-color);
    border-radius: 14px;
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary);
}
.cash-placeholder-emoji {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}
.cash-placeholder-title {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}
.cash-placeholder-msg {
    font-size: 0.92rem;
    margin-bottom: 0.5rem;
}
.cash-placeholder-msg strong {
    color: var(--cash-gold);
}
.cash-placeholder-note {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Mobile tweaks for the master toggle card */
@media (max-width: 640px) {
    .cash-master-toggle-card {
        padding: 1.2rem;
    }
    .cash-master-toggle-row {
        gap: 1rem;
    }
    .cash-master-toggle-title {
        font-size: 1.02rem;
    }
    .cash-master-toggle-desc {
        font-size: 0.82rem;
    }
}

/* ─── Chunk 2: Subtask K pill (green money) ─── */
.primer-tag-cash {
    background: rgba(16, 185, 129, 0.16);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.35);
    cursor: pointer;
    font-weight: 700;
    transition: all 0.12s ease;
}
.primer-tag-cash:hover {
    background: rgba(16, 185, 129, 0.26);
    border-color: rgba(16, 185, 129, 0.55);
    transform: translateY(-1px);
}
.primer-tag-cash.pill-cash-paid {
    background: rgba(16, 185, 129, 0.32);
    color: white;
    border-color: rgba(16, 185, 129, 0.6);
}

/* Subtle cash pill specifically for inline subtask rows */
.inline-subtask-item .primer-tag-cash {
    font-size: 0.7rem;
    padding: 0.18rem 0.45rem;
    margin-left: auto;
}

/* ─── Currency input styling ─── */
.currency-input {
    display: flex;
    align-items: stretch;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    max-width: 200px;
}
.currency-input .currency-symbol {
    padding: 0.6rem 0.85rem;
    background: rgba(251, 191, 36, 0.14);
    color: #fbbf24;
    font-weight: 700;
    border-right: 1px solid var(--border-color);
    display: flex;
    align-items: center;
}
.currency-input input[type="number"] {
    background: transparent;
    border: none;
    color: var(--text-primary);
    padding: 0.6rem 0.85rem;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    outline: none;
    flex: 1;
    width: 100%;
    -moz-appearance: textfield;
}
.currency-input input[type="number"]::-webkit-outer-spin-button,
.currency-input input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.cash-value-input-group {
    margin-top: 0.85rem;
}
.cash-value-input-group .form-label {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.cash-value-input-group .form-hint {
    display: block;
    margin-top: 0.4rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-style: italic;
}

/* ─── Tap-to-edit pill modal ─── */
/* High z-index so this overlays the #subtasksViewModal it's commonly opened on top of.
   Per CLAUDE.md the hierarchy puts confirm/timer modals at 200000 — we sit at 200001. */
#cashEditPillModal { z-index: 200001 !important; }
#cashEditPillModal .modal-content { z-index: 200001; }
.cash-pill-edit-content {
    max-width: 360px;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.cash-pill-target-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.3rem;
}
.cash-pill-target-name {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 1.25rem;
    color: var(--text-primary);
    word-break: break-word;
}
.cash-pill-big-input {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
.cash-pill-big-symbol {
    font-size: 1.9rem;
    color: #fbbf24;
    font-weight: 800;
    margin-right: 0.4rem;
}
.cash-pill-big-input input {
    background: transparent;
    border: none;
    border-bottom: 2px solid #fbbf24;
    color: var(--text-primary);
    font-size: 2rem;
    font-weight: 700;
    width: 150px;
    text-align: center;
    outline: none;
    padding-bottom: 0.25rem;
    font-family: inherit;
    -moz-appearance: textfield;
}
.cash-pill-big-input input::-webkit-outer-spin-button,
.cash-pill-big-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.cash-pill-hint {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-style: italic;
    margin-bottom: 0.5rem;
}

/* ============================================================================
   Chunk 3 — Cash Rewards page: wallet hero, dual-color bar, mode toggle,
   settings rows, history, lifetime, cashout modal, entry animations.
   ============================================================================ */

/* ─── Wallet hero card ─── */
#cashRewardsPage .cash-wallet-card {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--cash-gold, #fbbf24) 14%, var(--bg-secondary)),
        var(--bg-secondary));
    border: 1px solid color-mix(in srgb, var(--cash-gold, #fbbf24) 30%, var(--border-color));
    border-radius: 18px;
    padding: 1.75rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}
#cashRewardsPage .cash-wallet-card::before {
    content: "";
    position: absolute;
    top: -40px; right: -40px;
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.18), transparent 70%);
    pointer-events: none;
}
#cashRewardsPage .cash-wallet-label {
    color: var(--text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
#cashRewardsPage .cash-wallet-amount {
    font-size: clamp(2.5rem, 6vw, 3.8rem);
    font-weight: 800;
    line-height: 1;
    color: var(--cash-gold, #fbbf24);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    position: relative;
    font-variant-numeric: tabular-nums;
}
#cashRewardsPage .cash-currency {
    font-size: 0.65em;
    color: var(--text-secondary);
    font-weight: 600;
}
#cashRewardsPage .cash-wallet-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 1rem;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
#cashRewardsPage .cash-meta-pct { color: var(--text-muted); font-size: 0.78rem; }

/* ─── Dual-color progress bar (page-level, thicker) ─── */
#cashRewardsPage .cash-dualbar {
    position: relative;
    width: 100%;
    height: 14px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 7px;
    overflow: hidden;
    margin-bottom: 0.85rem;
}
#cashRewardsPage .cash-dualbar-priced {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg, #06b6d4, #0891b2);
    box-shadow: 0 0 6px rgba(6, 182, 212, 0.4);
    z-index: 1;
    transition: width 0.3s ease;
}
#cashRewardsPage .cash-dualbar-earned {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg, var(--cash-success, #10b981), #047857);
    z-index: 2;
    transition: width 0.3s ease;
}
/* Three glow stages — controlled by class added based on earned % */
#cashRewardsPage .cash-dualbar-earned.glow-subtle {
    box-shadow:
        inset 0 0 4px rgba(255, 255, 255, 0.4),
        0 0 4px rgba(16, 185, 129, 0.3);
}
#cashRewardsPage .cash-dualbar-earned.glow-pulse {
    animation: cashGlowPulse 1.6s ease-in-out infinite;
}
#cashRewardsPage .cash-dualbar-earned.glow-bright {
    animation: cashGlowBright 0.9s ease-in-out infinite alternate;
}
@keyframes cashGlowPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(16, 185, 129, 0.5), inset 0 0 4px rgba(255, 255, 255, 0.4); }
    50%      { box-shadow: 0 0 16px rgba(16, 185, 129, 0.95), inset 0 0 6px rgba(255, 255, 255, 0.7); }
}
@keyframes cashGlowBright {
    0%   { box-shadow: 0 0 14px rgba(16, 185, 129, 1), 0 0 28px rgba(16, 185, 129, 0.6); }
    100% { box-shadow: 0 0 22px rgba(16, 185, 129, 1), 0 0 44px rgba(16, 185, 129, 0.85); }
}

/* ─── Legend ─── */
#cashRewardsPage .cash-legend {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0.6rem 0 1rem;
    font-size: 0.72rem;
    color: var(--text-muted);
}
#cashRewardsPage .cash-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
#cashRewardsPage .cash-legend-swatch {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 2px;
}
#cashRewardsPage .cash-legend-earned { background: var(--cash-success, #10b981); box-shadow: 0 0 4px var(--cash-success, #10b981); }
#cashRewardsPage .cash-legend-priced { background: #06b6d4; }
#cashRewardsPage .cash-legend-gap { background: rgba(0,0,0,0.5); border: 1px solid var(--border-color); }

/* Subtask count line — live total of subtasks contributing to the wallet */
#cashRewardsPage .cash-subtask-count {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    margin-bottom: 0.85rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 0.82rem;
    color: var(--text-secondary);
}
#cashRewardsPage .cash-subtask-count .csc-icon { font-size: 1rem; }
#cashRewardsPage .cash-subtask-count strong { color: var(--text-primary); font-weight: 700; }

/* ─── Cashout button ─── */
#cashRewardsPage .cash-cashout-btn {
    width: 100%;
    padding: 0.85rem;
    border-radius: 12px;
    border: none;
    font-weight: 700;
    font-size: 0.98rem;
    cursor: pointer;
    font-family: inherit;
    background: linear-gradient(135deg, var(--cash-success, #10b981), #047857);
    color: white;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
#cashRewardsPage .cash-cashout-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
}
#cashRewardsPage .cash-cashout-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    box-shadow: none;
}

/* ─── Mode toggle ─── */
#cashRewardsPage .cash-section-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}
#cashRewardsPage .cash-section-label {
    color: var(--text-muted);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-bottom: 0.7rem;
}
#cashRewardsPage .cash-mode-toggle {
    display: inline-flex;
    background: var(--bg-tertiary);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
}
#cashRewardsPage .cash-mode-option {
    padding: 0.55rem 1.25rem;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-secondary);
    border: none;
    background: transparent;
    font-family: inherit;
    transition: all 0.15s ease;
}
#cashRewardsPage .cash-mode-option.active {
    background: linear-gradient(135deg, var(--primary-color, #8b5cf6), #6d28d9);
    color: white;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
}
#cashRewardsPage .cash-mode-hint {
    margin-top: 0.7rem;
    color: var(--text-muted);
    font-size: 0.83rem;
    line-height: 1.4;
}

/* ─── Setting rows ─── */
#cashRewardsPage .cash-setting-row {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.15rem;
    margin-bottom: 0.85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
#cashRewardsPage .cash-setting-info {
    flex: 1;
    min-width: 200px;
}
#cashRewardsPage .cash-setting-title {
    font-weight: 700;
    font-size: 0.98rem;
    margin-bottom: 0.2rem;
}
#cashRewardsPage .cash-setting-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.4;
}
#cashRewardsPage .cash-apply-retro-btn {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    color: white;
    border: none;
    padding: 0.6rem 1.1rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.86rem;
    cursor: pointer;
    font-family: inherit;
}
#cashRewardsPage .cash-apply-retro-btn:hover { filter: brightness(1.1); }

/* ─── History list ─── */
#cashRewardsPage .cash-history-list {
    margin-top: 0.5rem;
}
#cashRewardsPage .cash-history-row {
    background: var(--bg-tertiary);
    border-radius: 10px;
    padding: 0.7rem 0.95rem;
    margin-bottom: 0.45rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#cashRewardsPage .cash-history-left { flex: 1; min-width: 0; }
#cashRewardsPage .cash-history-date {
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-weight: 600;
}
#cashRewardsPage .cash-history-note {
    font-size: 0.74rem;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 0.15rem;
}
#cashRewardsPage .cash-history-note-empty { font-style: normal; }
#cashRewardsPage .cash-history-amount {
    color: var(--cash-gold, #fbbf24);
    font-weight: 700;
    font-size: 0.95rem;
    margin-left: 0.5rem;
}
#cashRewardsPage .cash-history-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.88rem;
}
#cashRewardsPage .cash-lifetime {
    text-align: right;
    color: var(--cash-gold, #fbbf24);
    font-weight: 600;
    font-size: 0.88rem;
    margin-top: 0.6rem;
}

/* ─── Entry animations: digit count-up + bar fill + sparkles ─── */
/* Run-once via JS adding .cash-anim-run; replaying triggered by toggling the class. */
@keyframes cashEntryCountIn {
    0%   { opacity: 0; transform: translateY(8px) scale(0.94); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
#cashRewardsPage .entry-cash-count {
    display: inline-block;
}
#cashRewardsPage .entry-cash-count.cash-anim-run {
    animation: cashEntryCountIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes cashEntryBarFill {
    0%   { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}
#cashRewardsPage .entry-cash-bar.cash-anim-run .cash-dualbar-priced,
#cashRewardsPage .entry-cash-bar.cash-anim-run .cash-dualbar-earned {
    animation: cashEntryBarFill 0.55s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Sparkles bursting around the wallet amount on entry */
#cashRewardsPage .cash-sparkle-burst {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
}
#cashRewardsPage .cash-sparkle {
    position: absolute;
    font-size: 0.95rem;
    opacity: 0;
}
#cashRewardsPage .entry-cash-count.cash-anim-run + .cash-sparkle-burst .cash-sparkle {
    animation: cashSparkleFloat 1.1s ease-out both;
}
@keyframes cashSparkleFloat {
    0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
    25%  { opacity: 1; transform: translate(var(--sx, 12px), -16px) scale(1); }
    100% { opacity: 0; transform: translate(var(--sx, 12px), -45px) scale(0.6); }
}
#cashRewardsPage .cash-sparkle.s1 { top: 30%; left: 30%; --sx: -16px; animation-delay: 0.05s; }
#cashRewardsPage .cash-sparkle.s2 { top: 40%; left: 50%; --sx: 8px;   animation-delay: 0.18s; }
#cashRewardsPage .cash-sparkle.s3 { top: 35%; left: 65%; --sx: 18px;  animation-delay: 0.1s; }
#cashRewardsPage .cash-sparkle.s4 { top: 55%; left: 25%; --sx: -8px;  animation-delay: 0.28s; }
#cashRewardsPage .cash-sparkle.s5 { top: 50%; left: 75%; --sx: 14px;  animation-delay: 0.4s; }

/* ─── Cashout modal ─── */
.cashout-modal-content {
    max-width: 420px;
    border: 1px solid rgba(16, 185, 129, 0.35);
}
.cashout-amount-display {
    color: var(--text-secondary);
    font-size: 0.92rem;
    margin-bottom: 0.6rem;
}
.cashout-amount-display strong {
    color: #10b981;
    font-size: 1.45rem;
    font-weight: 800;
    display: inline-block;
    margin-left: 0.4rem;
}
.cashout-msg {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.5;
    margin: 0;
}

/* ─── Mobile tweaks for the Cash Rewards page ─── */
@media (max-width: 640px) {
    #cashRewardsPage .cash-wallet-card { padding: 1.25rem; }
    #cashRewardsPage .cash-wallet-amount { font-size: 2.4rem; }
    #cashRewardsPage .cash-section-card,
    #cashRewardsPage .cash-setting-row { padding: 1rem; }
    #cashRewardsPage .cash-mode-toggle { width: 100%; }
    #cashRewardsPage .cash-mode-option { flex: 1; }
}

/* ============================================================================
   Chunk 4 — Global persistent Cash Rewards progress bar
   Sits fixed under the header nav row (top: 54px), 6px tall, always visible
   when feature is enabled (except on the Cash Rewards page itself).
   ============================================================================ */
.global-cash-bar {
    display: none; /* visible only when body.cash-rewards-enabled */
    position: fixed;
    top: 54px;
    left: 0;
    right: 0;
    height: 6px;
    background: rgba(0, 0, 0, 0.55);
    overflow: hidden;
    cursor: pointer;
    z-index: 99998; /* just below the header (99999) so it tucks underneath cleanly */
    border-bottom: 1px solid var(--border-color);
}
body.cash-rewards-enabled .global-cash-bar {
    display: block;
}
.global-cash-bar .gcb-priced {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg, #06b6d4, #0891b2);
    box-shadow: 0 0 6px rgba(6, 182, 212, 0.4);
    transition: width 0.35s ease;
    z-index: 1;
}
.global-cash-bar .gcb-earned {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg, #10b981, #047857);
    transition: width 0.35s ease;
    z-index: 2;
}
.global-cash-bar .gcb-earned.glow-subtle {
    box-shadow:
        inset 0 0 4px rgba(255, 255, 255, 0.4),
        0 0 4px rgba(16, 185, 129, 0.3);
}
.global-cash-bar .gcb-earned.glow-pulse {
    animation: gcbPulse 1.6s ease-in-out infinite;
}
.global-cash-bar .gcb-earned.glow-bright {
    animation: gcbBright 0.9s ease-in-out infinite alternate;
}
@keyframes gcbPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(16, 185, 129, 0.5), inset 0 0 4px rgba(255, 255, 255, 0.4); }
    50%      { box-shadow: 0 0 16px rgba(16, 185, 129, 0.95), inset 0 0 6px rgba(255, 255, 255, 0.7); }
}
@keyframes gcbBright {
    0%   { box-shadow: 0 0 14px rgba(16, 185, 129, 1), 0 0 28px rgba(16, 185, 129, 0.6); }
    100% { box-shadow: 0 0 22px rgba(16, 185, 129, 1), 0 0 44px rgba(16, 185, 129, 0.85); }
}

/* When the bar is visible, push the page content down 6px so it doesn't get hidden behind it */
body.logged-in.cash-rewards-enabled .main-container { padding-top: 60px; }
body.logged-in.cash-rewards-enabled .header { top: 60px; }

/* Earlier-defined: .group-mode-bar { top: 54px } on mobile — bump by 6px when cash bar visible */
@media (max-width: 768px) {
    body.cash-rewards-enabled .group-mode-bar { top: 60px; }
    body.cash-rewards-enabled .bulk-selection-bar { top: 60px; }
}

/* ============================================================================
   Chunk 5 — Wallet widget + earning animations + celebration
   ============================================================================ */

/* ─── Draggable wallet FAB ─── */
.wallet-fab {
    display: none; /* shown only when feature enabled */
    position: fixed;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fbbf24, #d97706);
    color: #1a1a26;
    place-items: center;
    align-items: center;
    justify-items: center;
    text-align: center;
    font-weight: 800;
    font-size: 0.72rem;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 4px 14px rgba(251, 191, 36, 0.45), 0 0 0 3px var(--bg-primary);
    z-index: 99996;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none; /* let JS handle pan as drag */
    transition: transform 0.15s ease, box-shadow 0.18s ease;
}
body.cash-rewards-enabled .wallet-fab { display: grid; }

/* Position via data-position attribute — snap-to-corner persisted on drop */
.wallet-fab[data-position="bottom-left"]  { left: 14px;  right: auto; bottom: 18px; top: auto; }
.wallet-fab[data-position="bottom-right"] { right: 14px; left: auto;  bottom: 18px; top: auto; }
.wallet-fab[data-position="top-left"]     { left: 14px;  right: auto; top: 70px; bottom: auto; }
.wallet-fab[data-position="top-right"]    { right: 14px; left: auto;  top: 70px; bottom: auto; }

.wallet-fab:hover {
    transform: scale(1.06);
    box-shadow:
        0 6px 20px rgba(251, 191, 36, 0.6),
        0 0 0 3px var(--bg-primary),
        0 0 0 6px rgba(251, 191, 36, 0.25);
}
.wallet-fab:active { cursor: grabbing; }
.wallet-fab.dragging {
    cursor: grabbing;
    transform: scale(1.1);
    box-shadow:
        0 10px 26px rgba(251, 191, 36, 0.7),
        0 0 0 3px var(--bg-primary),
        0 0 0 8px rgba(251, 191, 36, 0.35);
    transition: none;
}

/* Eligible state — pulsing green when wallet >= goal */
.wallet-fab.eligible {
    background: linear-gradient(135deg, #10b981, #047857);
    color: white;
    animation: walletFabPulse 1.4s ease-in-out infinite;
}
@keyframes walletFabPulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4), 0 0 0 3px var(--bg-primary); }
    50%      { box-shadow: 0 6px 24px rgba(16, 185, 129, 0.85), 0 0 0 3px var(--bg-primary); }
}

/* Bounce on earn */
.wallet-fab.cash-fab-bounce {
    animation: walletFabBounce 0.6s ease-out;
}
@keyframes walletFabBounce {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.18); }
    65%  { transform: scale(0.94); }
    85%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}

/* ─── Coin pop chip — floats up from FAB on earn ─── */
.wallet-coin-pop {
    position: fixed;
    background: linear-gradient(135deg, #10b981, #047857);
    color: white;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.5);
    z-index: 99997;
    pointer-events: none;
    opacity: 0;
    transform: translate(0, 0) scale(0.6);
    width: 80px;
    text-align: center;
}
.wallet-coin-pop.cash-coin-anim {
    animation: coinPopFloat 1.6s ease-out forwards;
}
@keyframes coinPopFloat {
    0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
    15%  { opacity: 1; transform: translate(0, -12px) scale(1.15); }
    85%  { opacity: 1; transform: translate(0, -55px) scale(1); }
    100% { opacity: 0; transform: translate(0, -75px) scale(0.85); }
}

/* ─── Celebration overlay with confetti ─── */
.cash-celebration-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000000;
    padding: 1rem;
}
.cash-celebration-confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.cash-confetti-piece {
    position: absolute;
    top: -20px;
    width: 8px;
    height: 14px;
    opacity: 0.9;
    animation: cashConfettiFall 2.5s ease-in forwards;
}
@keyframes cashConfettiFall {
    0%   { transform: translateY(0) rotateZ(0deg); opacity: 1; }
    100% { transform: translateY(110vh) rotateZ(720deg); opacity: 0.4; }
}
.cash-celebration-content {
    background: var(--bg-secondary, #1a1a26);
    border-radius: 18px;
    padding: 2.5rem 2rem;
    max-width: 380px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 80px rgba(16, 185, 129, 0.3);
    position: relative;
    z-index: 2;
    border: 1px solid rgba(16, 185, 129, 0.35);
}
.cash-celebration-emoji {
    font-size: 3.5rem;
    margin-bottom: 0.75rem;
    animation: cashBounce 1.2s ease infinite;
}
@keyframes cashBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}
.cash-celebration-title {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 0.6rem;
    background: linear-gradient(135deg, var(--text-primary, white), #10b981);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.cash-celebration-amount {
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1;
    color: #10b981;
    margin: 0.75rem 0 1.25rem;
    text-shadow: 0 0 30px rgba(16, 185, 129, 0.5);
}
.cash-celebration-amount .cash-currency {
    font-size: 0.55em;
    opacity: 0.7;
    margin-right: 0.2rem;
}
.cash-celebration-msg {
    color: var(--text-secondary, #a0a0b0);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}
.cash-celebration-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.cash-celebration-btn-cashout {
    background: linear-gradient(135deg, #10b981, #047857);
    color: white;
    padding: 0.9rem 1.4rem;
    border-radius: 12px;
    border: none;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.45);
}
.cash-celebration-btn-keep {
    background: transparent;
    color: var(--text-secondary, #a0a0b0);
    padding: 0.7rem 1.2rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.88rem;
}

/* ─── Hard-cap warning modal ─── */
/* Same z-index strategy as the pill-edit modal — must overlay the subtasks modal. */
#cashHardCapModal { z-index: 200001 !important; }
#cashHardCapModal .modal-content { z-index: 200001; }
#cashoutModal { z-index: 200001 !important; }
#cashoutModal .modal-content { z-index: 200001; }
.cash-hardcap-content {
    max-width: 400px;
    border: 1px solid rgba(245, 158, 11, 0.4);
}
.cash-hardcap-warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 10px;
    padding: 0.95rem;
    margin-bottom: 1rem;
}
.cash-hardcap-warning strong {
    color: #f59e0b;
    font-size: 0.95rem;
    display: block;
    margin-bottom: 0.45rem;
}
.cash-hardcap-warning p {
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.5;
    margin: 0;
}
.cash-hardcap-warning p strong {
    color: var(--text-primary);
    font-size: inherit;
    display: inline;
    margin: 0;
}
.cash-hardcap-suggest {
    background: var(--bg-tertiary);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    color: var(--text-secondary);
    font-size: 0.88rem;
    text-align: center;
}
.cash-hardcap-suggest strong {
    color: #fbbf24;
    font-weight: 800;
    font-size: 1.05rem;
}

/* ─── Notes page ─── */
#notesPage .notes-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 0.75rem 0;
    margin-bottom: 0.5rem;
}
.notes-group-tabs {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 0 0.85rem;
    overflow-x: auto;
    /* subtle, always-available horizontal scroll (desktop-resized-to-mobile) */
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 92, 246, 0.45) transparent;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    margin-bottom: 0.75rem;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}
.notes-group-tabs::-webkit-scrollbar { height: 6px; }
.notes-group-tabs::-webkit-scrollbar-track { background: transparent; }
.notes-group-tabs::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.40);
    border-radius: 999px;
}
.notes-group-tabs::-webkit-scrollbar-thumb:hover { background: rgba(139, 92, 246, 0.65); }
.notes-group-tab {
    padding: 0.4rem 0.85rem;
    background: var(--bg-tertiary, #232342);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: 999px;
    font-size: 0.82rem;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-secondary, #a8a8c0);
    transition: background 0.15s, color 0.15s, transform 0.12s, box-shadow 0.15s;
    flex-shrink: 0;
    scroll-snap-align: start;
    -webkit-user-select: none;
    user-select: none;
    touch-action: pan-x;
}
/* reorderable tabs (divs) show the grab affordance; the +New button keeps pointer */
.notes-group-tab[draggable="true"] { cursor: grab; }
.notes-group-tab[draggable="true"]:active { cursor: grabbing; }
.notes-group-tab.tab-dragging {
    opacity: 0.45;
    transform: scale(0.96);
}
.notes-group-tab.tab-drag-over {
    box-shadow: inset 0 0 0 2px var(--primary-color, #8b5cf6);
    transform: translateY(-1px);
}
.notes-group-tab:hover { color: var(--text-primary, #e8e8f0); }
.notes-group-tab.active {
    background: var(--primary-color, #8b5cf6);
    color: white;
    border-color: transparent;
}
.notes-group-tab-count {
    font-size: 0.7rem;
    background: rgba(255, 255, 255, 0.15);
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
}
.notes-group-tab.active .notes-group-tab-count { background: rgba(255, 255, 255, 0.25); }
.notes-group-tab-add {
    border-style: dashed;
    color: var(--text-muted, #6b6b85);
}
.notes-group-tab-add:hover {
    border-style: solid;
    color: var(--text-primary, #e8e8f0);
}

.notes-group-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.85rem;
    background: var(--bg-primary, #0f0f17);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--text-muted, #6b6b85);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.notes-group-context-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notes-group-context-actions {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}
.notes-group-context .context-btn {
    background: transparent;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    color: var(--text-secondary, #a8a8c0);
    font-size: 0.75rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.notes-group-context .context-btn:hover {
    color: var(--text-primary, #e8e8f0);
    border-color: var(--primary-color, #8b5cf6);
}
.notes-group-context .context-btn.danger { color: #ef4444; }
.notes-group-context .context-btn.danger:hover { border-color: #ef4444; }

.notes-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-bottom: 5rem;
}
.notes-list .note-card {
    background: var(--bg-secondary, #1a1a2e);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-left: 4px solid var(--primary-color, #8b5cf6);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    position: relative;
}
.notes-list .note-card:hover {
    border-color: rgba(139, 92, 246, 0.4);
    transform: translateX(2px);
}
.notes-list .note-card-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary, #e8e8f0);
    padding-right: 4rem;
}
.notes-list .note-card-preview {
    color: var(--text-secondary, #a8a8c0);
    font-size: 0.8rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.notes-list .note-card-tag {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    align-self: flex-start;
}
.notes-list .note-card-actions {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    display: flex;
    gap: 0.3rem;
    opacity: 0;
    transition: opacity 0.15s;
}
.notes-list .note-card:hover .note-card-actions { opacity: 1; }
.notes-list .note-action-btn {
    width: 28px;
    height: 28px;
    background: var(--bg-tertiary, #232342);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-secondary, #a8a8c0);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.notes-list .note-action-btn:hover { background: var(--primary-color, #8b5cf6); color: white; }
.notes-list .note-action-btn.danger:hover { background: #ef4444; }
/* Green flash when 📋 copy is tapped — same feedback pattern as task copy pills */
.notes-list .note-action-btn.copied {
    background: #16a34a;
    color: white;
    transform: scale(1.05);
    transition: background 0.15s ease, transform 0.15s ease;
}

.notes-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted, #6b6b85);
}
.notes-empty-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.notes-empty-title {
    font-weight: 600;
    color: var(--text-secondary, #a8a8c0);
    margin-bottom: 0.3rem;
}
.notes-empty-message { font-size: 0.85rem; }

/* ─── Notes editor view ─── */
.note-editor-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    margin-bottom: 0.5rem;
}
.note-editor-back {
    background: var(--bg-tertiary, #232342);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-secondary, #a8a8c0);
    font-size: 1rem;
    flex-shrink: 0;
}
.note-editor-title-stack {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.note-editor-title-input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary, #e8e8f0);
    font-size: 1.1rem;
    font-weight: 600;
    width: 100%;
}
.note-editor-title-input::placeholder {
    color: var(--text-muted, #6b6b85);
    font-weight: 400;
    font-style: italic;
}
.note-editor-title-hint {
    font-size: 0.7rem;
    color: var(--text-muted, #6b6b85);
}
.note-editor-status {
    font-size: 0.7rem;
    color: var(--text-muted, #6b6b85);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
    flex-shrink: 0;
}
.note-editor-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    display: inline-block;
}
.note-editor-status[data-state="saving"]::before { background: #fbbf24; }
.note-editor-status[data-state="editing"]::before { background: #3b82f6; }

.note-editor-toolbar {
    display: flex;
    gap: 0.25rem;
    padding: 0.5rem 0;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    margin-bottom: 0.5rem;
}
.note-editor-toolbar::-webkit-scrollbar { display: none; }
.note-toolbar-btn {
    width: 34px;
    height: 34px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-secondary, #a8a8c0);
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.note-toolbar-btn:hover {
    background: var(--bg-tertiary, #232342);
    color: var(--text-primary, #e8e8f0);
}
.note-toolbar-btn.active {
    background: var(--bg-tertiary, #232342);
    color: var(--primary-color, #8b5cf6);
    border-color: var(--primary-color, #8b5cf6);
}
.note-toolbar-divider {
    width: 1px;
    background: var(--border-color, rgba(255, 255, 255, 0.08));
    margin: 0 0.25rem;
    flex-shrink: 0;
}

.note-editor-meta {
    display: flex;
    gap: 0.5rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    align-items: center;
    margin-bottom: 0.75rem;
}
.note-meta-label {
    font-size: 0.75rem;
    color: var(--text-muted, #6b6b85);
}
.note-meta-select {
    background: var(--bg-tertiary, #232342);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    color: var(--text-primary, #e8e8f0);
    padding: 0.35rem 0.65rem;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
}

.note-editor-content {
    padding: 1rem 0.25rem 4rem;
    outline: none;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-primary, #e8e8f0);
    min-height: 50vh;
}
.note-editor-content[contenteditable]:empty::before {
    content: "Start typing... Use the toolbar or markdown shortcuts (- for bullets, # for headings)";
    color: var(--text-muted, #6b6b85);
}
.note-editor-content h1 { font-size: 1.4rem; margin: 0.6rem 0 0.4rem; font-weight: 700; }
.note-editor-content h2 { font-size: 1.15rem; margin: 0.5rem 0 0.3rem; font-weight: 600; }
.note-editor-content p { margin: 0.4rem 0; }
.note-editor-content ul, .note-editor-content ol { padding-left: 1.5rem; margin: 0.4rem 0; }
.note-editor-content li { margin: 0.2rem 0; }
.note-editor-content ul li::marker { color: var(--primary-color, #8b5cf6); }
.note-editor-content blockquote {
    border-left: 3px solid var(--primary-color, #8b5cf6);
    padding-left: 0.85rem;
    color: var(--text-secondary, #a8a8c0);
    font-style: italic;
    margin: 0.5rem 0;
}
.note-editor-content code {
    background: var(--bg-tertiary, #232342);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--primary-color, #8b5cf6);
}
.note-editor-content strong { color: var(--text-primary, #e8e8f0); }

/* Defend against pasted content carrying inline colors from a different
   theme context (e.g. copying dark text from a light-mode source into a
   dark-mode editor leaves the text invisible). Force inline-colored elements
   to inherit so the editor's --text-primary always wins. */
.note-editor-content [style*="color"],
.note-editor-content font[color] {
    color: inherit !important;
    background-color: transparent !important;
}

@media (max-width: 768px) {
    .notes-group-tab { font-size: 0.78rem; padding: 0.35rem 0.7rem; }
    .notes-group-context { padding: 0.5rem 0.65rem; }
    .notes-group-context .context-btn { padding: 0.3rem 0.45rem; font-size: 0.7rem; }
    .notes-list .note-card-actions { opacity: 1; }
    .note-editor-title-input { font-size: 1rem; }
    .note-toolbar-btn { width: 32px; height: 32px; font-size: 0.85rem; }
}

/* ─── Hybrid mode — notes that mix prose + embedded code/prompts ─── */
/* Cards in a hybrid group + the editor in hybrid mode render with a monospace
   stack and preserved whitespace. Triple-backtick fences get a left-bordered
   chip via <pre class="hybrid-fence"> wrapped at render time in JS. */
.notes-list .note-card.hybrid-note .note-card-preview,
.note-editor-content.hybrid-mode {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.85rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}
.notes-list .note-card.hybrid-note {
    border-left: 3px solid var(--accent-color, var(--primary-color, #8b5cf6));
}
.notes-list .note-card.hybrid-note .note-card-preview {
    /* Hybrid previews can be long — cap height so the card stays scannable */
    max-height: 7.5rem;
    overflow: hidden;
    position: relative;
}

/* Code fences inside hybrid notes — subtle bg tint + left accent. */
.hybrid-fence {
    background: var(--bg-tertiary, #1a1a28);
    border-left: 3px solid var(--accent-color, var(--primary-color, #8b5cf6));
    padding: 0.75rem 1rem;
    margin: 0.75rem 0;
    border-radius: 6px;
    overflow-x: auto;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-primary, #e8e8f0);
}

/* Wrap around each fence so the Copy button can sit top-right inside it. */
.hybrid-fence-wrap {
    position: relative;
    margin: 0.75rem 0;
}
.hybrid-fence-wrap > .hybrid-fence {
    margin: 0;
}
.hybrid-fence-copy {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    z-index: 2;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.35);
    color: var(--text-primary, #e8e8f0);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.25rem 0.55rem;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s ease, background 0.15s ease, transform 0.1s ease;
    font-family: inherit;
    line-height: 1;
}
.hybrid-fence-wrap:hover > .hybrid-fence-copy {
    opacity: 1;
}
.hybrid-fence-copy:hover {
    background: rgba(139, 92, 246, 0.28);
}
.hybrid-fence-copy:active {
    transform: scale(0.96);
}
.hybrid-fence-copy.copied {
    background: rgba(16, 185, 129, 0.25);
    border-color: rgba(16, 185, 129, 0.6);
    color: #10b981;
    opacity: 1;
}
@media (max-width: 768px) {
    /* On mobile (no hover state), copy button is always visible */
    .hybrid-fence-copy { opacity: 1; }
}

.hybrid-fence code {
    background: transparent !important;
    padding: 0 !important;
    color: inherit !important;
    font-family: inherit;
    font-size: inherit;
    white-space: pre;
}
.hybrid-fence[data-lang]::before {
    content: attr(data-lang);
    display: inline-block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #6b6b85);
    margin-bottom: 0.4rem;
}

/* Hybrid group indicator — emoji prefix on group tabs + sidebar entries */
.notes-group-tab.hybrid-group .notes-group-tab-icon {
    /* Tabs already render the group's icon; bump weight + add subtle accent */
    filter: drop-shadow(0 0 2px var(--accent-color, var(--primary-color, #8b5cf6)));
}
.notes-group-tab.hybrid-group {
    border-color: var(--accent-color, var(--primary-color, #8b5cf6));
}

@media (max-width: 768px) {
    .hybrid-fence { padding: 0.6rem 0.75rem; font-size: 0.78rem; }
    .note-editor-content.hybrid-mode { font-size: 0.82rem; }
}

/* ─── List A = inherently critical: red glow + faint background tint ─── */
.primer-card.task-is-critical {
    border: 2px solid #ef4444 !important;
    background: rgba(239, 68, 68, 0.08) !important;
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.45),
                inset 0 0 0 1px rgba(239, 68, 68, 0.2) !important;
}
.primer-card.task-is-critical .primer-card-title {
    color: #b91c1c; /* light theme: dark red, high-contrast on the faint red/yellow tint */
}
[data-theme="dark"] .primer-card.task-is-critical .primer-card-title {
    color: #fecaca; /* dark theme: light pink reads on the dark red-tinted card */
}
.task-priority-locked {
    display: inline-block;
    color: #ef4444;
    font-size: 1rem;
    cursor: default;
    opacity: 0.85;
    padding: 4px;
}

/* ─── Manually-starred priority tasks: gold glow matching the ⭐ star ───
   Scoped :not(.task-is-critical) so List A cards (which carry BOTH
   task-is-priority AND task-is-critical) keep their red critical glow —
   an id/specificity trap otherwise. Mobile drops the outer blur (Pattern #8). */
.primer-card.task-is-priority:not(.task-is-critical) {
    border: 2px solid #fbbf24 !important;
    background: rgba(251, 191, 36, 0.07) !important;
    box-shadow: 0 0 16px rgba(251, 191, 36, 0.42),
                inset 0 0 0 1px rgba(251, 191, 36, 0.22) !important;
}

/* ─── "In Progress" (IP) marker — the task currently being worked on ───
   A circular IP button stacked under the priority star on a vertical rail.
   Distinct BLUE so it never reads as the amber auto sub-task `.primer-tag-ip`
   pill. Single-active: only one card is ever lit. The blue card accent is
   placed AFTER the critical/priority rules so at equal specificity it wins
   source order — an in-progress critical task shows blue (the active signal). */
.task-rail {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.task-inprogress-toggle {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border: 1.5px solid var(--text-tertiary, #9ca3af);
    background: transparent;
    color: var(--text-secondary, #9ca3af);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}
.task-inprogress-toggle .ip-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
}
.task-inprogress-toggle:hover {
    border-color: #fbbf24;
    color: #fbbf24;
    transform: scale(1.12);
}
.task-inprogress-toggle:active { transform: scale(0.9); }

/* Lit "currently working" state — gold to match the lit priority star,
   with dark "IP" text for high contrast on the gold fill. */
.task-inprogress-toggle.active {
    border-color: #fbbf24;
    background: #fbbf24;
    color: #422006;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.75);
    animation: ipPulse 1.8s ease-in-out infinite;
}
.task-inprogress-toggle.active .ip-label { color: #422006; }
@keyframes ipPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(251, 191, 36, 0.6); }
    50%      { box-shadow: 0 0 16px rgba(251, 191, 36, 0.95); }
}

/* In-progress card accent — blue glow */
.primer-card.task-is-inprogress {
    border: 2px solid #3b82f6 !important;
    background: rgba(59, 130, 246, 0.08) !important;
    box-shadow: 0 0 16px rgba(59, 130, 246, 0.45),
                inset 0 0 0 1px rgba(59, 130, 246, 0.25) !important;
}

/* Mobile: drop the outer blur + pulse (high-DPR Android renderer relief, Pattern #8) */
@media (max-width: 768px) {
    .primer-card.task-is-inprogress {
        box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.45) !important;
    }
    .task-inprogress-toggle { width: 24px; height: 24px; }
    .task-inprogress-toggle.active {
        box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.55) !important;
        animation: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .task-inprogress-toggle.active { animation: none; }
}

/* ─── Notes page: Quick-copy points ─── */

.points-mode-bar {
    margin-bottom: 0.75rem;
}

/* PIN-style 3-box quick-letters editor (2026-05-22).
   Each box accepts a single character; focus auto-advances on input,
   backspace on an empty box goes back. */
.quick-letters-edit-boxes {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin: 0.5rem 0 0.25rem;
}
.quick-letters-edit-box {
    width: 60px;
    height: 60px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 1.6rem;
    font-weight: 800;
    text-align: center;
    padding: 0;
    text-transform: uppercase;
    transition: border-color 0.15s ease, background 0.15s ease;
    font-family: inherit;
    -webkit-user-select: all;
    user-select: all;
}
.quick-letters-edit-box:focus {
    outline: none;
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 8%, var(--bg-secondary));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 24%, transparent);
}
.quick-letters-edit-box.filled {
    border-color: var(--primary-color);
}

/* Hide the Create-Group "Quick-Jump Letters" input when the feature is off.
   body.quick-jump-letters-active is toggled by applyFloatingButtonVisibility
   in lockstep with the setting. Reacts in real-time if you flip the toggle
   while the modal is open. 2026-05-22. */
body:not(.quick-jump-letters-active) .form-group-quick-letters {
    display: none;
}

/* ─── Group Quick-Jump letter column (2026-05-22) ───
   Vertical stack of small letter-circles at the far-right edge, occupying
   the same column slot as the ⬆/⬇ jump arrows (which are hidden when this
   feature is active). Tap a circle to scroll to that group + briefly glow
   the target card. */
#quickJumpLettersColumn {
    position: fixed !important;
    right: var(--space-md, 16px);
    /* 2026-05-22: anchor at viewport vertical center + translateY(-50%) so
       as more circles are added the column expands outward in both
       directions from the center — never stuck to the bottom. */
    top: 50%;
    transform: translateY(-50%);
    display: none;
    flex-direction: column;
    gap: 8px;
    /* 2026-05-29: was z-index:60 — group-section cards (their own stacking
       contexts) painted over the LEFT side of the circles. Lift it above page
       content; stays below the header-nav row (99999) + modals (200000). */
    z-index: 99990;
    pointer-events: auto;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    overflow-x: visible;          /* don't clip the hover translateX(-3px) */
    padding: 4px 8px 4px 10px;    /* left room so the hover shift isn't cut */
    scrollbar-width: thin;
}
#quickJumpLettersColumn::-webkit-scrollbar { width: 4px; }
#quickJumpLettersColumn::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
}

.quick-jump-letter-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 800;
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
    font-family: inherit;
    user-select: none;
}
.quick-jump-letter-circle:hover {
    background: var(--primary-color);
    color: white;
    transform: translateX(-3px) scale(1.05);
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.5);
}
.quick-jump-letter-circle:active {
    transform: scale(0.95);
}

/* When the quick-jump column is on, push it visually above the bottom-right
   FAB stack — already handled by bottom: 100px. On smaller screens give it
   slightly more breathing room. */
@media (max-width: 768px) {
    #quickJumpLettersColumn {
        right: 8px;
        /* top: 50% + translateY(-50%) inherited from desktop rule */
    }
    .quick-jump-letter-circle {
        width: 32px;
        height: 32px;
        font-size: 0.58rem;
    }
}

/* ── Glow effect on the destination group card after a quick-jump.
   Applied as .group-quick-jump-glow on the .group-section / .group-item
   element for ~2 seconds, then removed. Pulses a soft accent ring + tints
   the header background briefly. Uses the group's existing --focus-card-accent
   variable when available, falls back to --primary-color. ── */
@keyframes group-quick-jump-pulse {
    0%   { box-shadow: 0 0 0 0 var(--focus-card-accent, var(--primary-color)); }
    60%  { box-shadow: 0 0 0 14px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.group-section.group-quick-jump-glow,
.group-item.group-quick-jump-glow,
.set-aside-section.group-quick-jump-glow {
    animation: group-quick-jump-pulse 2.0s ease-out 1;
    border-radius: 12px;
    transition: background-color 0.3s ease;
}
/* The visible card surface differs between Focus, Lists, and Set Aside —
   target each inner-header pattern so the highlight reaches the
   group name in all cases. 2026-05-22 (+ Set Aside 2026-05-29). */
.group-section.group-quick-jump-glow > .group-section-header,
.group-item.group-quick-jump-glow > .group-header,
.group-item.group-quick-jump-glow,
.set-aside-section.group-quick-jump-glow > .set-aside-section-header,
.set-aside-section.group-quick-jump-glow {
    background: color-mix(in srgb, var(--focus-card-accent, var(--primary-color)) 18%, var(--bg-secondary)) !important;
    box-shadow: 0 0 22px color-mix(in srgb, var(--focus-card-accent, var(--primary-color)) 40%, transparent) !important;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* ─── Step Multi-Select mode toggle + bulk bar (2026-05-22) ─── */
#subtasksViewModal .step-container-mode-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.4rem;
}
#subtasksViewModal .step-mode-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.12s ease;
    font-family: inherit;
}
#subtasksViewModal .step-mode-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--primary-color);
}
#subtasksViewModal .step-mode-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}
#subtasksViewModal .step-select-check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin-right: 4px;
}
#subtasksViewModal .step-row.selected {
    background: color-mix(in srgb, var(--primary-color) 14%, var(--bg-secondary));
    border-left-color: var(--primary-color);
}

/* Bulk bar shared with notes/points — already styled via .bulk-action-bar.
   Just need a small visual lift for the steps bar so it doesn't collide
   with the existing pointsBulkBar at the bottom. */
#stepsBulkBar {
    bottom: 5rem;
}

/* ─── Notes page: Multi-Select + Reorder modes (regular/hybrid groups, 2026-05-22) ─── */
.notes-mode-bar {
    margin-bottom: 0.75rem;
}

/* When in reorder mode, give every note card a grab cursor + relative positioning
   so the drag handle can absolute-anchor in the corner without disturbing the
   existing card layout. */
.notes-list .note-card.draggable {
    cursor: grab;
    position: relative;
    user-select: none;
}
.notes-list .note-card.draggable:active { cursor: grabbing; }

.note-drag-handle {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: grab;
    user-select: none;
    padding: 0 4px;
    z-index: 2;
}

/* Checkbox in multi-select mode — positioned top-left so it doesn't shift the
   existing title/preview/tag layout. */
.note-select-check {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    width: 1.15rem;
    height: 1.15rem;
    cursor: pointer;
    z-index: 2;
}

/* When either mode is active, nudge the title/preview right so it doesn't
   collide with the handle/checkbox. */
.notes-list .note-card.draggable .note-card-title,
.notes-list .note-card:has(.note-select-check) .note-card-title {
    padding-left: 1.6rem;
}

/* Selected card visual — accent border on the left, subtle tinted background.
   Matches the .selected pattern used elsewhere in the app. */
.notes-list .note-card.selected {
    background: color-mix(in srgb, var(--primary-color) 12%, var(--bg-secondary));
    border-left: 3px solid var(--primary-color);
}

.point-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    background: var(--bg-secondary);
    border-left: 3px solid var(--primary-color);
    border-radius: 6px;
    margin-bottom: 0.4rem;
    transition: background 0.15s ease, transform 0.15s ease;
}
.point-card:hover { background: var(--bg-tertiary); }
.point-card.is-reorder { cursor: grab; }
.point-card.is-reorder .point-text { user-select: none; }

.point-drag-handle {
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: grab;
    user-select: none;
    padding: 0 4px;
}

.point-select-check {
    width: 1.1rem;
    height: 1.1rem;
    cursor: pointer;
    flex: 0 0 auto;
}

.point-copy-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.3rem 0.55rem;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    flex: 0 0 auto;
    position: relative;
    min-width: 2.4rem;
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.point-copy-btn:hover { background: var(--bg-tertiary); border-color: var(--primary-color); }
.point-copy-btn .point-copy-flash {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: #16a34a;
    color: white;
    border-radius: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0 4px;
}
.point-copy-btn.copied .point-copy-icon { visibility: hidden; }
.point-copy-btn.copied .point-copy-flash { display: flex; }

.point-text {
    flex: 1 1 auto;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.9rem;
    line-height: 1.4;
}

.point-menu-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.3rem;
    padding: 0 0.4rem;
    line-height: 1;
    flex: 0 0 auto;
}
.point-menu-btn:hover { color: var(--primary-color); }

@media (max-width: 768px) {
    .point-card {
        padding: 0.55rem 0.6rem;
        gap: 0.45rem;
    }
    .point-text { font-size: 0.95rem; }
    .point-copy-btn { padding: 0.4rem 0.6rem; }
}

/* ─── Mass redistribute: bottom-up entrance animation on Focus page ─── */
.primer-card.task-entering {
    opacity: 0;
    transform: translateY(28px);
}
.primer-card.task-entered {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

/* ─── Primer Bulk Actions modal — Memorigi-themed override ─── */
/* The shared `.confirm-content` shell uses `--warning-color` (orange) for the
   border + title — that's right for a "destructive confirm" but wrong for a
   neutral action modal. Override for this modal only: cleaner dark card with
   a purple primary-color left-accent matching the rest of the app's cards. */
#primerBulkActionsModal .confirm-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-left: 4px solid var(--primary-color);
    text-align: left;
    padding: 1.5rem 1.5rem 1.25rem;
    max-width: 380px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
#primerBulkActionsModal .confirm-title {
    color: var(--text-primary);
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
    text-align: left;
}
#primerBulkActionsModal .confirm-message {
    color: var(--text-secondary);
    text-align: left;
    margin-bottom: 0.5rem;
    font-size: 0.92rem;
}
#primerBulkActionsModal .confirm-actions {
    margin-top: 0.5rem;
    justify-content: center;
}
#primerBulkActionsModal .btn {
    border-radius: 10px;
    padding: 0.7rem 1rem;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid transparent;
    transition: transform 0.12s ease, background 0.18s ease, border-color 0.18s ease;
    cursor: pointer;
}
#primerBulkActionsModal .btn:hover { transform: translateY(-1px); }
#primerBulkActionsModal .btn-primary {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35);
}
#primerBulkActionsModal .btn-primary:hover {
    background: var(--primary-hover, #7c3aed);
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.5);
}
#primerBulkActionsModal .btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color, rgba(255, 255, 255, 0.08));
}
#primerBulkActionsModal .btn-secondary:hover {
    background: var(--bg-primary);
    border-color: var(--primary-color);
}
/* Cancel-row Cancel button is the single action — render it as a plain text
   link, not a button block. Less visual weight than the two main actions. */
#primerBulkActionsModal .confirm-actions .btn-secondary {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 0.55rem 1rem;
    font-weight: 500;
    font-size: 0.85rem;
}
#primerBulkActionsModal .confirm-actions .btn-secondary:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
    transform: none;
}
@media (max-width: 768px) {
    #primerBulkActionsModal .confirm-content {
        padding: 1.25rem 1.1rem 1rem;
        max-width: calc(100vw - 32px);
    }
    #primerBulkActionsModal .btn { padding: 0.65rem 0.9rem; font-size: 0.88rem; }
}

/* ─── Holding-tab picker — Memorigi treatment ─── */
/* Both `showHoldingTabPicker(taskId)` (single-task right-click flow) and
   `showBulkHoldingTabPicker(taskIds)` (bulk-action flow) build their picker
   via inline styles with `class="holding-tab-picker"`. Inline styles already
   use the dark CSS variables; this block adds the Memorigi accents
   (purple left-border, hover lift, Cancel-as-text-link) to match the
   #primerBulkActionsModal styling. !important is required to win against
   inline styles. */
.holding-tab-picker > div {
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
    border-left: 4px solid var(--primary-color) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
    text-align: left !important;
}
.holding-tab-picker > div > h3 {
    color: var(--text-primary) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.85rem !important;
}
/* Tab option buttons — direct children of the inner `div` container.
   Visible state stays dark; hover lifts + glows in primary purple. */
.holding-tab-picker > div > div > button {
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease !important;
    cursor: pointer;
}
.holding-tab-picker > div > div > button:hover {
    background: var(--primary-color) !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35);
}
.holding-tab-picker > div > div > button:hover span {
    color: rgba(255, 255, 255, 0.85) !important;
}
/* Cancel button — direct child of the card (not inside the buttons container).
   Reduced visual weight: transparent background, subtle text-link feel. */
.holding-tab-picker > div > button {
    background: transparent !important;
    border: none !important;
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
    transition: all 0.15s ease;
    cursor: pointer;
}
.holding-tab-picker > div > button:hover {
    color: var(--text-primary) !important;
    background: var(--bg-tertiary) !important;
}
@media (max-width: 768px) {
    .holding-tab-picker > div {
        max-width: calc(100vw - 32px) !important;
    }
}

/* ═════════════════════════════════════════════════════════════════════
   Native-feel tap interactions (2026-05-12)
   ─────────────────────────────────────────────────────────────────────
   1. :active scale-press — every interactive element compresses 4% on
      press, lifts back on release. Mimics iOS button-tap pressure.
   2. Material ripple — radial expansion from tap point. Element injected
      by JS in app.js pointerdown delegated handler. Container gets
      .lam-ripple-host class that ensures position+overflow.
   Honors prefers-reduced-motion.
   ═════════════════════════════════════════════════════════════════════ */

/* Scale-press effect on tap */
.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-info,
.nav-btn, .header-nav-icon, .sidebar-nav-item,
.group-mode-btn, .primer-action-btn,
.floating-action-primary, .floating-action-secondary,
.floating-action-tertiary, .floating-action-quaternary,
.fab, #floatingBulkButton,
.primer-card-check, .subtask-checkbox,
.primer-tag-complete, .primer-tag-copy {
    transition: transform 0.08s ease-out, background-color 0.15s ease, opacity 0.15s ease;
}

.btn:active, .btn-primary:active, .btn-secondary:active, .btn-danger:active, .btn-info:active,
.nav-btn:active, .header-nav-icon:active, .sidebar-nav-item:active,
.group-mode-btn:active, .primer-action-btn:active,
.floating-action-primary:active, .floating-action-secondary:active,
.floating-action-tertiary:active, .floating-action-quaternary:active,
.fab:active, #floatingBulkButton:active,
.primer-card-check:active, .subtask-checkbox:active,
.primer-tag-complete:active, .primer-tag-copy:active {
    transform: scale(0.96);
}

/* Material ripple */
.lam-ripple {
    position: absolute;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.22;
    pointer-events: none;
    transform: scale(0);
    animation: lam-ripple-expand 550ms ease-out forwards;
    z-index: 0;
}
.lam-ripple-host {
    position: relative;
    overflow: hidden;
}

@keyframes lam-ripple-expand {
    to {
        transform: scale(1);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn:active, .btn-primary:active, .btn-secondary:active, .btn-danger:active, .btn-info:active,
    .nav-btn:active, .header-nav-icon:active, .sidebar-nav-item:active,
    .group-mode-btn:active, .primer-action-btn:active,
    .floating-action-primary:active, .floating-action-secondary:active,
    .floating-action-tertiary:active, .floating-action-quaternary:active,
    .fab:active, #floatingBulkButton:active,
    .primer-card-check:active, .subtask-checkbox:active,
    .primer-tag-complete:active, .primer-tag-copy:active {
        transform: none;
    }
    .lam-ripple { display: none; }
}

/* ═════════════════════════════════════════════════════════════════════
   Page transitions (2026-05-12)
   ─────────────────────────────────────────────────────────────────────
   Native-feel slide-in when navigating to a new page. The .page-entering
   class is added by showPage() and removed 240ms later. GPU-accelerated
   transform + opacity. Honors prefers-reduced-motion.
   ═════════════════════════════════════════════════════════════════════ */

.page.page-entering {
    animation: page-slide-in 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform, opacity;
}

@keyframes page-slide-in {
    from {
        opacity: 0;
        transform: translateX(24px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .page.page-entering {
        animation: none;
    }
}

/* ═════════════════════════════════════════════════════════════════════
   Mobile GPU memory relief (2026-05-13)
   ─────────────────────────────────────────────────────────────────────
   On high-DPR Android (DPR 2.8+, common on phones <6") with older Chrome,
   the combination of:
     - .task-is-critical → 2 box-shadows (outer red glow + inset)
     - .primer-card.selected → 2 box-shadows + scale(1.02) + linear-gradient
     - .selection-indicator → 1 box-shadow
     - ::after checkmark → 1 box-shadow + animation
   blows GPU compositor budget when multiple priority cards are selected
   simultaneously, killing the renderer ("Aw Snap"). On a 2.8 DPR screen
   each blurred shadow costs ~8× its declared pixel area in compositor
   memory. We strip the most expensive effects below 768px.
   ═════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Critical tasks: keep the red border + tint, drop the outer blur. */
    .primer-card.task-is-critical {
        box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.35) !important;
    }

    /* Priority (gold-star) tasks: keep the gold border + tint, drop the blur. */
    .primer-card.task-is-priority:not(.task-is-critical) {
        box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.4) !important;
    }

    /* Selected state: keep the colored border, drop the scale-up + the
       glow shadows. transform: scale promotes to a separate GPU layer
       which on Android 10 / Chrome 147 stacks compositor allocations
       per selected card. */
    .primer-card.selected,
    .primer-task-item.selected {
        box-shadow: none !important;
        transform: none !important;
        /* Solid color instead of gradient — gradients require shader compilation */
        background: rgba(var(--primary-rgb), 0.18) !important;
    }
    .primer-card.selected:hover,
    .primer-task-item.selected:hover {
        box-shadow: none !important;
        transform: none !important;
        background: rgba(var(--primary-rgb), 0.22) !important;
    }

    /* Selection-mode checkmark: drop the bouncing animation + shadow,
       use a flat colored circle */
    .primer-task-item.selected::after,
    .primer-card.selected::after {
        animation: none !important;
        box-shadow: none !important;
    }

    /* Indicator pill: smaller shadow */
    .selection-indicator {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
    }
}

/* ═════════════════════════════════════════════════════════════════════
   Skeleton loaders (2026-05-12)
   ─────────────────────────────────────────────────────────────────────
   Native pattern — show shimmering placeholders instead of a blank page
   while data loads. Removed the moment real content lands in the
   container. Injected by injectSkeletonIfEmpty() in app.js.
   ═════════════════════════════════════════════════════════════════════ */

.skeleton-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    border-left: 3px solid var(--bg-tertiary);
}

.skeleton-line {
    height: 14px;
    background: linear-gradient(
        90deg,
        var(--bg-tertiary) 0%,
        rgba(255, 255, 255, 0.06) 50%,
        var(--bg-tertiary) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 4px;
    margin-bottom: 8px;
}

.skeleton-line-title { width: 70%; height: 16px; }
.skeleton-line-meta  { width: 35%; height: 11px; margin-bottom: 0; }

@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton-line { animation: none; opacity: 0.6; }
}

/* ════════════════════════════════════════════════════════════════════════
   FOCUS PAGE GROUP CARD REDESIGN  (2026-05-13)
   Two-row layout: icon + name on top (gets the full row to itself, no
   awkward wrap for short names), count pill + checkbox + chevron on
   the bottom. Each card grows a 4px accent strip on the left, colour
   chosen by a stable hash of group.id from a small palette of theme
   variables — so groups are visually differentiable at a glance.

   Scope: only applies when .focus-group-card is added to .group-section
   (currently only on Focus). Morning and Lists keep their old look until
   we expand the redesign.
   ════════════════════════════════════════════════════════════════════════ */
.focus-group-card { position: relative; overflow: hidden; }
.focus-group-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--focus-card-accent, var(--accent-color));
    pointer-events: none;
    z-index: 1;
}
/* 2026-05-22: Focus group cards collapsed to single row — icon + name on
   the left, checkbox + chevron on the right. Drops the secondary row that
   used to hold the (now-removed) priority pill. Vertical space per card
   shrinks from ~80px to ~50px. */
.focus-group-card > .group-section-header {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 10px 18px;
    background: var(--bg-secondary);
}
.focus-group-card .fgc-top {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}
.focus-group-card .fgc-inline-count {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.85em;
    margin-left: 4px;
}
.focus-group-card .fgc-icon-wrap {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--focus-card-accent, var(--accent-color)) 18%, transparent);
    color: var(--focus-card-accent, var(--accent-color));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.focus-group-card .fgc-name {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.25;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.focus-group-card .fgc-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-left: 42px;
}
.focus-group-card .fgc-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
    min-width: 0;
}
.focus-group-card .fgc-count-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--focus-card-accent, var(--accent-color)) 18%, transparent);
    color: var(--focus-card-accent, var(--accent-color));
    font-weight: 700;
    font-size: 0.74rem;
}
.focus-group-card .fgc-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    color: var(--text-muted);
}
/* Restore the chevron rotation behaviour for the new layout */
.focus-group-card.collapsed .group-section-chevron,
.focus-group-card .group-section.collapsed .group-section-chevron {
    transform: rotate(-90deg);
}

/* ════════════════════════════════════════════════════════════════════════
   BULK SELECTION TOP BAR  (2026-05-13)
   Replaces the bottom-right floating `#floatingBulkButton` when the user
   has multi-selected tasks/groups. Top-anchored, always visible regardless
   of scroll, doesn't compete with the bottom FAB stack. Pattern from
   Gmail / Google Photos.
   ════════════════════════════════════════════════════════════════════════ */
.bulk-selection-bar {
    display: none;
    position: fixed;
    /* Sits directly below the .header-nav-icons (54px from top, see above) */
    top: 54px;
    left: 0;
    right: 0;
    background: var(--accent-color);
    color: white;
    padding: 12px 14px;
    gap: 10px;
    align-items: center;
    z-index: var(--z-selection-mode);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    animation: bulkBarSlideIn 0.22s ease-out;
}
@keyframes bulkBarSlideIn {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.bulk-selection-bar.active {
    display: flex;
}
.bulk-selection-bar .bsb-cancel {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.4rem;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bulk-selection-bar .bsb-cancel:active {
    background: rgba(255, 255, 255, 0.2);
}
.bulk-selection-bar .bsb-count {
    flex: 1;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
}
.bulk-selection-bar .bsb-actions-btn {
    background: rgba(255, 255, 255, 0.18);
    border: none;
    color: white;
    padding: 7px 14px;
    border-radius: 18px;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.bulk-selection-bar .bsb-actions-btn:active {
    background: rgba(255, 255, 255, 0.28);
    transform: scale(0.97);
}

/* When the top bar is active, hide the bottom-right floating bulk FAB
   so the user has one source of truth for the count + actions. */
body.bulk-selection-bar-active #floatingBulkButton {
    display: none !important;
}
/* When the bar is active, push the page-header + content down so they
   don't sit behind it. */
body.bulk-selection-bar-active .header {
    top: calc(54px + 56px); /* nav row + bulk bar height */
}
body.bulk-selection-bar-active .main-container {
    padding-top: calc(54px + 56px);
}


/* --- Reorder Tasks mode (Focus only) --- */
body.task-reorder-mode-active #focusTasksContainer .primer-card-check,
body.task-reorder-mode-active #focusTasksContainer .primer-tag-complete,
body.task-reorder-mode-active #focusTasksContainer .primer-tag-copy,
body.task-reorder-mode-active #focusTasksContainer .primer-tag-info,
body.task-reorder-mode-active #focusTasksContainer .priority-toggle,
body.task-reorder-mode-active #focusTasksContainer .task-priority-locked,
body.task-reorder-mode-active #focusTasksContainer .primer-card button {
    pointer-events: none !important;
    opacity: 0.6;
}

body.task-reorder-mode-active #focusTasksContainer .primer-card {
    cursor: grab;
    position: relative;
}
body.task-reorder-mode-active #focusTasksContainer .primer-card::before {
    content: '\22EE\22EE';
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-color);
    font-size: 14px;
    letter-spacing: -2px;
    opacity: 0.85;
    pointer-events: none;
}
body.task-reorder-mode-active #focusTasksContainer .primer-card.dragging {
    cursor: grabbing;
    opacity: 0.6;
}
/* ─── Set Aside page ────────────────────────────────────────────────────────
   Repeatable tasks parked indefinitely. Mirrors the primer-card visual
   language so cards feel at home, with a slightly cooler-blue accent
   strip on each section so the page reads as a distinct view.
*/
#setAsidePage .page-content {
    padding: 0.75rem 0.5rem 4rem;
    max-width: 980px;
    margin: 0 auto;
}

#setAsidePage .set-aside-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}
#setAsidePage .set-aside-count {
    font-weight: 600;
    letter-spacing: 0.01em;
}

#setAsidePage .set-aside-section {
    background: var(--bg-secondary);
    border-radius: 12px;
    margin-bottom: 0.85rem;
    border-left: 4px solid #60a5fa; /* cool blue accent — distinct from primer */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}
#setAsidePage .set-aside-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.85rem;
    background: linear-gradient(180deg, rgba(96, 165, 250, 0.08), transparent);
    border-bottom: 1px solid var(--border-color);
    gap: 0.5rem;
}
#setAsidePage .set-aside-section-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.92rem;
    min-width: 0;
}
#setAsidePage .set-aside-section-group {
    color: var(--text-secondary);
    font-weight: 500;
}
#setAsidePage .set-aside-section-sep {
    color: var(--text-tertiary, var(--text-secondary));
    opacity: 0.6;
    padding: 0 0.15rem;
}
#setAsidePage .set-aside-section-list {
    color: var(--text-primary);
}
#setAsidePage .set-aside-section-count {
    background: rgba(96, 165, 250, 0.18);
    color: #60a5fa;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    flex-shrink: 0;
}
#setAsidePage .set-aside-section-content {
    padding: 0.5rem 0.75rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

/* Cards inside Set Aside — keep the primer-card chrome but pacify the
   border colour so the section accent stripe wins as the dominant signal. */
#setAsidePage .primer-card.set-aside-card {
    background: var(--bg-tertiary, var(--bg-primary));
}
#setAsidePage .primer-card.set-aside-card .primer-card-title {
    color: var(--text-primary);
}

/* Restore action button — turquoise-leaning so it reads as "return" not
   "redistribute" (which uses the regular accent on Primer). */
#setAsidePage .primer-action-btn.primer-action-restore {
    color: #34d399;
}
#setAsidePage .primer-action-btn.primer-action-restore:hover,
#setAsidePage .primer-action-btn.primer-action-restore:active {
    background: rgba(52, 211, 153, 0.14);
    color: #10b981;
}

/* Empty state — bigger, centred, friendly. */
#setAsidePage .empty-state {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--text-secondary);
}
#setAsidePage .empty-state-icon {
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 0.75rem;
}
#setAsidePage .empty-state-title {
    font-size: 1.1rem;
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 0.4rem;
}
#setAsidePage .empty-state-message {
    font-size: 0.92rem;
    line-height: 1.5;
    max-width: 28rem;
    margin: 0 auto;
}

/* Header-icon badge follows the existing .header-nav-badge style — colour-shifted
   so it doesn't compete with Morning (orange) / Focus (cyan) / Primer (yellow). */
#headerNavSetAside .header-nav-badge {
    background: #60a5fa;
    color: #0f172a;
}

/* Mobile tweaks — same compaction pattern as other pages. */
@media (max-width: 768px) {
    #setAsidePage .page-content {
        padding: 0.5rem 0.4rem 5rem;
    }
    #setAsidePage .set-aside-section {
        border-radius: 10px;
        margin-bottom: 0.65rem;
    }
    #setAsidePage .set-aside-section-header {
        padding: 0.55rem 0.65rem;
    }
    #setAsidePage .set-aside-section-title {
        font-size: 0.86rem;
    }
    #setAsidePage .set-aside-section-content {
        padding: 0.4rem 0.55rem 0.6rem;
    }
}

/* ───────────────────────────────────────────────────────────────── */
/* Dreams page — multi-photo card layout (2026-05-17)                 */
/* Hero + thumbnail strip. Orientation-aware (.card-portrait swaps    */
/* to a right-strip layout; .card-landscape uses a bottom strip).     */
/* Class is applied by applyDreamCardOrientations() in app.js after   */
/* checking each card's hero image natural dimensions.                 */
/* ───────────────────────────────────────────────────────────────── */

.dream-card .dream-photo-area {
    position: relative;
    background: var(--bg-secondary, #1a1a26);
}

.dream-card .dream-photo-area.no-photo {
    aspect-ratio: 16/10;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ─── Hero photo painting ─── */
/* The 2026-05-17 redesign moved the --photo CSS variable directly onto
   .dream-hero (was on an inner .hero-photo div in the 2026-05-04 version).
   These rules paint the photo via the layered backdrop + foreground
   pattern: ::before is the blurred backdrop (cover, scale 1.15, blur 20px)
   that fills any letterbox area; ::after stacks the dark legibility gradient
   on TOP of the sharp contained foreground photo. The #dreamsPage prefix
   bumps specificity past `#dreamsPage .dream-hero::after` from the legacy
   un-tracked dreams-page.css (which used the `background` shorthand to set
   just a gradient and was wiping our photo). !important on the background
   props belt-and-suspenders the override. */

#dreamsPage .dream-card .dream-hero {
    position: relative;
    overflow: hidden;
    background-color: #1a1a26;
    cursor: pointer;
}

#dreamsPage .dream-card .dream-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--photo);
    background-size: cover;
    background-position: center;
    transform: scale(1.15);
    filter: blur(20px) brightness(0.55) saturate(1.1);
    z-index: 0;
}

#dreamsPage .dream-card .dream-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Stack: gradient overlay (front, for title legibility) + photo (back) */
    background-image:
        linear-gradient(rgba(15,15,23,0) 35%, rgba(15,15,23,0.85) 100%),
        var(--photo) !important;
    background-size: auto, contain !important;
    background-position: center, center !important;
    background-repeat: no-repeat, no-repeat !important;
    z-index: 1;
}

#dreamsPage .dream-card .dream-hero.no-photo,
#dreamsPage .dream-card .dream-hero.no-photo::before,
#dreamsPage .dream-card .dream-hero.no-photo::after {
    background-image: none !important;
    filter: none;
    transform: none;
}

#dreamsPage .dream-card .dream-hero.no-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent, #8b5cf6) 40%, #1a1a26), #1a1a26) !important;
}

/* Photo count badge — appears top-left when multi-photo */
.dream-card .photo-count-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: white;
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 3;
    pointer-events: none;
}

/* ─── Landscape hero: bottom strip ─── */

.dream-card.card-landscape .dream-hero {
    width: 100%;
    aspect-ratio: 16/10;
}

.dream-card.card-landscape .dream-thumbs-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--bg-card, #1e1e2a);
}

.dream-card.card-landscape .dream-thumb,
.dream-card.card-landscape .dream-thumbs-strip .empty-slot {
    aspect-ratio: 1/1;
    width: 100%;
}

/* ─── Portrait hero: right strip ─── */

.dream-card.card-portrait .dream-photo-area {
    display: grid;
    grid-template-columns: 1fr 90px;
    gap: 2px;
    align-items: start;
}

.dream-card.card-portrait .dream-hero {
    width: 100%;
    aspect-ratio: 4/5;
}

.dream-card.card-portrait .dream-thumbs-strip {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-self: start;
}

.dream-card.card-portrait .dream-thumb,
.dream-card.card-portrait .dream-thumbs-strip .empty-slot {
    width: 90px;
    height: 90px;
    flex: 0 0 auto;
}

/* ─── Thumbnail base ─── */
/* Uses the same layered backdrop + foreground pattern as .dream-hero so
   images render without cropping (contain) on top of a blurred copy of
   themselves (cover, blurred, dimmed). Result: photos always visible in
   full, no awkward cropping, no flat empty bars. */

#dreamsPage .dream-thumb {
    position: relative;
    background-color: #1a1a26;
    cursor: pointer;
    overflow: hidden;
    transition: filter 0.15s ease;
}

#dreamsPage .dream-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--photo) !important;
    background-size: cover !important;
    background-position: center !important;
    transform: scale(1.15);
    filter: blur(8px) brightness(0.5) saturate(1.1);
    z-index: 0;
}

#dreamsPage .dream-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--photo) !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    z-index: 1;
}

#dreamsPage .dream-thumb:hover {
    filter: brightness(1.1);
}

/* +N overlay on the last visible thumbnail when more photos are hidden.
   z-index above both pseudo-elements. */
.dream-thumb-more {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.3rem;
    font-weight: 700;
    z-index: 3;
    pointer-events: none;
}

/* Empty slot placeholder — subtle dotted pattern */
.dream-thumbs-strip .empty-slot {
    background: rgba(255,255,255,0.025);
    background-image:
        linear-gradient(45deg, rgba(255,255,255,0.015) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.015) 75%),
        linear-gradient(45deg, rgba(255,255,255,0.015) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.015) 75%);
    background-size: 12px 12px;
    background-position: 0 0, 6px 6px;
    pointer-events: none;
}

/* Mobile: shrink the portrait strip a touch */
@media (max-width: 480px) {
    .dream-card.card-portrait .dream-photo-area {
        grid-template-columns: 1fr 72px;
    }
    .dream-card.card-portrait .dream-thumb,
    .dream-card.card-portrait .dream-thumbs-strip .empty-slot {
        width: 72px;
        height: 72px;
    }
}

/* 2026-06-07 — Mobile: immersive, image-first Dreams. Each hero fills most of
   the viewport so you simply scroll up/down through the photos, and the photo
   is shown COVER (edge-to-edge fill) instead of contained — tap the image to
   open the full, uncropped version in the lightbox. Labels are de-emphasised so
   the photos are the focus. (Dream-card CSS must live here in styles.css, not
   the un-tracked dreams-page.css — Open Watchlist #6.) */
@media (max-width: 768px) {
    /* Drop the portrait side-by-side grid so the hero is always full width. */
    .dream-card.card-portrait .dream-photo-area {
        display: block;
        grid-template-columns: none;
    }
    /* Hero fills the screen on both layouts (and the no-photo fallback). */
    .dream-card.card-landscape .dream-hero,
    .dream-card.card-portrait .dream-hero,
    #dreamsPage .dream-card .dream-hero.no-photo,
    .dream-card .dream-photo-area.no-photo {
        aspect-ratio: auto;
        width: 100%;
        height: 78vh;
        min-height: 440px;
    }
    /* Fill edge-to-edge (cover) instead of letterboxed (contain). Keeps the
       legibility gradient (auto) and the blurred backdrop underneath. */
    #dreamsPage .dream-card .dream-hero::after {
        background-size: auto, cover !important;
    }
    /* Thumbnails: slim full-width row beneath the hero on both layouts. */
    .dream-card.card-portrait .dream-thumbs-strip {
        flex-direction: row;
    }
    .dream-card.card-landscape .dream-thumbs-strip,
    .dream-card.card-portrait .dream-thumbs-strip {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2px;
    }
    .dream-card.card-landscape .dream-thumb,
    .dream-card.card-landscape .dream-thumbs-strip .empty-slot,
    .dream-card.card-portrait .dream-thumb,
    .dream-card.card-portrait .dream-thumbs-strip .empty-slot {
        width: 100%;
        height: 52px;
        aspect-ratio: auto;
    }
    /* Subtle labels — let the image dominate. Title small + dim, the redundant
       description hidden, the Due ribbon + photo-count kept quiet. */
    #dreamsPage .dream-body { padding: 8px 12px 12px; }
    #dreamsPage .dream-name { font-size: 0.95rem; font-weight: 600; opacity: 0.9; }
    #dreamsPage .dream-desc { display: none; }
    #dreamsPage .dream-card .dream-hero .year-ribbon {
        bottom: 10px;
        left: 10px;
        opacity: 0.85;
    }
    #dreamsPage .dream-card .photo-count-badge { opacity: 0.85; }
}

/* ─── Edit Dream modal: hero picker UI ─── */
/* Each .current-photo-item gets a gold border + ⭐ HERO badge when it's */
/* the chosen hero (index 0). Non-hero items get a ⭐ Set as Hero button */
/* that appears on hover (always visible on touch devices).             */

.current-photo-item {
    position: relative;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.current-photo-item.is-hero {
    border-color: #fbbf24;
    box-shadow: 0 0 0 2px rgba(251,191,36,0.25);
}

.current-photo-item .hero-badge-on-thumb {
    position: absolute;
    top: 6px;
    left: 6px;
    background: #fbbf24;
    color: #1a1a26;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 5px;
    letter-spacing: 0.3px;
    z-index: 3;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 3px;
}

.current-photo-item .set-hero-btn {
    position: absolute;
    bottom: 6px;
    left: 6px;
    right: 6px;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: white;
    border: 1px solid rgba(255,255,255,0.2);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 5px 8px;
    border-radius: 6px;
    cursor: pointer;
    /* 2026-05-29 — Always visible (was opacity:0, hover-only on desktop, which
       made setting the hero hard to discover). Now shown on every photo at all
       times so the user can see exactly which tile becomes the hero. */
    opacity: 0.92;
    transition: opacity 0.15s ease, background 0.15s ease;
    z-index: 3;
    font-family: inherit;
}

.current-photo-item:hover .set-hero-btn { opacity: 1; background: rgba(139,92,246,0.9); }
.current-photo-item.is-hero .set-hero-btn { display: none; }

.hero-picker-hint {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted, #6e6e80);
    font-weight: 400;
    margin-top: 4px;
}

/* ─── Missing photo indicator in the Edit modal picker ─── */
/* Triggered by the <img>'s onerror handler when the file is 404'd.
   Helps users spot orphaned DB references they need to delete. */

.current-photo-item.photo-missing {
    background: repeating-linear-gradient(
        45deg,
        rgba(239,68,68,0.18) 0,
        rgba(239,68,68,0.18) 8px,
        rgba(239,68,68,0.32) 8px,
        rgba(239,68,68,0.32) 16px
    );
    border-color: rgba(239,68,68,0.7);
}

.current-photo-item.photo-missing img {
    opacity: 0;
}

.current-photo-item.photo-missing::before {
    content: '⚠ MISSING — click × to remove';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(239,68,68,0.95);
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    z-index: 4;
    text-align: center;
    width: 85%;
    pointer-events: none;
}

/* Hide the Set-as-Hero button on missing photos — you can't promote a missing file */
.current-photo-item.photo-missing .set-hero-btn { display: none; }
.current-photo-item.photo-missing .hero-badge-on-thumb { display: none; }


/* ─── First Things First page (2026-05-19) ─── */
#firstThingsPage .page-content { max-width: 800px; margin: 0 auto; padding: var(--space-lg); }
.first-things-master-card {
    background: var(--bg-secondary);
    border-left: 4px solid #fbbf24;
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    box-shadow: 0 4px 14px rgba(251, 191, 36, 0.15);
}
.first-things-master-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.first-things-master-info { flex: 1; min-width: 0; }
.first-things-master-title { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.first-things-master-desc { font-size: 0.85rem; color: var(--text-secondary); }

/* ─── Empty-content warning banner (2026-05-21) ─── */
.first-things-empty-banner {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    background: color-mix(in srgb, #fbbf24 12%, var(--bg-secondary));
    border: 1px solid color-mix(in srgb, #fbbf24 40%, transparent);
    border-left: 4px solid #fbbf24;
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-lg);
}
.first-things-empty-banner-icon {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
}
.first-things-empty-banner-text {
    flex: 1;
    min-width: 0;
}
.first-things-empty-banner-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}
.first-things-empty-banner-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.35;
}
@media (max-width: 768px) {
    .first-things-empty-banner {
        flex-wrap: wrap;
        gap: var(--space-sm);
    }
    .first-things-empty-banner-text { flex: 1 1 100%; }
    .first-things-empty-banner > .btn { flex: 1 1 100%; }
}

/* ─── Multi-time scheduling (2026-05-21) ─── */
.first-things-times-row { align-items: flex-start; }
.first-things-times-control {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-sm);
    min-width: 160px;
}
.first-things-times-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}
.first-things-time-chip {
    display: inline-flex;
    align-items: center;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 4px 4px 4px 10px;
    gap: 4px;
}
.first-things-time-chip .first-things-time-input {
    background: transparent;
    border: 0;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9rem;
    padding: 2px 0;
    width: 88px;
}
.first-things-time-chip .first-things-time-input::-webkit-calendar-picker-indicator {
    filter: invert(0.7);
    cursor: pointer;
}
.first-things-time-remove {
    background: var(--border-color);
    color: var(--text-secondary);
    border: 0;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    line-height: 1;
    font-size: 0.95rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.first-things-time-remove:hover:not(:disabled) {
    background: #ef4444;
    color: white;
}
.first-things-time-remove:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
@media (max-width: 768px) {
    .first-things-times-row { flex-direction: column; align-items: stretch; }
    .first-things-times-control { align-items: stretch; min-width: 0; }
    .first-things-times-list { justify-content: flex-start; }
}
.first-things-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    border: 1px solid var(--border-color);
}
.first-things-card-title {
    font-size: 0.95rem; font-weight: 600; color: var(--text-primary);
    margin: 0 0 var(--space-md) 0; display: flex; align-items: center; gap: var(--space-xs);
}
.first-things-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 6px;
    background: rgba(139, 92, 246, 0.18); color: var(--primary-color);
    border-radius: 11px; font-size: 0.75rem; font-weight: 700; margin-left: 4px;
}
.first-things-row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
    padding: var(--space-sm) 0;
}
.first-things-row + .first-things-row { border-top: 1px dashed var(--border-color); }
.first-things-row-info { flex: 1; min-width: 0; }
.first-things-row-title { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.first-things-row-desc { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.4; }
.first-things-empty {
    color: var(--text-secondary); font-size: 0.85rem; font-style: italic;
    margin: 0; padding: var(--space-md) 0;
}
.first-things-pinned-item, .first-things-note-item {
    display: flex; align-items: center; gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-primary); border-radius: var(--radius-md);
    margin-bottom: var(--space-xs); border-left: 3px solid #fbbf24;
}
.first-things-pinned-letter {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; background: var(--primary-color); color: white;
    border-radius: 6px; font-weight: 700; font-size: 0.75rem; flex-shrink: 0;
}
.first-things-pinned-name { flex: 1; min-width: 0; font-size: 0.9rem; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.first-things-pinned-name.completed { text-decoration: line-through; opacity: 0.55; }
.first-things-pinned-unpin, .first-things-note-del {
    background: transparent; border: 1px solid var(--border-color);
    color: var(--text-secondary); width: 28px; height: 28px;
    border-radius: 50%; cursor: pointer; font-size: 1rem;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.first-things-pinned-unpin:hover, .first-things-note-del:hover {
    background: rgba(239, 68, 68, 0.15); color: #ef4444; border-color: #ef4444;
}
.first-things-note-text { flex: 1; min-width: 0; font-size: 0.9rem; color: var(--text-primary); }
.first-things-note-badge {
    font-size: 0.7rem; font-weight: 600; padding: 3px 8px; border-radius: 10px; flex-shrink: 0;
}
.first-things-note-badge.repeating { background: rgba(16, 185, 129, 0.18); color: #10b981; }
.first-things-note-badge.oneshot { background: rgba(6, 182, 212, 0.18); color: #06b6d4; }
@media (max-width: 768px) {
    #firstThingsPage .page-content { padding: var(--space-md); }
    .first-things-row { flex-wrap: wrap; }
}

/* ─── First Things Chunk 2: pin pill + edit button + note modal ─── */
.primer-tag-first-things {
    background: rgba(251, 191, 36, 0.18);
    color: #fbbf24;
    font-weight: 700;
}
.first-things-note-edit {
    background: transparent; border: 1px solid var(--border-color);
    color: var(--text-secondary); width: 28px; height: 28px;
    border-radius: 50%; cursor: pointer; font-size: 0.85rem;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.first-things-note-edit:hover {
    background: rgba(139, 92, 246, 0.15); color: var(--primary-color); border-color: var(--primary-color);
}
#firstThingsNoteModal .modal-content { max-width: 480px; }
#firstThingsNoteText { width: 100%; resize: vertical; min-height: 80px; }

/* ─── First Things Chunk 3: flash modal ─── */
.first-things-modal {
    position: fixed; inset: 0; z-index: 1900000;
    display: none; align-items: center; justify-content: center;
    padding: var(--space-md); pointer-events: none;
}
.first-things-modal.active { display: flex; pointer-events: auto; }
.first-things-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    animation: ft-fade-in 220ms ease-out;
}
.first-things-modal-content {
    position: relative; z-index: 1;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border-left: 4px solid #fbbf24;
    box-shadow: 0 16px 48px rgba(251, 191, 36, 0.3), 0 4px 16px rgba(0,0,0,0.4);
    width: 100%; max-width: 520px; max-height: 85vh;
    display: flex; flex-direction: column;
    animation: ft-pop 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}
@keyframes ft-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ft-pop {
    from { opacity: 0; transform: scale(0.92) translateY(-8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.first-things-modal-header {
    padding: var(--space-lg) var(--space-lg) var(--space-md);
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), transparent);
}
.first-things-modal-header h2 {
    margin: 0 0 4px 0; font-size: 1.4rem; color: var(--text-primary);
}
.first-things-modal-subtitle {
    margin: 0; color: var(--text-secondary); font-size: 0.85rem;
}
.first-things-modal-body {
    flex: 1; overflow-y: auto;
    padding: var(--space-md) var(--space-lg);
}
.first-things-modal-section { margin-bottom: var(--space-lg); }
.first-things-modal-section:last-child { margin-bottom: 0; }
.first-things-modal-section-title {
    font-size: 0.78rem; font-weight: 700; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.06em;
    margin: 0 0 var(--space-sm) 0;
}
.first-things-modal-task, .first-things-modal-note {
    display: flex; align-items: center; gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-primary); border-radius: var(--radius-md);
    margin-bottom: var(--space-xs);
    border-left: 3px solid #fbbf24;
}
.first-things-modal-task.completed {
    opacity: 0.55;
    border-left-color: #10b981;
}
.first-things-modal-task.completed .first-things-modal-task-name {
    text-decoration: line-through;
}
.first-things-modal-task-letter {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; background: var(--primary-color); color: white;
    border-radius: 6px; font-weight: 700; font-size: 0.75rem; flex-shrink: 0;
}
.first-things-modal-task-name, .first-things-modal-note-text {
    flex: 1; min-width: 0; font-size: 0.95rem; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.first-things-modal-task-btn {
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid var(--border-color); background: transparent;
    color: var(--text-secondary); font-size: 0.95rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
    transition: all 0.15s;
}
.first-things-modal-task-btn.complete:hover:not(:disabled) {
    background: rgba(16, 185, 129, 0.18); color: #10b981; border-color: #10b981;
}
.first-things-modal-task-btn.unpin:hover {
    background: rgba(251, 191, 36, 0.2); color: #fbbf24; border-color: #fbbf24;
}
.first-things-modal-task-btn:disabled { cursor: not-allowed; opacity: 0.4; }
.first-things-modal-note-badge {
    font-size: 0.85rem; padding: 2px 8px; border-radius: 10px; flex-shrink: 0;
}
.first-things-modal-note-badge.repeating { background: rgba(16, 185, 129, 0.18); color: #10b981; }
.first-things-modal-note-badge.oneshot { background: rgba(6, 182, 212, 0.18); color: #06b6d4; }
.first-things-modal-footnote {
    margin: var(--space-sm) 0 0; padding: var(--space-xs) var(--space-sm);
    font-size: 0.72rem; color: var(--text-secondary); font-style: italic;
    text-align: center;
}
.first-things-modal-footer {
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--border-color);
    background: var(--bg-primary);
}
.first-things-modal-dismiss { width: 100%; padding: 12px; font-size: 1rem; }
@media (max-width: 768px) {
    .first-things-modal-content { max-height: 90vh; }
    .first-things-modal-task-name, .first-things-modal-note-text { white-space: normal; }
}

/* ====================================================================
   2026-05-23: PROPER DESKTOP LAYOUT (>=1025px)
   --------------------------------------------------------------------
   Replaces the slide-in-drawer-on-desktop pattern with a permanent
   left sidebar + center pane structure, AND adds multi-column group
   compaction for task-list pages so content doesn't stretch edge-to-edge.

   Mobile/tablet (<1025px) is UNAFFECTED. Everything below this comment
   is gated by @media (min-width: 1025px) and gets overridden cleanly
   by the existing mobile rules at narrower breakpoints due to source
   order + media-query gating.

   Override strategy: this block is appended AFTER all existing rules,
   so source-order specificity favors these rules at equal class count.
   !important is used only on the load-bearing properties that the
   existing slide-in CSS sets with the same specificity.
==================================================================== */
@media (min-width: 1025px) {

    /* === Sidebar: permanent left column === */
    body.logged-in .sidebar-nav {
        display: flex !important;
        flex-direction: column;
        transform: none !important;
        box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);
        /* width / height / position inherited from base .sidebar-nav rule
           (200px wide, fixed left:0 top:0, 100vh tall) */
    }

    /* Hide the hamburger toggle + backdrop + close-X — sidebar is always open */
    body.logged-in .sidebar-toggle,
    body.logged-in .sidebar-backdrop,
    body.logged-in .sidebar-close-btn {
        display: none !important;
    }

    /* Push main content past the sidebar */
    body.logged-in .main-container {
        margin-left: 200px !important;
        min-height: 100vh;
    }

    /* Push the fixed header-nav row past the sidebar */
    body.logged-in .header-nav-icons {
        left: 200px !important;
        width: calc(100% - 200px) !important;
    }

    /* Cap page-content width so it doesn't stretch on ultra-wide screens.
       Empty side margins are standard desktop UX. */
    body.logged-in .page {
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
    }

    /* === Multi-column group grid for task pages ===
       Groups become responsive columns instead of stretching full width.
       auto-fit + minmax(420px, 1fr) lets the layout flow 1-3 columns
       depending on viewport width. */
    body.logged-in #focusTasksContainer,
    body.logged-in #morningTasksContainer,
    body.logged-in #groupsList,
    body.logged-in #setAsideContainer {
        display: grid;
        /* min(100%, 420px) keeps a single card from overflowing its track on
           narrow desktop (~1025px) — no visual change at normal widths. */
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
        gap: 1.25rem;
        align-items: start;
    }

    /* Items that should span ALL columns (not be a single-column item):
       Critical aggregate, the mode-toggle bar, any future full-width
       headers we add. */
    body.logged-in .focus-critical-aggregate,
    body.logged-in .group-mode-bar,
    body.logged-in .lists-mode-bar {
        grid-column: 1 / -1;
    }

    /* Each group section inside the grid stays compact — no overflow */
    body.logged-in #focusTasksContainer .group-section,
    body.logged-in #morningTasksContainer .group-section,
    body.logged-in #groupsList .group-item {
        min-width: 0;  /* required to let grid item shrink properly */
    }
}

/* ====================================================================
   2026-05-23: Focus page Critical dedup styling
   --------------------------------------------------------------------
   - .crit-source-label: subtle pill appended to each top-aggregate
     critical card showing which group/list the task belongs to.
   - .critical-sub-section: per-group collapsible strip that hides
     critical tasks by default (since they already appear in the top
     aggregate) but lets the user expand inline if they want to see
     them in context.
==================================================================== */

/* Source-group label on Critical aggregate cards */
.crit-source-label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.55rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: var(--text-muted, #707080);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.crit-source-label::before {
    content: '↳';
    color: var(--text-muted, #707080);
    font-weight: 400;
    margin-right: 1px;
}
[data-theme="dark"] .crit-source-label {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Per-group critical-tasks collapsed strip */
.critical-sub-section {
    margin: 0.25rem 0 0.5rem;
}
.critical-sub-header {
    background: rgba(239, 68, 68, 0.06);
    border: 1px dashed rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    padding: 0.55rem 0.85rem;
    transition: background 0.15s ease, border-style 0.15s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.critical-sub-header:hover {
    background: rgba(239, 68, 68, 0.1);
}
.critical-sub-section:not(.collapsed) .critical-sub-header {
    background: transparent;
    border-style: solid;
    border-color: rgba(239, 68, 68, 0.4);
}
.critical-sub-header .primer-section-label {
    color: var(--danger-color, #ef4444);
    font-size: 0.82rem;
    font-weight: 600;
    flex: 1;
}
.critical-sub-header .primer-section-dot {
    background: var(--danger-color, #ef4444) !important;
}
.critical-sub-header .primer-section-count {
    background: rgba(239, 68, 68, 0.18);
    color: var(--danger-color, #ef4444);
}
.critical-sub-hint {
    color: var(--text-muted, #707080);
    font-size: 0.7rem;
    font-style: italic;
    font-weight: 500;
    margin-left: 0.4rem;
}
.critical-sub-section:not(.collapsed) .critical-sub-hint::before {
    content: 'showing — tap to hide';
}
.critical-sub-section.collapsed .critical-sub-hint::before {
    content: 'tap to show';
}
.critical-sub-section .critical-sub-hint {
    content: ''; /* reset so ::before takes over */
}
/* Hide the static "tap to show" text — the ::before handles both states */
.critical-sub-section .critical-sub-hint:not(:empty) {
    /* The HTML has "tap to show" as a fallback; CSS ::before replaces it */
}

/* Critical sub-section content uses the same red-glow style as the
   top aggregate cards when expanded (consistency with aggregate). */
.critical-sub-section .group-section-content {
    padding-top: 0.65rem;
}

/* ====================================================================
   2026-05-24: Notes "must read" / important flag
   --------------------------------------------------------------------
   - .note-important-toggle.is-important: filled-star styling for the
     toggle button when active (gold accent).
   - .note-card.note-card-important: gold left border + soft gold tint
     so important notes visually stand out in the list.
   - .header-nav-badge inside #headerNavNotes uses the existing
     header-nav-badge styling — count appears just like Morning/Focus.
==================================================================== */

.note-important-toggle {
    color: var(--text-muted, #707080);
    transition: color 0.15s ease, transform 0.12s ease;
}
.note-important-toggle:hover {
    color: var(--gold, #fbbf24);
    transform: scale(1.12);
}
.note-important-toggle.is-important {
    color: var(--gold, #fbbf24);
    text-shadow: 0 0 6px rgba(251, 191, 36, 0.45);
}
.note-important-toggle.is-important:hover {
    color: var(--gold, #fbbf24);
    transform: scale(1.12);
}

/* 2026-05-24 v2: Outstanding gold treatment — full border + halo + ribbon.
   Important notes float to the top of the group AND visually "lift" off
   the page so they're impossible to miss. */
.note-card.note-card-important {
    border: 2px solid var(--gold, #fbbf24);
    background: linear-gradient(
        135deg,
        rgba(251, 191, 36, 0.12) 0%,
        rgba(251, 191, 36, 0.04) 30%,
        var(--bg-secondary, #18182a) 70%
    );
    box-shadow:
        0 0 0 1px rgba(251, 191, 36, 0.15) inset,
        0 0 16px rgba(251, 191, 36, 0.30),
        0 4px 12px rgba(0, 0, 0, 0.25);
    position: relative;
}
.note-card.note-card-important::before {
    /* Small "MUST READ" ribbon in the top-right corner */
    content: 'MUST READ';
    position: absolute;
    top: 8px;
    right: 10px;
    background: var(--gold, #fbbf24);
    color: #1a1a1a;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    z-index: 1;
}
.note-card.note-card-important .note-card-title {
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: 0.01em;
    padding-right: 95px; /* clear the MUST READ ribbon */
}
.note-card.note-card-important .note-card-preview {
    color: var(--text-primary);
    opacity: 0.85;
}

/* ====================================================================
   2026-05-25: SPRINTER PAGE — race-mode with single timer + dock
==================================================================== */

#sprinterPage {
    --bar-100: #22c55e;
    --bar-80:  #84cc16;
    --bar-60:  #eab308;
    --bar-40:  #f97316;
    --bar-20:  #ef4444;
    --bar-10:  #dc2626;
}

.sprint-timer-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    margin-bottom: 1.5rem;
    overflow: hidden;
    display: grid;
    grid-template-columns: 18px 1fr;
    min-height: 140px;
    transition: box-shadow 0.3s ease;
    position: relative;
}
.sprint-timer-panel.running.danger {
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.4);
}

.sprint-timer-panel .timer-bar {
    position: relative;
    background: rgba(255,255,255,0.04);
    width: 100%;
    height: 100%;
}
.sprint-timer-panel .timer-bar-fill {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    background: var(--bar-color, var(--bar-100));
    transition: height 0.4s linear, background-color 0.4s ease;
    box-shadow: 0 0 12px var(--bar-color, var(--bar-100));
}
.sprint-timer-panel.running.danger .timer-bar-fill {
    animation: sprint-timer-pulse 0.55s ease-in-out infinite alternate;
}
@keyframes sprint-timer-pulse {
    from { box-shadow: 0 0 12px var(--bar-color); }
    to   { box-shadow: 0 0 32px var(--bar-color), 0 0 6px var(--bar-color) inset; }
}

/* 2026-05-25 — Mobile: lift the timer bar out of the panel grid and hang it
   as a thin vertical strip on the far-left viewport edge, from below the
   header to the bottom. Only visible while #sprinterPage is .active because
   the parent page is display:none otherwise. JS keeps updating #sprintBarFill. */
@media (max-width: 768px) {
    .sprint-timer-panel {
        grid-template-columns: 0 1fr;
    }
    .sprint-timer-panel .timer-bar {
        position: fixed;
        left: 0;
        top: 64px;            /* clears the fixed header-nav row + a little breathing space */
        bottom: 24px;         /* floats — doesn't touch the bottom edge of the viewport */
        width: 4px;
        height: auto;
        z-index: 50;
        background: rgba(255,255,255,0.06);
        border-radius: 0 2px 2px 0;
        pointer-events: none;
        overflow: visible;    /* let the fill's box-shadow glow extend outward */
    }
    /* Steady glow while the sprint is actively running (not just final 10%). */
    .sprint-timer-panel.running .timer-bar-fill {
        box-shadow:
            0 0 14px 2px var(--bar-color, var(--bar-100)),
            0 0 28px 4px var(--bar-color, var(--bar-100));
        animation: sprint-bar-mobile-glow 1.6s ease-in-out infinite alternate;
    }
}

@keyframes sprint-bar-mobile-glow {
    from {
        box-shadow:
            0 0 10px 1px var(--bar-color, var(--bar-100)),
            0 0 20px 3px var(--bar-color, var(--bar-100));
    }
    to {
        box-shadow:
            0 0 18px 3px var(--bar-color, var(--bar-100)),
            0 0 36px 6px var(--bar-color, var(--bar-100));
    }
}

.sprint-timer-panel .timer-body {
    padding: 1.4rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.sprint-timer-panel .timer-clock {
    font-family: monospace;
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: 0.02em;
    min-width: 200px;
}
.sprint-timer-panel.running .timer-clock { color: var(--bar-100, #22c55e); }
.sprint-timer-panel.running.danger .timer-clock { color: var(--bar-10, #dc2626); }
.sprint-timer-panel .timer-clock-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.35rem;
    font-weight: 600;
}

.sprint-timer-panel .timer-controls {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
    min-width: 200px;
}
.sprint-timer-panel .duration-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.sprint-timer-panel .duration-input {
    display: inline-flex;
    align-items: center;
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 0.45rem 0.85rem;
    gap: 0.5rem;
    border: 1px solid var(--border-color);
}
.sprint-timer-panel .duration-input input {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font: inherit;
    font-size: 1.1rem;
    font-weight: 700;
    width: 50px;
    text-align: center;
    -moz-appearance: textfield;
}
.sprint-timer-panel .duration-input input::-webkit-outer-spin-button,
.sprint-timer-panel .duration-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.sprint-timer-panel .duration-input label {
    color: var(--text-muted);
    font-size: 0.85rem;
}
.sprint-timer-panel .duration-presets { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.sprint-timer-panel .duration-preset {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.3rem 0.65rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.78rem;
    font-family: inherit;
}
.sprint-timer-panel .duration-preset:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.sprint-timer-panel .go-button {
    background: var(--success-color);
    color: white;
    border: none;
    padding: 0.85rem 1.5rem;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.03em;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    transition: transform 0.1s ease, background 0.15s ease;
    font-family: inherit;
}
.sprint-timer-panel .go-button:hover { background: #0fa371; transform: translateY(-1px); }
.sprint-timer-panel .go-button:active { transform: scale(0.97); }
.sprint-timer-panel.running .go-button {
    background: var(--danger-color);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}
.sprint-timer-panel.running .go-button:hover { background: #c92020; }

.sprint-status-line {
    color: var(--text-muted);
    font-size: 0.8rem;
}

#sprinterPage .section-strip {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    margin: 1.25rem 0 0.6rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 700;
}
#sprinterPage .section-strip::before {
    content: '';
    flex: 0 0 8px;
    height: 8px;
    border-radius: 50%;
}
#sprinterPage .section-strip.assigned::before { background: var(--success-color); }
#sprinterPage .section-strip.dock::before { background: var(--text-muted); }
#sprinterPage .section-strip .count {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.7rem;
    letter-spacing: 0;
}
#sprinterPage .section-strip .hint {
    margin-left: auto;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 400;
    font-style: italic;
}

.sprint-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.7rem 1rem;
    margin-bottom: 0.55rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: background 0.15s ease;
}
.sprint-item:hover { background: rgba(255,255,255,0.02); }

.sprint-item-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}
.sprint-item-check:hover { border-color: var(--success-color); }
.sprint-item.completed .sprint-item-check {
    background: var(--success-color);
    border-color: var(--success-color);
    color: white;
}
.sprint-item.completed .sprint-item-check::after {
    content: '\2713';
    font-weight: 700;
}

.sprint-item-spacer { width: 22px; flex-shrink: 0; }

.sprint-item-title {
    flex: 1;
    color: var(--text-primary);
    font-size: 0.92rem;
    min-width: 0;
}
.sprint-item.completed .sprint-item-title {
    text-decoration: line-through;
    color: var(--text-muted);
}
.sprint-item-source {
    color: var(--text-muted);
    font-size: 0.72rem;
    display: inline-block;
    background: rgba(255,255,255,0.04);
    padding: 0.1rem 0.45rem;
    border-radius: 8px;
    margin-left: 0.3rem;
}
.sprint-item-source.subtask { color: var(--accent-color); }

.sprint-item-actions { display: flex; gap: 0.35rem; flex-shrink: 0; }
.sprint-item-btn {
    width: 30px;
    height: 30px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
}
.sprint-item-btn:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}
.sprint-item-btn.assign {
    background: rgba(34, 197, 94, 0.18);
    color: var(--success-color);
    border-color: rgba(34, 197, 94, 0.4);
}
.sprint-item-btn.assign:hover {
    background: var(--success-color);
    color: white;
}
.sprint-item-btn.send-back {
    color: var(--text-muted);
    font-size: 0.78rem;
    padding: 0 0.5rem;
    width: auto;
}
.sprint-item-btn.send-back:hover {
    background: rgba(239,68,68,0.1);
    color: var(--danger-color);
    border-color: var(--danger-color);
}

.sprint-item.is-subtask {
    border-left: 3px solid var(--accent-color);
    background: rgba(99, 102, 241, 0.05);
}
.sprint-item.is-subtask .sprint-item-title { font-size: 0.88rem; }

#sprinterPage .empty-state-mini {
    color: var(--text-muted);
    text-align: center;
    padding: 1.5rem 1rem;
    font-style: italic;
    font-size: 0.85rem;
    background: rgba(255,255,255,0.02);
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    margin-bottom: 0.55rem;
}

.highlight-counter-chip {
    display: inline-block;
    background: var(--gold, #fbbf24);
    color: #1a1a1a;
    padding: 0.25rem 0.7rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.78rem;
    margin-left: 0.5rem;
    vertical-align: middle;
}
.highlight-counter-chip.full {
    background: var(--success-color);
    color: white;
}

/* 2026-05-25 — Mobile compact sprint timer (PLACED AT EOF so it wins source-order vs the base sprint-timer-panel block above). Clock stays big; duration input + presets + GO collapse to one horizontal row. */
@media (max-width: 768px) {
    .sprint-timer-panel {
        margin-bottom: 1rem;
        min-height: 0;
        display: block;                /* drop the grid — bar is position:fixed out of flow */
    }
    /* Stack vertically on mobile: clock row above, controls row below.
       Otherwise the clock's min-width:200px competes with controls and
       crushes the controls flex item to near-zero width. */
    .sprint-timer-panel .timer-body {
        padding: 1rem 1.1rem;
        gap: 0.85rem;
        flex-direction: column;
        align-items: flex-start;
    }
    .sprint-timer-panel .timer-clock { min-width: 0; }
    .sprint-timer-panel .timer-controls {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.5rem;
        min-width: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .sprint-timer-panel .duration-row { flex-wrap: nowrap; gap: 0.35rem; }
    .sprint-timer-panel .duration-presets { flex-wrap: nowrap; gap: 0.35rem; }

    /* All four control elements (duration input, 4 preset chips, GO) share the
       same width, height, and font-size for a tidy uniform row. */
    /* Hide the freeform duration input — presets cover the common cases. */
    .sprint-timer-panel .duration-input { display: none !important; }

    .sprint-timer-panel .duration-preset,
    .sprint-timer-panel .go-button {
        width: 58px;
        height: 36px;
        padding: 0;
        font-size: 0.8rem;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
        white-space: nowrap;
        box-sizing: border-box;
    }
    .sprint-timer-panel .duration-input input {
        font-size: 0.85rem;
        width: 22px;
        padding: 0;
        text-align: center;
    }
    .sprint-timer-panel .duration-input label {
        font-size: 0.7rem;
    }
    .sprint-timer-panel .go-button {
        font-size: 0.75rem;     /* fits "▶ GO" inside 58px without wrapping */
    }

    /* Center every child block of the card. .timer-body is flex-column,
       so align-items:center centers each child horizontally. */
    .sprint-timer-panel .timer-body {
        align-items: center;
        text-align: center;
    }
    /* .timer-controls becomes a content-sized row that is centered as
       a block child of .timer-body. */
    .sprint-timer-panel .timer-controls {
        flex: 0 0 auto;
        min-width: 0;
        align-self: center;
    }

    .sprint-timer-panel .sprint-status-line { display: none; }
}

/* 2026-05-25 — Sprinter mobile dock button + modal.
   Inline dock section stays on desktop. On mobile (≤768px) it's hidden
   and replaced by a button that opens a modal. Badge updates live via
   _renderSprinterPage. */
#sprintDockMobileBtn { display: none; }

@media (max-width: 768px) {
    /* Hide the inline dock section on mobile. */
    #sprinterPage .section-strip.dock,
    #sprintDockList { display: none !important; }

    /* Show the mobile dock button — centered, compact. */
    #sprintDockMobileBtn {
        display: flex;                        /* block-level flex so margin auto centers */
        width: fit-content;
        align-items: center;
        gap: 0.4rem;
        margin: 0 auto 0.85rem auto;
        padding: 0.35rem 0.8rem;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 999px;
        color: var(--text-primary);
        font-size: 0.78rem;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.15s ease, transform 0.1s ease;
    }
    #sprintDockMobileBtn:hover { background: var(--bg-tertiary); }
    #sprintDockMobileBtn:active { transform: scale(0.97); }
    .sprint-dock-mobile-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        background: var(--accent-color, #3b82f6);
        color: #0f172a;                       /* dark text against the blue badge */
        border-radius: 999px;
        font-size: 0.7rem;
        font-weight: 800;
    }
    .sprint-dock-mobile-badge.zero {
        background: var(--bg-tertiary);
        color: var(--text-muted);
    }
}

/* Dock modal — themed to match other modals. */
#sprintDockModal .sprint-dock-modal-content {
    max-width: 560px;
    width: calc(100vw - 32px);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    border-left: 4px solid var(--primary-color);
}
.sprint-dock-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.sprint-dock-modal-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    padding: 0 8px;
    margin-left: 0.4rem;
    background: var(--accent-color, #3b82f6);
    color: #fff;
    border-radius: 999px;
    font-size: 0.8rem;
}
.sprint-dock-modal-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.4rem;
}
.sprint-dock-modal-close:hover { color: var(--text-primary); }
.sprint-dock-modal-list {
    flex: 1;
    overflow-y: auto;
    margin-top: 0.6rem;
    min-height: 0;
}

/* 2026-05-25 — "You're Too Damn Fast!" splash for early sprint completion.
   Full-screen overlay above everything (above the 1.9M flash-modal tier).
   Tap anywhere to dismiss. */
.sprint-toofast-splash {
    position: fixed;
    inset: 0;
    z-index: 2100000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    background: radial-gradient(circle at center, rgba(34, 197, 94, 0.18), rgba(15, 23, 42, 0.92) 60%);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.32s ease;
    cursor: pointer;
    padding: 1rem;
    text-align: center;
}
.sprint-toofast-splash.active { opacity: 1; }

.sprint-toofast-burst {
    font-size: clamp(4rem, 14vw, 7rem);
    line-height: 1;
    filter: drop-shadow(0 0 24px rgba(34, 197, 94, 0.65));
    animation: toofast-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.sprint-toofast-title {
    font-size: clamp(1.8rem, 6vw, 3.2rem);
    font-weight: 900;
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, #22c55e, #facc15, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: toofast-rise 0.5s ease-out 0.15s both;
}
.sprint-toofast-sub {
    font-size: clamp(0.95rem, 3vw, 1.15rem);
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    animation: toofast-rise 0.5s ease-out 0.3s both;
}
.sprint-toofast-hint {
    margin-top: 0.6rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    animation: toofast-rise 0.5s ease-out 0.5s both;
}

@keyframes toofast-pop {
    0%   { transform: scale(0.4) rotate(-12deg); opacity: 0; }
    60%  { transform: scale(1.15) rotate(4deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes toofast-rise {
    from { transform: translateY(14px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* 2026-05-25 — Shift Tasks: hanging pill + splash + animations.
   Mobile-first. Pill is hidden on desktop entirely. */
.shift-tasks-pill {
    position: fixed;
    top: 100px;   /* clear the fixed header-nav row (was 70px → overlapped it on mobile) */
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #facc15, #f59e0b);
    color: #1f1300;
    border: none;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.85rem;
    cursor: pointer;
    display: none;
    align-items: center;
    gap: 0.4rem;
    z-index: 100100;     /* above the header-nav row (99999) so it's never covered */
    box-shadow: 0 0 16px 3px rgba(250,204,21,0.55), 0 0 32px 6px rgba(245,158,11,0.35);
    animation: shift-pulse 1.6s ease-in-out infinite alternate;
}
.shift-tasks-pill.show { display: inline-flex; }
.shift-tasks-pill:active { transform: translateX(-50%) scale(0.97); }
.shift-tasks-count {
    background: rgba(0,0,0,0.25);
    color: #1f1300;
    border-radius: 999px;
    padding: 0 6px;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 900;
}
@keyframes shift-pulse {
    from { box-shadow: 0 0 12px 2px rgba(250,204,21,0.45), 0 0 24px 4px rgba(245,158,11,0.25); }
    to   { box-shadow: 0 0 22px 5px rgba(250,204,21,0.7),  0 0 44px 10px rgba(245,158,11,0.45); }
}
@media (min-width: 769px) {
    .shift-tasks-pill { display: none !important; }
}

.shift-splash {
    position: fixed;
    inset: 0;
    z-index: 1900000;
    background: radial-gradient(circle at center, rgba(139,92,246,0.18), rgba(15,15,23,0.96) 70%);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.32s ease;
}
.shift-splash.active { opacity: 1; pointer-events: auto; }
.shift-splash-header {
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(0,0,0,0.25);
}
.shift-splash-title {
    font-size: 1.05rem;
    font-weight: 800;
    background: linear-gradient(135deg, #facc15, var(--primary-color, #8b5cf6), #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 6px;
}
.shift-splash-meta { color: var(--text-secondary); font-size: 0.78rem; }
.shift-progress-track {
    margin-top: 10px;
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    overflow: hidden;
}
.shift-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #facc15, var(--success-color, #22c55e));
    border-radius: 999px;
    transition: width 0.5s ease;
    box-shadow: 0 0 14px rgba(34,197,94,0.55);
}
.shift-splash-body { flex: 1; overflow-y: auto; padding: 12px 14px 20px; }

.shift-group {
    margin-bottom: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 12px;
    overflow: hidden;
    max-height: 800px;
    transition: opacity 0.35s ease, max-height 0.45s ease, padding 0.35s ease,
                margin 0.35s ease, border-width 0.35s ease, transform 0.35s ease;
    will-change: opacity, max-height, transform;
}
.shift-group.cleared {
    opacity: 0;
    transform: translateX(110%);
    max-height: 0;
    padding-top: 0; padding-bottom: 0;
    margin-bottom: 0;
    border-width: 0;
}
.shift-group-name { font-weight: 700; font-size: 0.9rem; margin-bottom: 10px; color: var(--text-primary); }

.shift-list-card {
    background: var(--bg-tertiary, #232342);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 8px 10px;
}
.shift-list-card.target { border-color: rgba(34,197,94,0.30); }
.shift-list-card.target.has-arrived {
    background: rgba(34,197,94,0.06);
    border-color: var(--success-color, #22c55e);
    box-shadow: 0 0 14px rgba(34,197,94,0.32);
}
.shift-list-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 6px;
}
.shift-list-card-header .letter {
    background: rgba(139,92,246,0.18);
    color: var(--primary-color, #8b5cf6);
    font-weight: 900;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.72rem;
}
.shift-list-card.target .shift-list-card-header .letter {
    background: rgba(34,197,94,0.18);
    color: var(--success-color, #22c55e);
}
.shift-list-card-header .name { color: var(--text-primary); flex: 1; }
.shift-list-card-header .count-badge {
    background: var(--success-color, #22c55e);
    color: #061b09;
    font-weight: 900;
    font-size: 0.65rem;
    border-radius: 999px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: scale(0);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.shift-list-card-header .count-badge.visible { transform: scale(1); }
.shift-list-card-header .count-badge.bump {
    animation: shift-badge-bump 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes shift-badge-bump {
    0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); }
}
.shift-arrow-down {
    text-align: center;
    color: #facc15;
    font-weight: 800;
    font-size: 1.1rem;
    line-height: 1;
    padding: 4px 0;
}
.shift-task-lane { display: flex; flex-direction: column; gap: 0; }
.shift-target-placeholder {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    padding: 4px 0 0;
    transition: opacity 0.25s ease;
}
.shift-target-placeholder.gone { opacity: 0; height: 0; padding: 0; overflow: hidden; }

.shift-task {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg-secondary, #1a1a2e);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--primary-color, #8b5cf6);
    border-radius: 8px;
    font-size: 0.78rem;
    margin-bottom: 6px;
    overflow: hidden;
    will-change: transform, opacity, max-height;
    max-height: 60px;
}
.shift-task.shifting { animation: shiftTaskSlideOut 0.4s ease-out forwards; }
.shift-task.shifted {
    opacity: 0;
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0; padding-bottom: 0;
    border-width: 0;
    transition: all 0.18s ease;
}
@keyframes shiftTaskSlideOut {
    to { transform: translateX(110%); opacity: 0; }
}
.shift-task.arrived {
    border-left-color: var(--success-color, #22c55e);
    background: rgba(34,197,94,0.08);
    animation: shiftTaskArrive 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes shiftTaskArrive {
    0% { transform: translateY(-12px) scale(0.95); opacity: 0; }
    60% { transform: translateY(3px) scale(1.02); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}
.shift-task .check {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--text-muted);
    flex-shrink: 0;
}
.shift-task .name { flex: 1; color: var(--text-primary); }
.shift-task .badge {
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    color: var(--text-secondary);
}
.shift-source-empty {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
    padding: 6px 4px 2px;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.shift-source-empty.show { opacity: 1; }

.shift-splash-footer {
    padding: 12px 16px 18px;
    border-top: 1px solid var(--border-color);
    background: rgba(0,0,0,0.3);
    display: flex;
    justify-content: center;
}
.shift-btn {
    padding: 10px 18px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.85rem;
}
.shift-btn-secondary { background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); }

.shift-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 28px 22px;
    min-height: 60vh;
    cursor: pointer;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}
.shift-summary.show { opacity: 1; transform: translateY(0); }
.shift-summary-check {
    font-size: clamp(3rem, 12vw, 5rem);
    line-height: 1;
    filter: drop-shadow(0 0 24px rgba(34,197,94,0.65));
    margin-bottom: 16px;
    animation: shift-summary-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.shift-summary-title {
    font-size: clamp(1.3rem, 5vw, 1.9rem);
    font-weight: 900;
    background: linear-gradient(135deg, var(--success-color, #22c55e), #facc15, var(--primary-color, #8b5cf6));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 18px;
}
.shift-summary-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 320px;
    margin-bottom: 22px;
}
.shift-summary-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(34,197,94,0.08);
    border: 1px solid rgba(34,197,94,0.25);
    border-radius: 10px;
    font-size: 0.82rem;
}
.shift-summary-row .group-name {
    color: var(--text-secondary);
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.shift-summary-row .letter {
    color: var(--primary-color, #8b5cf6);
    font-weight: 900;
    background: rgba(139,92,246,0.15);
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 0.75rem;
}
.shift-summary-row .arrow { color: #facc15; font-weight: 800; }
.shift-summary-hint {
    margin-top: 6px;
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
@keyframes shift-summary-pop {
    0% { transform: scale(0.4) rotate(-12deg); opacity: 0; }
    60% { transform: scale(1.15) rotate(4deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* 2026-05-25 — Subtle list-name subheading under task title on Focus / Morning.
   Small, low-contrast, italic so it whispers rather than shouts. */
.primer-card-list-sub {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-style: italic;
    letter-spacing: 0.02em;
    margin: 1px 0 4px 0;
    line-height: 1.2;
    opacity: 0.75;
}

/* 2026-05-25 — Group-by-list header row above each cluster of tasks that
   share a list. Subtle but more prominent than the per-task subheading. */
.primer-list-group-header {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 10px 4px;
    margin: 8px 4px 4px 4px;
    border-left: 3px solid var(--primary-color, #8b5cf6);
    background: rgba(139,92,246,0.06);
    border-radius: 6px 6px 0 0;
}
.primer-list-group-header:first-child { margin-top: 2px; }

/* 2026-05-26 — Shift Tasks final summary: sentence-form rows.
   Replaces the bare A → B letter row with a readable sentence naming the
   actual list names ("All TOP RUNNER B - 3PM tasks are now in TOP RUNNER C - 9PM"). */
.shift-summary-row.sentence {
    flex-direction: column;
    gap: 6px;
    text-align: center;
    padding: 12px 14px;
}
.shift-summary-row.sentence .group-name {
    font-size: 0.65rem;
    align-self: center;
    margin-bottom: 2px;
}
.shift-summary-row.sentence .sentence-text {
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.35;
}
.shift-summary-row.sentence .sentence-text strong {
    color: var(--success-color, #22c55e);
    font-weight: 800;
}

/* 2026-05-26 — Dim a list-group section on Focus when its upstream transfer
   source hasn't fired yet today. Visually signals "this list is waiting for
   its scheduled inflow." Once the upstream fires, the class is removed and
   the section brightens again. */
.primer-list-group { transition: opacity 0.35s ease, filter 0.35s ease; }
.primer-list-group.list-group-waiting {
    opacity: 0.42;
    filter: saturate(0.5);
}
.primer-list-group.list-group-waiting:hover {
    opacity: 0.7;       /* lift slightly on hover so user can still interact */
    filter: saturate(0.7);
}
.list-waiting-chip {
    margin-left: 6px;
    font-size: 0.78rem;
    opacity: 0.85;
}

/* 2026-05-26 — Notes checklist visual styling.
   <ul class="note-checklist"> with <li class="note-checklist-item">
   each containing a <span class="note-check"> showing ☐ or ☑. Clicking
   the ☐/☑ span toggles state (handled in app.js). */
.note-checklist {
    list-style: none;
    padding-left: 1.4rem;       /* left breathing room before the checkbox column */
    margin: 0.4rem 0;
}
.note-checklist-item {
    /* Block layout with hanging indent — gives the checkbox its own column
       and lets long text wrap cleanly to subsequent lines aligned past the box. */
    display: block;
    padding-left: 1.9em;
    text-indent: -1.9em;
    line-height: 1.5;
    margin: 4px 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}
/* 2026-05-26 — Samsung-Notes-style sleek checkbox.
   The span still contains a ☐/☑ glyph in its textContent (so plain-text
   copies and JS toggle logic both keep working), but visually we hide
   the character with text-indent:-9999px and draw the box ourselves
   using border + border-radius. Checked state fills with the success
   color and shows a centered tick via ::after. */
.note-check {
    display: inline-block;
    width: 1.05em;
    height: 1.05em;
    border: 2px solid var(--text-secondary);
    border-radius: 5px;
    background: transparent;
    cursor: pointer;
    user-select: none;
    margin-right: 0.55em;
    vertical-align: -0.18em;     /* visually align with surrounding text baseline */
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
    text-indent: -9999px;        /* hide the ☐/☑ glyph inside */
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}
.note-check:hover { transform: scale(1.1); border-color: var(--text-primary); }
.note-check.note-check-on {
    background: var(--success-color, #22c55e);
    border-color: var(--success-color, #22c55e);
}
.note-check.note-check-on::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.32em;
    height: 0.62em;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translate(-50%, -62%) rotate(45deg);
    text-indent: 0;
}
/* Strike-through the item text when checked */
.note-checklist-item:has(.note-check.note-check-on) {
    text-decoration: line-through;
    color: var(--text-muted);
}
/* Also style the rendered checklist in note CARD previews (read-only). */
.note-card .note-checklist .note-check { cursor: default; }
.note-card .note-checklist .note-check:hover { transform: none; }

/* 2026-05-26 — Mobile-only tidy-up for the Notes page header area.
   Goal: less wasted vertical space, full-width primary button, group
   tabs that scroll cleanly, compact rename/delete row. */
/* Notes FAB — hidden by default. Desktop uses the inline toolbar button.
   The FAB lives inside #notesListView, which the Notes module auto-hides
   when the editor opens — so visibility flows naturally without extra rules. */
.notes-fab-add { display: none; }

@media (max-width: 768px) {
    /* Hide the inline toolbar button row entirely on mobile. */
    #notesPage .notes-toolbar { display: none; }
    .notes-fab-add {
        display: flex;
        position: fixed;
        right: 18px;
        bottom: 24px;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        background: var(--primary-color, #8b5cf6);
        color: #fff;
        border: none;
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
        z-index: 9000;
        box-shadow: 0 6px 18px rgba(139, 92, 246, 0.45);
        transition: transform 0.12s ease, box-shadow 0.15s ease;
    }
    .notes-fab-add:hover { box-shadow: 0 8px 24px rgba(139, 92, 246, 0.6); }
    .notes-fab-add:active { transform: scale(0.95); }

    #notesPage .notes-group-tabs {
        padding: 0.35rem 0 0.55rem;
        gap: 0.35rem;
        margin-bottom: 0.45rem;
        /* soft edge fade so users know it scrolls */
        -webkit-mask-image: linear-gradient(90deg, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
                mask-image: linear-gradient(90deg, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
    }
    #notesPage .notes-group-tab {
        padding: 0.32rem 0.7rem;
        font-size: 0.78rem;
    }
    #notesPage .notes-group-tab-count { font-size: 0.65rem; padding: 0.08rem 0.35rem; }

    #notesPage .notes-group-context {
        padding: 0.4rem 0.65rem;
        font-size: 0.78rem;
        margin-bottom: 0.55rem;
        gap: 0.4rem;
    }
    /* Drop the "Active:" label prefix on mobile — group name already speaks for itself. */
    #notesPage .notes-group-context-name { font-weight: 600; color: var(--text-primary); }
    #notesPage .notes-group-context-name::before { content: none !important; }

    /* Compact rename/delete to icon-leading pill buttons */
    #notesPage .notes-group-context .context-btn {
        padding: 0.28rem 0.55rem;
        font-size: 0.72rem;
        gap: 0.2rem;
    }

    /* Mode bar — tighter */
    #notesPage .notes-mode-bar {
        margin-bottom: 0.55rem;
    }
}

/* 2026-05-26 — Collapsed note actions: single ⋯ button + themed modal. */
.note-action-btn.note-action-more {
    font-size: 1.1rem;
    line-height: 1;
    font-weight: 800;
    color: var(--text-secondary);
    padding: 0.2rem 0.55rem;
    background: transparent;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.note-action-btn.note-action-more:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

#noteActionsModal .note-actions-modal-content {
    max-width: 360px;
    width: calc(100vw - 32px);
    border-left: 4px solid var(--primary-color);
}
.note-actions-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0.85rem 0 1.1rem;
}
.note-action-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.9rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: transform 0.1s ease, background 0.15s ease, border-color 0.15s ease;
}
.note-action-row:hover {
    background: var(--bg-secondary);
    border-color: var(--primary-color);
}
.note-action-row:active { transform: scale(0.98); }
.note-action-row.danger { color: #ef4444; }
.note-action-row.danger:hover { border-color: #ef4444; background: rgba(239,68,68,0.08); }
.note-action-row .note-action-icon {
    font-size: 1.1rem;
    width: 1.5rem;
    text-align: center;
}

/* 2026-05-26 — Small floating expand-to-full-screen button injected next to
   each auto-expand input. Pinned to the top-right corner of the input's
   wrapper. Default behavior is now: input stays compact + grows downward
   only as text wraps; this button is the opt-in to the old full-screen
   expansion behavior. */
.input-expand-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    line-height: 1;
    z-index: 5;
    opacity: 0.7;
    transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.input-expand-btn:hover {
    opacity: 1;
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
    color: var(--text-primary);
}
.input-expand-btn:active { transform: scale(0.94); }
/* When the input is in full-screen mode, hide the expand button (a close
   affordance lives elsewhere in the enhanced modal). */
.modal-enhanced .input-expand-btn { display: none; }

/* 2026-05-29 — Focus Add-Task picker: highlight the group the user just
   jumped to so they can pick a list from it immediately. Pulses a soft
   accent ring + tints the block for ~2.4s after the picker opens. */
/* 2026-05-29: brighter + persistent (no fade). The highlight now stays on
   for the whole time the picker is open so the current group is obvious. */
.focus-picker-group-active {
    background: color-mix(in srgb, var(--primary-color) 30%, var(--bg-secondary)) !important;
    box-shadow: 0 0 0 2px var(--primary-color),
                0 0 18px color-mix(in srgb, var(--primary-color) 60%, transparent) !important;
    border-radius: 10px;
}
.focus-picker-group-active .focus-picker-group-name {
    color: #fff !important;
}

/* 2026-05-29 — Dreams drag-to-reorder. Toggle button in the header, drag
   handle + visual indicators on cards, and a reorder-mode lockout so taps
   on quick-actions / photos don't fire while dragging. Lives in styles.css
   (NOT dreams-page.css, which isn't tracked in git). */
.dreams-header-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.btn-dreams-reorder {
    padding: 0.55rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-dreams-reorder:hover { color: var(--text-primary); border-color: var(--primary-color); }
.btn-dreams-reorder.active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

/* Drag handle — only rendered in reorder mode */
.dream-drag-handle {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 6;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 0.85rem;
    letter-spacing: -2px;
    cursor: grab;
}
.dream-card.dream-reorderable { cursor: grab; }
.dream-card.dream-reorderable:active { cursor: grabbing; }
.dream-card.dragging { opacity: 0.5; transform: scale(0.98); }
.dream-card.drop-above { box-shadow: 0 -4px 0 -1px var(--primary-color); }
.dream-card.drop-below { box-shadow: 0 4px 0 -1px var(--primary-color); }

/* Reorder-mode lockout: disable the in-card tap targets so a drag press
   doesn't accidentally fire a quick-action or open the photo lightbox.
   The card itself + drag handle stay interactive. */
body.dreams-reorder-active .dream-card .quick-actions,
body.dreams-reorder-active .dream-card .dream-photo-area,
body.dreams-reorder-active .dream-card .hero-photo,
body.dreams-reorder-active .dream-card .gallery-nav,
body.dreams-reorder-active .dream-card .set-hero-btn {
    pointer-events: none !important;
}
body.dreams-reorder-active .dream-card.new-tile { display: none; }

/* 2026-05-29 — Dream card: collapse quick-actions into a vertical ⋮ button
   that opens a themed actions modal (mirrors the Notes 3-dot modal). */
#dreamsPage .dream-card .qa-btn.qa-more {
    writing-mode: vertical-rl;        /* stack the dots vertically (⋮) */
    text-orientation: upright;
    letter-spacing: -2px;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    padding: 4px 2px;
}
#dreamActionsModal .dream-actions-modal-content {
    max-width: 360px;
    width: calc(100vw - 32px);
    border-left: 4px solid var(--primary-color);
}
.dream-actions-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0.85rem 0 1.1rem;
}
.dream-action-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.9rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: transform 0.1s ease, background 0.15s ease, border-color 0.15s ease;
}
.dream-action-row:hover { background: var(--bg-secondary); border-color: var(--primary-color); }
.dream-action-row:active { transform: scale(0.98); }
.dream-action-row.danger { color: #ef4444; }
.dream-action-row.danger:hover { border-color: #ef4444; background: rgba(239,68,68,0.08); }
.dream-action-row .dream-action-icon { font-size: 1.1rem; width: 1.5rem; text-align: center; }

/* ─── 2026-05-29 Files page (Drive-style storage) ─── */
#filesPage .files-storage {
    margin: 0 0 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 12px;
}
#filesPage .files-storage-top {
    display: flex; justify-content: space-between;
    font-size: 0.78rem; color: var(--text-secondary);
}
#filesPage .files-storage-top b { color: var(--text-primary); }

#filesPage .files-toolbar {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px; flex-wrap: wrap;
}
#filesPage .files-view-toggle {
    display: flex; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden;
}
#filesPage .files-view-toggle button {
    background: transparent; border: none; color: var(--text-secondary);
    padding: 6px 11px; cursor: pointer; font-size: 0.95rem;
}
#filesPage .files-view-toggle button.on { background: var(--bg-tertiary); color: var(--text-primary); }

#filesPage .files-crumbs {
    display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
    font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 10px;
}
#filesPage .files-crumb { cursor: pointer; }
#filesPage .files-crumb.here { color: var(--text-primary); font-weight: 700; }
#filesPage .files-sep { color: var(--text-muted); }

#filesPage .files-drop {
    border: 1.5px dashed rgba(139,92,246,0.4);
    border-radius: 12px; padding: 12px; text-align: center;
    color: var(--text-muted); font-size: 0.8rem;
    background: rgba(139,92,246,0.04); margin-bottom: 12px;
    transition: background 0.15s ease, border-color 0.15s ease;
}
#filesPage .files-drop b { color: var(--primary-color); }
#filesPage.files-dragging .files-drop {
    background: rgba(139,92,246,0.14); border-color: var(--primary-color); color: var(--text-primary);
}

#filesPage .files-section-label {
    font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-muted); font-weight: 700; padding: 6px 2px 8px;
}
#filesPage .files-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px;
}
@media (min-width: 700px) { #filesPage .files-grid { grid-template-columns: repeat(5, 1fr); } }

#filesPage .files-tile {
    position: relative; background: var(--bg-secondary);
    border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden;
    cursor: pointer; transition: transform 0.12s ease, border-color 0.15s ease;
}
#filesPage .files-tile:hover { transform: translateY(-2px); border-color: rgba(139,92,246,0.45); }
#filesPage .files-thumb {
    height: 84px; display: flex; align-items: center; justify-content: center;
    font-size: 2rem; position: relative;
}
#filesPage .files-folder .files-thumb { background: linear-gradient(135deg, rgba(245,158,11,0.18), var(--bg-tertiary)); }
#filesPage .files-thumb.files-img { font-size: 0; background-size: cover; background-position: center; background-color: var(--bg-tertiary); }
#filesPage .files-thumb.files-pdf { background: rgba(239,68,68,0.10); }
#filesPage .files-thumb.files-doc { background: rgba(59,130,246,0.10); }
#filesPage .files-thumb.files-xls { background: rgba(34,197,94,0.10); }
#filesPage .files-thumb.files-ppt { background: rgba(245,158,11,0.10); }
#filesPage .files-thumb.files-txt,
#filesPage .files-thumb.files-misc { background: rgba(161,161,170,0.10); }
#filesPage .files-thumb.files-pub { background: rgba(20,184,166,0.10); }

#filesPage .files-type-badge {
    position: absolute; bottom: 6px; left: 6px;
    font-size: 0.55rem; font-weight: 800; letter-spacing: 0.04em;
    padding: 1px 5px; border-radius: 4px; color: #fff;
}
#filesPage .files-type-badge.pdf { background: var(--danger-color); }
#filesPage .files-type-badge.doc { background: var(--accent-color, #3b82f6); }
#filesPage .files-type-badge.xls { background: var(--success-color, #22c55e); }
#filesPage .files-type-badge.ppt { background: var(--warning-color, #f59e0b); color: #1f1300; }
#filesPage .files-type-badge.pub { background: #14b8a6; }
#filesPage .files-type-badge.txt,
#filesPage .files-type-badge.misc { background: var(--text-muted); }

#filesPage .files-meta { padding: 7px 8px 9px; }
#filesPage .files-name { font-size: 0.74rem; font-weight: 600; line-height: 1.25; word-break: break-word; }
#filesPage .files-sub { font-size: 0.64rem; color: var(--text-muted); margin-top: 2px; }
#filesPage .files-more {
    position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 6px;
    background: rgba(0,0,0,0.45); color: #fff; border: none; cursor: pointer;
    font-weight: 800; writing-mode: vertical-rl; letter-spacing: -2px;
    display: flex; align-items: center; justify-content: center; font-size: 0.85rem;
}

/* list view */
#filesPage .files-list { display: flex; flex-direction: column; gap: 6px; }
#filesPage .files-row {
    display: flex; align-items: center; gap: 10px;
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: 10px; padding: 9px 10px; cursor: pointer;
}
#filesPage .files-row:hover { border-color: rgba(139,92,246,0.4); }
#filesPage .files-row-ic { font-size: 1.3rem; width: 30px; text-align: center; }
#filesPage .files-row-name { font-size: 0.82rem; font-weight: 600; word-break: break-word; }
#filesPage .files-row-sub { font-size: 0.68rem; color: var(--text-muted); }
#filesPage .files-row-more {
    background: transparent; border: none; color: var(--text-secondary);
    font-weight: 800; writing-mode: vertical-rl; letter-spacing: -2px; cursor: pointer; padding: 0 6px;
}

#filesPage .files-empty { text-align: center; padding: 40px 20px; color: var(--text-secondary); }
#filesPage .files-empty-icon { font-size: 3rem; margin-bottom: 10px; opacity: 0.8; }
#filesPage .files-empty-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 6px; color: var(--text-primary); }
#filesPage .files-empty-msg { font-size: 0.85rem; }
#filesPage .files-empty-msg b { color: var(--primary-color); }

/* actions modal (mirror Notes/Dreams) */
#filesActionsModal .files-actions-content,
#filesMovePicker .files-actions-content {
    max-width: 360px; width: calc(100vw - 32px); border-left: 4px solid var(--primary-color);
}
.files-actions-list { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.85rem 0 1.1rem; }
.files-action-row {
    display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.9rem;
    background: var(--bg-tertiary); border: 1px solid var(--border-color);
    border-radius: 10px; color: var(--text-primary); font-size: 0.9rem; font-weight: 600;
    cursor: pointer; text-align: left; width: 100%;
    transition: transform 0.1s ease, background 0.15s ease, border-color 0.15s ease;
}
.files-action-row:hover { background: var(--bg-secondary); border-color: var(--primary-color); }
.files-action-row:active { transform: scale(0.98); }
.files-action-row.danger { color: #ef4444; }
.files-action-row.danger:hover { border-color: #ef4444; background: rgba(239,68,68,0.08); }
.files-action-ic { font-size: 1.1rem; width: 1.5rem; text-align: center; }

/* ─── 2026-05-30 Files ↔ Tasks integration ─── */

/* Important files: gold tile + star (grid view) */
#filesPage .files-tile.files-tile-important {
    border-color: rgba(251,191,36,0.55);
    background: linear-gradient(160deg, rgba(251,191,36,0.10), var(--bg-secondary) 60%);
    box-shadow: 0 0 14px rgba(251,191,36,0.22), inset 0 0 0 1px rgba(251,191,36,0.18);
}
#filesPage .files-important-star {
    position: absolute; top: 6px; right: 8px; font-size: 0.85rem;
    filter: drop-shadow(0 0 4px rgba(251,191,36,0.6)); pointer-events: none;
}
/* list view important row */
#filesPage .files-row.files-row-important {
    border-color: rgba(251,191,36,0.5);
    background: linear-gradient(90deg, rgba(251,191,36,0.10), transparent 60%);
}

/* Task card 📁 location pill */
.primer-tag.primer-tag-files {
    cursor: pointer;
    background: rgba(139,92,246,0.16);
    color: var(--primary-color);
    border: 1px solid rgba(139,92,246,0.30);
}
.primer-tag.primer-tag-files:hover {
    background: rgba(139,92,246,0.28);
    transform: scale(1.06);
}

/* Location option chip — lit/glow when the task has ANY location */
.task-option-chip.chip-lit {
    border-color: rgba(139,92,246,0.85) !important;
    color: var(--primary-color) !important;
    background: rgba(139,92,246,0.18) !important;
    box-shadow: 0 0 12px rgba(139,92,246,0.5), inset 0 0 0 1px rgba(139,92,246,0.35);
    font-weight: 700;
    animation: chipLitPulse 2.2s ease-in-out infinite;
}
@keyframes chipLitPulse {
    0%,100% { box-shadow: 0 0 8px rgba(139,92,246,0.40), inset 0 0 0 1px rgba(139,92,246,0.30); }
    50%     { box-shadow: 0 0 16px rgba(139,92,246,0.70), inset 0 0 0 1px rgba(139,92,246,0.45); }
}
@media (prefers-reduced-motion: reduce) {
    .task-option-chip.chip-lit { animation: none; }
}

/* Files-link row inside the Location section */
.files-link-row {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    margin: 0.35rem 0 0.25rem;
}
.files-link-display {
    flex: 1 1 auto; min-width: 0;
    padding: 0.5rem 0.7rem;
    background: var(--bg-tertiary); border: 1px dashed var(--border-color);
    border-radius: 8px; font-size: 0.85rem; color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.files-link-display.has-link {
    color: var(--text-primary); border-style: solid;
    border-color: rgba(139,92,246,0.45); background: rgba(139,92,246,0.10); font-weight: 600;
}
.files-link-btn {
    flex: 0 0 auto; padding: 0.5rem 0.85rem; border-radius: 8px;
    background: var(--primary-color); color: #fff; border: none; cursor: pointer;
    font-size: 0.82rem; font-weight: 600;
}
.files-link-btn:hover { filter: brightness(1.08); }
.files-link-clear {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px;
    background: var(--bg-tertiary); border: 1px solid var(--border-color);
    color: var(--text-secondary); cursor: pointer; font-size: 0.9rem;
}
.files-link-clear:hover { border-color: #ef4444; color: #ef4444; }

/* Files-link picker modal */
#filesLinkPickerModal .files-link-picker {
    max-width: 480px; width: calc(100vw - 32px); max-height: 80vh;
    display: flex; flex-direction: column; border-left: 4px solid var(--primary-color);
}
.files-link-breadcrumb {
    padding: 0.4rem 0.2rem 0.6rem; font-size: 0.82rem; color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color); margin-bottom: 0.5rem;
    word-break: break-word;
}
.files-link-breadcrumb .flp-crumb {
    background: none; border: none; color: var(--primary-color); cursor: pointer;
    font-size: 0.82rem; font-weight: 600; padding: 0;
}
.files-link-picker-body {
    overflow-y: auto; display: flex; flex-direction: column; gap: 0.4rem; padding-right: 2px;
}
.files-link-picker-body .flp-row {
    display: flex; align-items: center; gap: 0.5rem;
}
.files-link-picker-body .flp-open,
.files-link-picker-body .flp-file {
    flex: 1 1 auto; min-width: 0; text-align: left;
    padding: 0.6rem 0.7rem; border-radius: 8px;
    background: var(--bg-tertiary); border: 1px solid var(--border-color);
    color: var(--text-primary); font-size: 0.86rem; cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.files-link-picker-body .flp-open:hover { border-color: var(--primary-color); }
.files-link-picker-body .flp-file { cursor: default; }
.files-link-picker-body .flp-pick {
    flex: 0 0 auto; padding: 0.5rem 0.8rem; border-radius: 8px;
    background: var(--primary-color); color: #fff; border: none; cursor: pointer;
    font-size: 0.78rem; font-weight: 600;
}
.files-link-picker-body .flp-pick-folder {
    width: 100%; text-align: left; padding: 0.65rem 0.8rem; border-radius: 8px;
    background: rgba(139,92,246,0.12); border: 1px solid rgba(139,92,246,0.4);
    color: var(--primary-color); font-weight: 700; cursor: pointer; font-size: 0.84rem;
    margin-bottom: 0.3rem;
}
.files-link-picker-body .flp-pick-folder:hover { background: rgba(139,92,246,0.2); }

/* ─── 2026-05-30 Productivity bar + page ─── */

/* The fixed left-edge bar. Hidden until JS shows it (feature on, not Sprinter). */
.productivity-bar {
    position: fixed;
    left: 0;
    top: 64px;            /* clear the fixed header-nav row */
    bottom: 24px;
    width: 7px;
    z-index: 1999998;     /* ALWAYS on top — above modals (200000) + notifications (500000); below login/loading overlays (2000000) */
    background: rgba(255,255,255,0.06);
    border-radius: 0 3px 3px 0;
    overflow: visible;     /* let the fill glow extend outward */
    pointer-events: none;
    display: none;         /* JS toggles to block when enabled */
}
/* faint full-height goal gradient behind the fill (red bottom → green top) */
.productivity-bar::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    background: linear-gradient(to top, rgba(239,68,68,0.18), rgba(234,179,8,0.14) 50%, rgba(34,197,94,0.18));
    pointer-events: none;
}
/* Desktop: the 200px sidebar occupies the far-left, so sit the bar just to its right. */
@media (min-width: 1025px) {
    .productivity-bar { left: 200px; }
}
.productivity-bar-fill {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 0%;
    background: #dc2626;
    border-radius: 0 3px 3px 0;
    transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.4s ease;
    box-shadow: 0 0 10px var(--prod-color, #22c55e);
}
/* reward glow when the score climbs */
.productivity-bar-fill.prod-pulse {
    animation: prod-bar-pulse 1s ease-out;
}
@keyframes prod-bar-pulse {
    0%   { box-shadow: 0 0 8px var(--prod-color, #22c55e); }
    35%  { box-shadow: 0 0 22px 4px var(--prod-color, #22c55e), 0 0 40px 8px var(--prod-color, #22c55e); }
    100% { box-shadow: 0 0 10px var(--prod-color, #22c55e); }
}
@media (prefers-reduced-motion: reduce) {
    .productivity-bar-fill.prod-pulse { animation: none; }
}

/* ─── 2026-05-31: productivity milestone celebration splash (25/50/75/100%) ─── */
.prod-milestone-splash {
    position: fixed; inset: 0;
    display: none;
    align-items: center; justify-content: center;
    z-index: 1999999;        /* above the bar (1999998), below login/loading (2000000) */
    background: radial-gradient(ellipse at center, rgba(139,92,246,0.28), rgba(0,0,0,0.55));
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    cursor: pointer;
    padding: 24px;
}
.prod-milestone-splash.active { display: flex; animation: prod-splash-fade 0.25s ease-out; }
@keyframes prod-splash-fade { from { opacity: 0; } to { opacity: 1; } }
.prod-milestone-card {
    text-align: center;
    max-width: 360px; width: 100%;
    padding: 28px 26px 30px;
    border-radius: 20px;
    background: linear-gradient(160deg, var(--bg-card), var(--bg-secondary));
    border: 1px solid rgba(139,92,246,0.45);
    box-shadow: 0 0 0 1px rgba(139,92,246,0.25), 0 20px 60px rgba(0,0,0,0.55), 0 0 50px rgba(139,92,246,0.35);
    animation: prod-splash-pop 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
@keyframes prod-splash-pop {
    0%   { transform: scale(0.6) translateY(20px); opacity: 0; }
    60%  { transform: scale(1.06) translateY(0); opacity: 1; }
    100% { transform: scale(1) translateY(0); }
}
.prod-milestone-emoji {
    font-size: 3.4rem; line-height: 1;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
    animation: prod-emoji-bounce 0.9s ease-in-out 0.2s 2;
}
@keyframes prod-emoji-bounce {
    0%,100% { transform: translateY(0) rotate(0); }
    30%     { transform: translateY(-10px) rotate(-6deg); }
    60%     { transform: translateY(-4px) rotate(5deg); }
}
.prod-milestone-pct {
    margin-top: 8px;
    font-size: 3rem; font-weight: 900; line-height: 1;
    background: linear-gradient(135deg, #22c55e, #84cc16, #8b5cf6);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    letter-spacing: -0.02em;
}
.prod-milestone-title {
    margin-top: 10px;
    font-size: 1.25rem; font-weight: 800; color: var(--text-primary);
}
.prod-milestone-msg {
    margin-top: 6px;
    font-size: 0.9rem; color: var(--text-secondary, #b9b9d0);
    line-height: 1.4;
}
/* 100% gets a gold-tinted treatment */
.prod-milestone-splash.is-100 .prod-milestone-card {
    border-color: rgba(251,191,36,0.6);
    box-shadow: 0 0 0 1px rgba(251,191,36,0.35), 0 20px 60px rgba(0,0,0,0.6), 0 0 60px rgba(251,191,36,0.45);
}
.prod-milestone-splash.is-100 .prod-milestone-pct {
    background: linear-gradient(135deg, #fbbf24, #f59e0b, #22c55e);
    -webkit-background-clip: text; background-clip: text;
}
@media (prefers-reduced-motion: reduce) {
    .prod-milestone-splash.active,
    .prod-milestone-card,
    .prod-milestone-emoji { animation: none; }
}

/* ── Productivity page ── */
#productivityPage .prod-master-card,
#productivityPage .prod-preview-card,
#productivityPage .prod-cats-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    max-width: 680px;
}
#productivityPage .prod-master-card {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    border-left: 4px solid var(--primary-color);
}
#productivityPage .prod-master-title { font-weight: 700; font-size: 1rem; }
#productivityPage .prod-master-sub { font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.15rem; }

#productivityPage .prod-preview-head {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.5rem;
}
#productivityPage .prod-preview-score { font-weight: 800; font-size: 1.1rem; color: var(--text-primary); }
#productivityPage .prod-preview-track {
    height: 12px; border-radius: 999px; overflow: hidden;
    background: linear-gradient(to right, rgba(239,68,68,0.16), rgba(234,179,8,0.14) 50%, rgba(34,197,94,0.16));
}
#productivityPage .prod-preview-fill {
    height: 100%; width: 0%;
    background: #dc2626;
    border-radius: 999px;
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.4s ease;
}
#productivityPage .prod-preview-breakdown {
    display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem;
}
#productivityPage .prod-bd-chip {
    font-size: 0.74rem; padding: 0.2rem 0.55rem; border-radius: 999px;
    background: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-secondary);
}
#productivityPage .prod-bd-empty { font-size: 0.78rem; color: var(--text-muted); }

#productivityPage .prod-cats-title { font-weight: 700; margin-bottom: 0.75rem; }
#productivityPage .prod-cat-row {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.7rem 0; border-top: 1px solid var(--border-color);
    transition: opacity 0.15s ease;
}
#productivityPage .prod-cat-row:first-of-type { border-top: none; }
#productivityPage .prod-cat-row.prod-cat-off { opacity: 0.45; }
#productivityPage .prod-cat-main { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
#productivityPage .prod-cat-icon { font-size: 1.2rem; flex: 0 0 auto; }
#productivityPage .prod-cat-label { font-weight: 600; font-size: 0.9rem; }
#productivityPage .prod-cat-hint { font-size: 0.74rem; color: var(--text-secondary); margin-top: 0.1rem; }
#productivityPage .prod-cat-controls { display: flex; align-items: center; gap: 0.7rem; flex: 0 0 auto; }
#productivityPage .prod-weight { display: flex; align-items: center; gap: 0.2rem; }
#productivityPage .prod-weight-input {
    width: 58px; text-align: right; padding: 0.35rem 0.45rem;
    background: var(--bg-tertiary); border: 1px solid var(--border-color);
    border-radius: 8px; color: var(--text-primary); font-size: 0.85rem; font-weight: 600;
}
#productivityPage .prod-weight-pct { font-size: 0.8rem; color: var(--text-secondary); }
#productivityPage .prod-cats-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    flex-wrap: wrap; margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--border-color);
}
#productivityPage .prod-cats-note { font-size: 0.74rem; color: var(--text-muted); }
@media (max-width: 768px) {
    #productivityPage .prod-cat-row { flex-wrap: wrap; }
    #productivityPage .prod-cat-controls { width: 100%; justify-content: flex-end; }
}

/* ─── 2026-05-31: hanging/floating buttons sit UNDER modals ─── */
/* When ANY modal is open, hide the floating UI (quick-jump circles, jump
   arrows, FABs, wallet, shift pill, productivity bar) so it doesn't overlap
   the modal — exit the modal via its own X button. */
body:has(.modal.active) #quickJumpLettersColumn,
body:has(.modal.active) .floating-action,
body:has(.modal.active) .floating-bulk-button,
body:has(.modal.active) .bulk-move-fab,
body:has(.modal.active) #floatingBulkButton,
body:has(.modal.active) #walletFab,
body:has(.modal.active) #shiftTasksPill,
body:has(.modal.active) .shift-tasks-pill {
    display: none !important;
}
/* EXCEPTION: group-picker modals (Add-Task, Move Tasks, Convert-to-subtask)
   list every group + their lists/tasks, and the quick-jump letters jump WITHIN
   the modal — so keep the letter column visible + ON TOP for them.
   z-index must clear the .modal.active floor (200000) so the circles aren't
   painted behind the modal — esp. for modals opened via classList.add('active')
   (Convert-to-subtask) which hit that floor directly. */
body:has(#focusAddTaskPickerModal.active) #quickJumpLettersColumn,
body:has(#moveModal.active) #quickJumpLettersColumn,
body:has(#convertToSubtaskModal.active) #quickJumpLettersColumn {
    display: flex !important;
    z-index: 200001 !important;
}

/* ════════════════════════════════════════════════════════════════════════
   2026-06-03: FOCUS READING VIEW (read-only elegant tree)
   Scope: #focusTasksContainer + body.focus-reading-view only.
   Quick-jump letters + the 📖 toggle stay; the ACTION FABs hide. Jump
   arrows stay (they're navigation, not actions). Does NOT touch other pages.
   ════════════════════════════════════════════════════════════════════════ */
/* single-column flow (override the desktop multi-column grid) */
body.focus-reading-view #focusTasksContainer { display: block !important; }
/* right gutter so wrapped text never runs under the fixed quick-jump letter
   column (NAP/SAD/… circles sit at the far-right edge in this view) */
body.focus-reading-view #focusTasksContainer { padding-right: 46px; }
/* hide the action FABs (📊 progress, 🔄 send-to-primer, ➕ add) while reading */
body.focus-reading-view #progressToggleBtn,
body.focus-reading-view #sendAllToPrimerBtn,
body.focus-reading-view #focusAddTaskBtn { display: none !important; }

/* group block — render as an elegant section with a per-group accent bar +
   a soft gradient divider beneath the header (--fr-accent set inline). */
#focusTasksContainer .fr-group {
    background: transparent; border: none; box-shadow: none;
    overflow: visible; margin-bottom: 2rem;
}
#focusTasksContainer .fr-group > .fr-group-head {
    position: relative;
    display: flex; align-items: center; justify-content: space-between;
    background: transparent; border: none;
    padding: 4px 8px 13px 16px; margin-bottom: 6px;
}
#focusTasksContainer .fr-group > .fr-group-head::before {
    content: ''; position: absolute; left: 0; top: 3px; bottom: 15px;
    width: 3px; border-radius: 3px;
    background: var(--fr-accent, var(--primary-color));
}
#focusTasksContainer .fr-group > .fr-group-head::after {
    content: ''; position: absolute; left: 16px; right: 4px; bottom: 0; height: 1px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--fr-accent, var(--primary-color)) 50%, transparent), transparent);
}
#focusTasksContainer .fr-group > .fr-group-head:hover { background: transparent; }
#focusTasksContainer .fr-group-name {
    font-size: 0.82rem; font-weight: 700; letter-spacing: 1.6px;
    text-transform: uppercase; color: var(--text-secondary);
}
#focusTasksContainer .fr-group-right { display: flex; align-items: center; gap: 0.6rem; }
#focusTasksContainer .fr-group-count {
    font-size: 0.7rem; font-weight: 600; color: var(--text-muted);
    background: rgba(127,127,127,0.12); border-radius: 10px; padding: 1px 8px; min-width: 18px; text-align: center;
}
#focusTasksContainer .fr-group-content { padding: 2px 0 0 8px; }

/* level 1: task row — airy, top-aligned so wrapped titles read cleanly */
#focusTasksContainer .fr-row {
    display: flex; align-items: flex-start; gap: 0.6rem;
    padding: 12px 8px 12px 14px; border-left: 2px solid transparent;
    border-radius: 8px; cursor: default; transition: background 0.15s ease;
}
#focusTasksContainer .fr-row.has-children { cursor: pointer; }
#focusTasksContainer .fr-row:hover { background: rgba(127,127,127,0.06); }
#focusTasksContainer .fr-row.crit { border-left-color: #ef4444; }
#focusTasksContainer .fr-row.crit .fr-ttl { font-weight: 600; color: var(--text-primary); }
#focusTasksContainer .fr-row.prio { border-left-color: var(--gold-soft, #fbbf24); }
#focusTasksContainer .fr-ttl {
    font-size: 1rem; font-weight: 500; line-height: 1.45; color: var(--text-primary);
}

/* chevrons + leaf-gap (keeps titles aligned; chevron tracks first line) */
#focusTasksContainer .fr-chev {
    flex: none; width: 14px; margin-top: 5px; text-align: center; color: var(--text-muted);
    font-size: 0.64rem; transition: transform 0.18s ease;
}
#focusTasksContainer .collapsed > .fr-chev { transform: rotate(-90deg); }
#focusTasksContainer .fr-gap { flex: none; width: 14px; }

/* collapse wrappers via the preceding row's state */
#focusTasksContainer .fr-row.collapsed + .fr-children { display: none; }
#focusTasksContainer .fr-sub.collapsed + .fr-steps { display: none; }

/* level 2: subtask — smaller, indented, dimmer + accent-tinted tree guide */
#focusTasksContainer .fr-children { position: relative; }
#focusTasksContainer .fr-node { position: relative; }
#focusTasksContainer .fr-node::before {
    content: ''; position: absolute; left: 22px; top: 0; bottom: 0;
    width: 1.5px; background: color-mix(in srgb, var(--fr-accent, #808080) 32%, transparent);
}
#focusTasksContainer .fr-node.fr-last::before { bottom: auto; height: 20px; }
#focusTasksContainer .fr-sub {
    position: relative; display: flex; align-items: flex-start; gap: 0.55rem;
    padding: 8px 6px 8px 36px; border-radius: 6px;
}
#focusTasksContainer .fr-sub.has-children { cursor: pointer; }
#focusTasksContainer .fr-sub:hover { background: rgba(127,127,127,0.05); }
#focusTasksContainer .fr-sub::before {
    content: ''; position: absolute; left: 22px; top: 17px;
    width: 13px; height: 1.5px; background: color-mix(in srgb, var(--fr-accent, #808080) 32%, transparent);
}
#focusTasksContainer .fr-sub .fr-ttl { font-size: 0.9rem; font-weight: 500; color: var(--text-secondary); line-height: 1.4; }

/* level 3: add-on / step — smallest, indented further, dimmest + deeper guide */
#focusTasksContainer .fr-steps { position: relative; }
#focusTasksContainer .fr-step {
    position: relative; display: flex; align-items: flex-start; gap: 0.5rem;
    padding: 6px 6px 6px 60px;
}
#focusTasksContainer .fr-step::before {
    content: ''; position: absolute; left: 47px; top: 0; bottom: 0;
    width: 1.5px; background: color-mix(in srgb, var(--fr-accent, #808080) 22%, transparent);
}
#focusTasksContainer .fr-step.fr-last::before { bottom: auto; height: 16px; }
#focusTasksContainer .fr-step::after {
    content: ''; position: absolute; left: 47px; top: 15px;
    width: 11px; height: 1.5px; background: color-mix(in srgb, var(--fr-accent, #808080) 22%, transparent);
}
#focusTasksContainer .fr-step .fr-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-muted); flex: none; margin-top: 8px; }
#focusTasksContainer .fr-step .fr-ttl { font-size: 0.8rem; font-weight: 400; color: var(--text-muted); line-height: 1.35; }

/* 📖 Reading-view toggle FAB — inherits position:fixed !important from .floating-action */
.floating-action-reading {
    bottom: 196px !important; right: var(--space-md, 16px) !important;
    width: 36px !important; height: 36px !important; background: var(--primary-color);
}
.floating-action-reading.reading-on {
    background: #fff; color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-color), var(--shadow-medium);
}
@media (max-width: 768px) {
    .floating-action-reading { bottom: 176px !important; right: 8px !important; width: 32px !important; height: 32px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   2026-06-07: PRIMER CALENDAR MODE — month grid + scheduling.
   Toggle FAB mirrors the reading-view FAB. body.primer-calendar-view renders
   #primerActiveTasks as the grid + hides the list-mode chrome (action FABs,
   holding-tab bar, quick-jump column). The 📅 toggle stays; the auto-return +
   scheduled-surface engines keep running underneath.
   ════════════════════════════════════════════════════════════════════════ */
.floating-action-calendar {
    bottom: 196px !important; right: var(--space-md, 16px) !important;
    width: 36px !important; height: 36px !important; background: var(--primary-color);
}
.floating-action-calendar.calendar-on {
    background: #fff; color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-color), var(--shadow-medium);
}
@media (max-width: 768px) {
    .floating-action-calendar { bottom: 176px !important; right: 8px !important; width: 32px !important; height: 32px !important; }
}

body.primer-calendar-view #primerActiveTasks { display: block !important; }
body.primer-calendar-view #primerTabsBar,
body.primer-calendar-view #redistributeAllBtn,
body.primer-calendar-view #reactivateAllFromHoldingBtn,
body.primer-calendar-view #primerJumpDownBtn,
body.primer-calendar-view #primerJumpUpBtn,
body.primer-calendar-view #quickJumpLettersColumn { display: none !important; }

.pcal-wrap { max-width: 760px; margin: 0 auto; padding: 4px 2px 28px; }
.pcal-head { display: flex; align-items: center; gap: 0.5rem; padding: 6px 4px 12px; }
.pcal-title { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); flex: 1; text-align: center; }
.pcal-nav {
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-color);
    background: var(--bg-secondary); color: var(--text-primary); font-size: 1.15rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center; flex: none; transition: background 0.15s ease;
}
.pcal-nav:hover { background: var(--bg-tertiary); }
.pcal-today-btn {
    flex: none; padding: 6px 12px; border-radius: 16px; border: 1px solid var(--primary-color);
    background: transparent; color: var(--primary-color); font-size: 0.76rem; font-weight: 600; cursor: pointer;
}
.pcal-today-btn:hover { background: color-mix(in srgb, var(--primary-color) 14%, transparent); }
.pcal-dows { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.pcal-dow { text-align: center; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-muted); padding: 2px 0; }
.pcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.pcal-cell {
    min-height: 78px; border-radius: 8px; border: 1px solid var(--border-color);
    background: var(--bg-secondary); padding: 4px; display: flex; flex-direction: column; gap: 3px;
    overflow: hidden; cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease;
}
.pcal-cell.pcal-empty { background: transparent; border-color: transparent; cursor: default; }
.pcal-cell.pcal-has:hover { border-color: var(--primary-color); }
.pcal-cell.pcal-today { border-color: var(--primary-color); box-shadow: inset 0 0 0 1px var(--primary-color); }
.pcal-cell.pcal-drop { border-color: var(--success-color); background: color-mix(in srgb, var(--success-color) 12%, var(--bg-secondary)); }
.pcal-daynum { font-size: 0.72rem; font-weight: 600; color: var(--text-secondary); flex: none; }
.pcal-cell.pcal-today .pcal-daynum { color: var(--primary-color); }
.pcal-chips { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.pcal-chip {
    display: flex; align-items: center; gap: 3px; font-size: 0.64rem; line-height: 1.2;
    background: color-mix(in srgb, var(--primary-color) 16%, var(--bg-tertiary)); color: var(--text-primary);
    border-radius: 4px; padding: 2px 4px; cursor: grab; white-space: nowrap; overflow: hidden;
}
.pcal-chip-name { overflow: hidden; text-overflow: ellipsis; }
.pcal-chip-letter { font-weight: 800; color: var(--primary-color); flex: none; }
.pcal-chip-dragging { opacity: 0.45; }
.pcal-more { font-size: 0.6rem; color: var(--text-muted); padding-left: 2px; }
.pcal-foot { margin-top: 14px; text-align: center; font-size: 0.72rem; color: var(--text-muted); }

.primer-day-list { display: flex; flex-direction: column; gap: 6px; margin: 0.5rem 0; max-height: 52vh; overflow-y: auto; }
.primer-day-item { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 8px 10px; border-radius: 8px; background: var(--bg-secondary); border-left: 3px solid var(--primary-color); }
.primer-day-name { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; color: var(--text-primary); overflow: hidden; }
.primer-day-name .pcal-chip-letter { font-size: 0.72rem; }
.primer-day-actions { display: flex; gap: 4px; flex: none; }
.btn-mini { padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-tertiary); color: var(--text-primary); font-size: 0.72rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.btn-mini:hover { background: var(--bg-secondary); }
.btn-mini-danger { color: var(--danger-color); border-color: color-mix(in srgb, var(--danger-color) 40%, transparent); }
.primer-day-empty { text-align: center; color: var(--text-muted); padding: 1.2rem; font-size: 0.9rem; }

@media (max-width: 768px) {
    .pcal-grid, .pcal-dows { gap: 3px; }
    .pcal-cell { min-height: 62px; padding: 3px; border-radius: 6px; }
    .pcal-chip { font-size: 0.56rem; padding: 1px 3px; }
    .pcal-chip-name { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   2026-06-04: a11y — expand small kebab tap targets to 44×44 on touch
   WITHOUT changing their visual size (mirrors the .primer-card-check ::after
   pattern). Mobile only — desktop uses a mouse.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .task-menu-btn, .group-menu-btn { position: relative; }
    .task-menu-btn::after, .group-menu-btn::after {
        content: ''; position: absolute; top: 50%; left: 50%;
        width: 44px; height: 44px; transform: translate(-50%, -50%);
    }
}

/* ════════════════════════════════════════════════════════════════════════
   2026-06-04: ELEGANT NORMAL FOCUS CARDS (2c)
   Scoped to #focusTasksContainer ONLY — Morning (#morningTasksContainer),
   Primer, Lists keep their current look. Reading view uses .fr-* (untouched).
   ADDITIVE: keeps the letter accent (border-left) + the critical red state
   (its !important background/border/glow wins over these rules) + priority.
   ════════════════════════════════════════════════════════════════════════ */
#focusTasksContainer .primer-card {
    background: linear-gradient(180deg, var(--bg-card), var(--bg-secondary));
    /* leave border-left alone (4px letter accent); refine the other 3 sides */
    border-top: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    border-radius: 14px;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.15s ease;
}
#focusTasksContainer .primer-card:hover {
    transform: translateY(-1px);
    border-color: var(--border-hover);
    box-shadow: var(--shadow-soft);
}
#focusTasksContainer .primer-card:active { transform: translateY(0) scale(0.995); }
/* letter tag → crisper chip */
#focusTasksContainer .primer-tag-letter { border-radius: 7px; font-weight: 800; letter-spacing: 0.3px; }

/* ════════════════════════════════════════════════════════════════════════
   2026-06-04: ELEGANT SUBTASKS PANEL (2b)
   Scoped to #subtasksViewModal (one shared modal — applies app-wide, intended).
   ADDITIVE polish over existing DOM; all data-action wiring untouched.
   Preserves .is-priority (gold) via :not(), and .subtask-completed dimming.
   ════════════════════════════════════════════════════════════════════════ */
#subtasksViewModal .subtask-primer-card {
    border-radius: 13px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
#subtasksViewModal .subtask-primer-card:not(.is-priority) {
    background: linear-gradient(180deg, var(--bg-card), var(--bg-secondary));
    border: 1px solid var(--border-color);
}
#subtasksViewModal .subtask-primer-card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-soft);
}
/* action icons (priority / delete) — tidy hover chips */
#subtasksViewModal .subtask-primer-card .primer-action-btn { border-radius: 8px; transition: background 0.14s ease, color 0.14s ease; }
/* step rows — slightly rounder, clean guide */
#subtasksViewModal .step-row { border-radius: 9px; }
#subtasksViewModal .step-container { border-left-color: var(--border-color); }

/* ─── Group cascade-delete: strong confirmation modal (2026-06-05) ─── */
#groupDeleteCascadeModal .group-cascade-content {
    max-width: 520px;
    width: 92%;
    border-top: 4px solid var(--danger-color);
    text-align: left;
}
#groupDeleteCascadeModal .group-cascade-title { color: var(--danger-color); }
#groupDeleteCascadeModal .group-cascade-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0.35rem 0 0.6rem;
    line-height: 1.4;
}
#groupDeleteCascadeModal .group-cascade-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.7rem;
}
#groupDeleteCascadeModal .gcz-chip {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--danger-color) 16%, transparent);
    color: var(--danger-color);
    border: 1px solid color-mix(in srgb, var(--danger-color) 35%, transparent);
}
#groupDeleteCascadeModal .group-cascade-tree {
    max-height: 38vh;
    overflow-y: auto;
    background: var(--bg-tertiary, var(--bg-secondary));
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.6rem 0.75rem;
    font-size: 0.86rem;
    line-height: 1.5;
}
#groupDeleteCascadeModal .gcz-list {
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 0.5rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--border-color);
}
#groupDeleteCascadeModal .gcz-list:first-child { margin-top: 0; padding-top: 0; border-top: none; }
#groupDeleteCascadeModal .gcz-parked { color: var(--warning-color, #f59e0b); }
#groupDeleteCascadeModal .gcz-task { color: var(--text-primary); padding-left: 0.85rem; }
#groupDeleteCascadeModal .gcz-sub  { color: var(--text-secondary); padding-left: 1.9rem; font-size: 0.82rem; }
#groupDeleteCascadeModal .gcz-step { color: var(--text-tertiary, var(--text-secondary)); padding-left: 3rem; font-size: 0.8rem; }
#groupDeleteCascadeModal .gcz-empty { color: var(--text-tertiary, var(--text-secondary)); font-style: italic; padding-left: 0.85rem; font-size: 0.8rem; }
#groupDeleteCascadeModal .group-cascade-warning {
    margin: 0.7rem 0 0.3rem;
    font-size: 0.82rem;
    color: var(--warning-color, #f59e0b);
    line-height: 1.4;
}
#groupDeleteCascadeModal .group-cascade-confirm-label {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
#groupDeleteCascadeModal .group-cascade-content .confirm-actions { margin-top: 0.9rem; }