:root {
    /* Dark Mode (Default) */
    --bg-gradient: linear-gradient(-45deg, #0f2027, #203a43, #2c5364, #1c1c1c);
    --glass-bg: rgba(30, 30, 30, 0.4);
    --glass-border: rgba(255, 255, 255, 0.1);
    --text-primary: #ffffff;
    --text-secondary: #aaaaaa;
    --card-bg: rgba(255, 255, 255, 0.05);
    --card-linked-bg: rgba(59, 130, 246, 0.2);
    --card-archived-bg: rgba(0, 0, 0, 0.3);
    --card-important-bg: rgba(255, 215, 0, 0.15);
    --card-important-border: rgba(255, 215, 0, 0.5);
    --accent-blue: #3b82f6;
    --accent-red: #ef4444;
    --radius: 16px;
    --shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    --dropdown-bg: #1a1a1a;
    --dropdown-bg-glass: rgba(20, 20, 20, 0.98);
    --input-bg: rgba(0, 0, 0, 0.3);
    --input-border: rgba(255, 255, 255, 0.1);
    --input-text: #ffffff;
}

[data-theme="light"] {
    --bg-gradient: linear-gradient(-45deg, #ffffff, #f0f0f0, #e6e6e6, #ffffff);
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(0, 0, 0, 0.1);
    --text-primary: #1f2937;
    --text-secondary: #4b5563;
    --card-bg: #ffffff;
    --card-linked-bg: rgba(59, 130, 246, 0.15);
    --card-archived-bg: rgba(0, 0, 0, 0.03);
    --card-important-bg: rgba(255, 223, 0, 0.15);
    --card-important-border: rgba(255, 193, 7, 0.5);
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    --dropdown-bg: #ffffff;
    --dropdown-bg-glass: rgba(255, 255, 255, 0.98);
    --input-bg: #f3f4f6;
    --input-border: #d1d5db;
    --input-text: #1f2937;
}

[data-theme="oled"] {
    --bg-gradient: #000000;
    --glass-bg: rgba(20, 20, 20, 0.6);
    --glass-border: rgba(255, 255, 255, 0.15);
    --text-primary: #ffffff;
    --text-secondary: #bbbbbb;
    --card-bg: #000000;
    --card-linked-bg: rgba(59, 130, 246, 0.2);
    --card-archived-bg: rgba(255, 255, 255, 0.05);
    --card-important-bg: rgba(255, 215, 0, 0.1);
    --card-important-border: rgba(255, 215, 0, 0.5);
    --shadow: none;
    --dropdown-bg: #000000;
    --dropdown-bg-glass: #000000;
    --input-bg: #111111;
    --input-border: #333333;
    --input-text: #ffffff;
}

[data-theme="oled"] body {
    background: #000000;
    animation: none;
}

/* ===================================================================
   iOS STATUS BAR BLACK BOX
   ===================================================================
   With viewport-fit=cover + black-translucent status bar, iOS expands
   the app behind the notch. #ios-status-bar-bg is a fixed, full-width
   div positioned at the very top of the screen. It is always solid
   black, so iOS's "Website Tinting" samples BLACK pixels and keeps
   the status bar (clock, battery, wifi) black with white text.
   env(safe-area-inset-top) gives us the exact pixel height of the
   status bar on any iPhone (notched or Dynamic Island).
   =================================================================== */
#ios-status-bar-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top, 0px);
    background: #000000;
    z-index: 99999;
    pointer-events: none;
    display: none;
    /* Add this line to hide the black box */
}

/* app content sits below the status bar naturally via body padding-top */

/* Ensure the login overlay fills correctly */
#login-overlay {
    box-sizing: border-box;
}

/* Hide site-wide header by default - Toggled via Settings */
#main-nav-placeholder {
    display: none;
}

/* ===== FANCY THEME: Futuristic Glassmorphism ===== */
[data-theme="fancy"] {
    --bg-gradient: linear-gradient(135deg, #000000 0%, #0a0015 20%, #0d1b2a 40%, #1b0033 60%, #0d1b2a 80%, #000000 100%);
    --glass-bg: rgba(255, 255, 255, 0.06);
    --glass-border: rgba(255, 255, 255, 0.12);
    --text-primary: #e8e6f0;
    --text-secondary: #8b8a9e;
    --card-bg: rgba(255, 255, 255, 0.04);
    --card-linked-bg: rgba(99, 102, 241, 0.15);
    --card-archived-bg: rgba(0, 0, 0, 0.35);
    --card-important-bg: rgba(251, 191, 36, 0.12);
    --card-important-border: rgba(251, 191, 36, 0.4);
    --accent-blue: #818cf8;
    --accent-red: #f87171;
    --radius: 18px;
    --shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 80px rgba(99, 102, 241, 0.05);
    --dropdown-bg: rgba(10, 5, 25, 0.95);
    --dropdown-bg-glass: rgba(10, 5, 25, 0.92);
    --input-bg: rgba(255, 255, 255, 0.04);
    --input-border: rgba(255, 255, 255, 0.1);
    --input-text: #e8e6f0;
    --fancy-glow-1: rgba(129, 140, 248, 0.65);
    --fancy-glow-2: rgba(167, 139, 250, 0.6);
    --fancy-glow-3: rgba(56, 189, 248, 0.55);
    --fancy-speed-mult: 1;
}

#fancy-speed-control {
    display: none;
}

[data-theme="fancy"] #fancy-speed-control {
    display: flex !important;
}

/* Black failsafe behind everything in fancy mode — covers Safari overscroll / status bar gaps */
[data-theme="fancy"] html {
    background: #000000;
}

[data-theme="fancy"] body {
    background: var(--bg-gradient);
    background-size: 300% 300%;
    animation: fancyGradient calc(20s / var(--fancy-speed-mult)) ease infinite;
    font-family: 'Outfit', 'Inter', 'Segoe UI', sans-serif;
    overflow: hidden;
    position: relative;
}

@keyframes fancyGradient {
    0% {
        background-position: 0% 0%;
    }

    25% {
        background-position: 100% 50%;
    }

    50% {
        background-position: 50% 100%;
    }

    75% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 0% 0%;
    }
}

/* Animated Glowing Orbs (via pseudo-elements on body) */
[data-theme="fancy"] .fancy-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(12px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.85;
}

[data-theme="fancy"] .fancy-orb-1 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--fancy-glow-1) 0%, transparent 80%);
    top: -10%;
    left: -5%;
    animation: fancyOrbDrift1 calc(8s / var(--fancy-speed-mult)) ease-in-out infinite alternate;
}

[data-theme="fancy"] .fancy-orb-2 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, var(--fancy-glow-2) 0%, transparent 80%);
    bottom: -15%;
    right: -8%;
    animation: fancyOrbDrift2 calc(10s / var(--fancy-speed-mult)) ease-in-out infinite alternate;
}

[data-theme="fancy"] .fancy-orb-3 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, var(--fancy-glow-3) 0%, transparent 80%);
    top: 40%;
    left: 50%;
    animation: fancyOrbDrift3 calc(6s / var(--fancy-speed-mult)) ease-in-out infinite alternate;
}

@keyframes fancyOrbDrift1 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(80px, 60px) scale(1.15);
    }

    100% {
        transform: translate(-30px, 100px) scale(0.95);
    }
}

@keyframes fancyOrbDrift2 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-70px, -50px) scale(1.1);
    }

    100% {
        transform: translate(40px, -80px) scale(0.9);
    }
}

@keyframes fancyOrbDrift3 {
    0% {
        transform: translate(-50%, 0) scale(0.9);
    }

    50% {
        transform: translate(-30%, -40px) scale(1.1);
    }

    100% {
        transform: translate(-60%, 50px) scale(1);
    }
}

/* Mobile-Specific Orb & Gradient Dynamics */
@media (max-width: 600px) {
    [data-theme="fancy"] {
        background-size: 300% 300%;
        animation: fancyGradient calc(7s / var(--fancy-speed-mult)) ease infinite;
    }

    [data-theme="fancy"] .fancy-orb-1 {
        animation: fancyOrbDrift1Mobile calc(4s / var(--fancy-speed-mult)) ease-in-out infinite alternate;
        width: 200px;
        height: 200px;
    }

    [data-theme="fancy"] .fancy-orb-2 {
        animation: fancyOrbDrift2Mobile calc(5s / var(--fancy-speed-mult)) ease-in-out infinite alternate;
        width: 180px;
        height: 180px;
    }

    [data-theme="fancy"] .fancy-orb-3 {
        animation: fancyOrbDrift3Mobile calc(3s / var(--fancy-speed-mult)) ease-in-out infinite alternate;
        width: 150px;
        height: 150px;
    }
}

@keyframes fancyOrbDrift1Mobile {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(120px, 100px) scale(1.3);
    }

    100% {
        transform: translate(-60px, 150px) scale(0.8);
    }
}

@keyframes fancyOrbDrift2Mobile {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-100px, -80px) scale(1.2);
    }

    100% {
        transform: translate(80px, -140px) scale(0.85);
    }
}

@keyframes fancyOrbDrift3Mobile {
    0% {
        transform: translate(-50%, 0) scale(0.9);
    }

    50% {
        transform: translate(-20%, -70px) scale(1.2);
    }

    100% {
        transform: translate(-80%, 90px) scale(0.95);
    }
}

/* Fancy Glass Panel Override */
[data-theme="fancy"] .glass-panel {
    background: rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid;
    border-image: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.12)) 1;
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Fix: border-image breaks border-radius, use a wrapper approach with solid border */
[data-theme="fancy"] .glass-panel {
    border-image: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

[data-theme="fancy"] .glass-panel::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.15));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

/* Fancy List Column */
[data-theme="fancy"] .list-column {
    background: rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

/* Antigravity Hover: Lift & Glow */
[data-theme="fancy"] .task-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;
}

[data-theme="fancy"] .task-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(129, 140, 248, 0.3);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.15), 0 0 15px rgba(99, 102, 241, 0.08);
}

/* Fancy Buttons Base Refinement */
[data-theme="fancy"] .btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    letter-spacing: 0.02em;
    position: relative;
    overflow: hidden;
}

[data-theme="fancy"] .btn:active {
    transform: scale(0.96) !important;
}

/* Fancy Buttons: Condensed Light Neon */
[data-theme="fancy"] .btn.primary {
    background: linear-gradient(135deg, rgba(129, 140, 248, 0.8), rgba(167, 139, 250, 0.8));
    background-size: 200% 200%;
    animation: neonShift 4s ease infinite;
    backdrop-filter: blur(8px);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 20px rgba(129, 140, 248, 0.3),
        0 0 40px rgba(129, 140, 248, 0.05),
        inset 0 0 12px rgba(255, 255, 255, 0.2);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

/* Specific Glassmorphism for Add Task Button inside form */
[data-theme="fancy"] .add-task-form .btn.primary {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(129, 140, 248, 0.4);
    color: #818cf8;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    padding: 0;
}

[data-theme="fancy"] .add-task-form .btn.primary:hover {
    background: rgba(129, 140, 248, 0.15);
    border-color: #818cf8;
    color: #ffffff;
    box-shadow: 0 0 15px rgba(129, 140, 248, 0.4);
}

[data-theme="fancy"] .btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 35px rgba(129, 140, 248, 0.6),
        0 0 15px rgba(129, 140, 248, 0.4),
        inset 0 0 15px rgba(255, 255, 255, 0.35);
    filter: brightness(1.1);
}

@keyframes neonShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

[data-theme="fancy"] .btn.secondary,
[data-theme="fancy"] #modal-add-image-btn {
    background: rgba(255, 255, 255, 0.08);
    /* Translucent, no blur */
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

[data-theme="fancy"] .btn.secondary:hover,
[data-theme="fancy"] #modal-add-image-btn:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(129, 140, 248, 0.35);
}

[data-theme="fancy"] .btn.danger {
    background: linear-gradient(135deg, #f87171, #ef4444);
    box-shadow: 0 0 20px rgba(248, 113, 113, 0.35),
        inset 0 0 10px rgba(255, 255, 255, 0.15);
}

[data-theme="fancy"] .btn.danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 35px rgba(248, 113, 113, 0.55),
        inset 0 0 15px rgba(255, 255, 255, 0.2);
}

/* Fancy Menu Action Items */
[data-theme="fancy"] .menu-action-item {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="fancy"] .menu-action-item:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(129, 140, 248, 0.3);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Fancy Toggle Items */
[data-theme="fancy"] .dropdown-item-toggle {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="fancy"] .mode-btn.active {
    background: rgba(129, 140, 248, 0.25);
    color: #ffffff;
    box-shadow: 0 0 15px rgba(129, 140, 248, 0.2),
        inset 0 0 8px rgba(255, 255, 255, 0.1);
    font-weight: 700;
}

[data-theme="fancy"] .toggle-group {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    padding: 3px;
}

/* Fancy Modal Override */
[data-theme="fancy"] .modal-overlay {
    background: rgba(5, 2, 15, 0.8);
    backdrop-filter: blur(8px);
}

[data-theme="fancy"] .confirm-box {
    background: rgba(15, 10, 30, 0.6);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6), 0 0 40px rgba(99, 102, 241, 0.08);
}

/* Fancy Input */
[data-theme="fancy"] .add-task-input {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    transition: border-color 0.3s, box-shadow 0.3s;
}

[data-theme="fancy"] .add-task-input:focus {
    border-color: rgba(129, 140, 248, 0.5);
    box-shadow: 0 0 15px rgba(129, 140, 248, 0.15);
}

/* Fancy Scrollbar */
[data-theme="fancy"] .task-list::-webkit-scrollbar-thumb {
    background-color: rgba(129, 140, 248, 0.3);
}

[data-theme="fancy"] .task-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
}

[data-theme="fancy"] .board-container::-webkit-scrollbar-thumb {
    background: rgba(129, 140, 248, 0.3);
}

/* Fancy Checkbox */
[data-theme="fancy"] .task-checkbox {
    border-color: rgba(129, 140, 248, 0.4);
}

[data-theme="fancy"] .task-checkbox:checked {
    border-color: #818cf8;
}

[data-theme="fancy"] .task-checkbox::before {
    background: linear-gradient(135deg, #818cf8, #a78bfa);
}

/* Fancy Toast */
[data-theme="fancy"] .toast {
    background: rgba(15, 10, 30, 0.85);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(129, 140, 248, 0.2);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(99, 102, 241, 0.1);
}

/* Fancy Login */
[data-theme="fancy"] #google-login-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(129, 140, 248, 0.3);
    box-shadow: 0 0 25px rgba(129, 140, 248, 0.3);
    animation: fancyGlowPulse 3s infinite alternate;
}

[data-theme="fancy"] #google-login-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(129, 140, 248, 0.5);
    background: rgba(129, 140, 248, 0.1);
}

@keyframes fancyGlowPulse {
    from {
        box-shadow: 0 0 15px rgba(129, 140, 248, 0.25);
    }

    to {
        box-shadow: 0 0 35px rgba(129, 140, 248, 0.5);
    }
}

/* Fancy Icon Btn */
[data-theme="fancy"] .icon-btn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="fancy"] .icon-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #818cf8;
    transform: scale(1.1);
}

/* Specific Glass Look for Task Actions */
[data-theme="fancy"] .edit-task-btn,
[data-theme="fancy"] .archive-task-btn,
[data-theme="fancy"] .unarchive-task-btn,
[data-theme="fancy"] .delete-task-btn {
    background: rgba(255, 255, 255, 0.08);
    /* Translucent, no blur */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    margin-left: 4px;
}

[data-theme="fancy"] .icon-btn:active {
    transform: scale(0.9);
}

[data-theme="fancy"] .icon-btn-large:hover {
    color: #818cf8;
    filter: drop-shadow(0 0 8px rgba(129, 140, 248, 0.6));
}

/* Fancy Glass Select */
[data-theme="fancy"] .glass-select {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="fancy"] .glass-select:focus {
    border-color: rgba(129, 140, 248, 0.4);
    box-shadow: 0 0 10px rgba(129, 140, 248, 0.1);
}

/* Fancy Orphan List */
[data-theme="fancy"] .list-column.orphan-list {
    border-color: rgba(248, 113, 113, 0.3);
    background: rgba(248, 113, 113, 0.03);
}

/* Fancy Header App */
[data-theme="fancy"] .app-header {
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

/* Fancy Slider Toggle Switches */
[data-theme="fancy"] input:checked+.slider-small {
    background-color: #818cf8;
    box-shadow: 0 0 10px rgba(129, 140, 248, 0.4);
}

/* Fancy Total Count Badge */
[data-theme="fancy"] .total-count-badge {
    background: rgba(129, 140, 248, 0.1);
    border-color: rgba(129, 140, 248, 0.2);
    color: #a5b4fc;
}

/* Fancy Sync Pill */
[data-theme="fancy"] .sync-pill {
    background: rgba(15, 10, 30, 0.8);
    backdrop-filter: blur(16px);
    border-color: rgba(129, 140, 248, 0.15);
}

/* Fancy Location Item */
[data-theme="fancy"] .location-item {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

/* Fancy Task Metadata */
[data-theme="fancy"] .task-metadata {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

/* Fancy Floating Action Bar */
[data-theme="fancy"] .floating-action-bar {
    background: rgba(15, 10, 30, 0.85);
    backdrop-filter: blur(20px);
    border-color: rgba(129, 140, 248, 0.2);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(99, 102, 241, 0.1);
}

/* Fancy Board Dropdown */
[data-theme="fancy"] .board-dropdown-menu {
    background: rgba(10, 5, 25, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6);
}

[data-theme="fancy"] .board-item:hover {
    background: rgba(129, 140, 248, 0.1);
}

[data-theme="fancy"] .board-item.active {
    background: rgba(129, 140, 248, 0.15);
    color: #818cf8;
}

/* Fancy Mobile Reorder */
[data-theme="fancy"] .mobile-reorder-list-item {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Fancy Search Badge */
[data-theme="fancy"] .search-context-badge {
    background: rgba(129, 140, 248, 0.15);
    color: #a5b4fc;
    border-color: rgba(129, 140, 248, 0.25);
}

/* Fancy Auto-Moved */
[data-theme="fancy"] .auto-moved-recently {
    border-left-color: #3464d3 !important;
    background-color: rgba(52, 211, 153, 0.05) !important;
}

/* Fancy Slider Container (Slide to Delete) */
[data-theme="fancy"] .slider-container {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="fancy"] .slider-handle {
    background: linear-gradient(135deg, #818cf8, #a78bfa);
    color: #ffffff;
    box-shadow: 0 0 15px rgba(129, 140, 248, 0.4),
        inset 0 0 8px rgba(255, 255, 255, 0.2);
}

[data-theme="fancy"] .slider-handle:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* Fancy Toggle Switch Track: Thicker with modern encapsulated look */
[data-theme="fancy"] .switch-small {
    width: 44px;
    height: 24px;
}

[data-theme="fancy"] .slider-small {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="fancy"] .slider-small:before {
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 3px;
    background: #e8e6f0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

[data-theme="fancy"] input:checked+.slider-small {
    background-color: rgba(129, 140, 248, 0.35);
    border-color: rgba(129, 140, 248, 0.5);
    box-shadow: 0 0 15px rgba(129, 140, 248, 0.2);
}

[data-theme="fancy"] input:checked+.slider-small:before {
    transform: translateX(20px);
    background: #ffffff;
    box-shadow: 0 0 10px rgba(129, 140, 248, 0.6);
}

/* Mobile Fancy Scrollbar */
@media (max-width: 600px) {
    [data-theme="fancy"] .task-list::-webkit-scrollbar-thumb {
        background-color: rgba(129, 140, 248, 0.4);
    }

    [data-theme="fancy"] .task-list::-webkit-scrollbar-track,
    [data-theme="fancy"] .task-list::-webkit-scrollbar {
        background: rgba(129, 140, 248, 0.03);
    }

    [data-theme="fancy"] .board-container::-webkit-scrollbar {
        background: rgba(129, 140, 248, 0.03);
    }

    [data-theme="fancy"] .board-container::-webkit-scrollbar-thumb {
        background-color: rgba(129, 140, 248, 0.4);
    }
}

/* Fancy Project Title */
[data-theme="fancy"] .project-title-input:hover {
    background: rgba(129, 140, 248, 0.05);
    border-color: rgba(129, 140, 248, 0.15);
}

[data-theme="fancy"] .project-title-input:focus {
    background: rgba(255, 255, 255, 0.04);
    border-color: #818cf8;
    box-shadow: 0 0 15px rgba(129, 140, 248, 0.15);
}

/* Fancy Color Btn */
[data-theme="fancy"] .color-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-theme="fancy"] .color-btn:hover {
    transform: scale(1.2) translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3),
        0 0 10px rgba(129, 140, 248, 0.2);
    border-color: rgba(129, 140, 248, 0.3);
}

/* Fancy Archived Task */
[data-theme="fancy"] .task-card.archived-task:hover {
    background: rgba(129, 140, 248, 0.06);
}

[data-theme="fancy"] .task-card.archived-task .icon-btn {
    background: rgba(129, 140, 248, 0.1);
}

/* Fancy Multi Edit */
[data-theme="fancy"] .multi-edit-active .task-card.selected {
    background: rgba(129, 140, 248, 0.2) !important;
    border: 1px solid rgba(129, 140, 248, 0.5) !important;
    box-shadow: 0 0 20px rgba(129, 140, 248, 0.15);
}

/* z-index for orbs to be behind everything */
[data-theme="fancy"] .app-wrapper {
    position: relative;
    z-index: 1;
}

[data-theme="fancy"] #main-nav-placeholder {
    position: relative;
    z-index: 2001;
}

[data-theme="fancy"] #login-overlay {
    background: var(--bg-gradient);
    background-size: 300% 300%;
    animation: fancyGradient 20s ease infinite;
}

/* Ensure no white gap ever shows behind the app on iOS (top, bottom, sides) */
html {
    background: #000000;
}

body {
    background: var(--bg-gradient);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    color: var(--text-primary);
    font-family: 'Inter', 'Segoe UI', sans-serif;
    margin: 0;
    display: flex;
    flex-direction: column;
    /* Use 100dvh so the full body fits on screen including safe areas */
    height: 100dvh;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    /* Push content below the iOS status bar, clear the home indicator at the bottom */
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
}

#main-nav-placeholder {
    flex-shrink: 0;
    z-index: 2000;
}

.app-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Removed padding-top: 0 — body now handles the safe-area offset */
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
}

.app-header {
    margin: 10px 20px;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    z-index: 10;
    flex-shrink: 0;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.project-title-input {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-primary);
    font-size: 1.4rem;
    font-weight: 700;
    font-family: inherit;
    padding: 5px;
    border-radius: 8px;
    width: 100%;
    max-width: 300px;
    transition: all 0.2s;
}

.project-title-input:hover {
    border-color: var(--glass-border);
    background: rgba(255, 255, 255, 0.05);
}

.project-title-input:focus {
    outline: none;
    background: var(--input-bg);
    border-color: var(--accent-blue);
}

.total-count-badge {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    font-size: 0.9rem;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 600;
}

[data-theme="light"] .total-count-badge {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
}

.list-count-badge {
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 5px;
    flex-shrink: 0;
}

[data-theme="light"] .list-count-badge {
    background: rgba(0, 0, 0, 0.08);
}

.list-count-badge.all-done {
    background-color: #22c55e !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
}

.empty-list-msg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 10px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    opacity: 0.5;
    font-style: italic;
    gap: 10px;
    text-align: center;
}

.empty-list-msg i {
    font-size: 1.8rem;
    margin-bottom: 5px;
}

.clean-list-btn {
    opacity: 0.7;
}

.clean-list-btn:hover {
    opacity: 1;
    color: #22c55e !important;
}

.header-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.btn {
    padding: 8px 14px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    flex-shrink: 0;
}

.btn.primary {
    background: var(--accent-blue);
    color: white;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
}

.btn.secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
}

[data-theme="light"] .btn.secondary {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .btn.secondary:hover {
    background: rgba(0, 0, 0, 0.1);
}

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

.icon-btn-large {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 5px;
    border-radius: 50%;
}

.icon-btn-large.active {
    color: var(--accent-blue);
}

.toggle-group {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 4px;
    display: flex;
    align-items: center;
    gap: 2px;
}

[data-theme="light"] .toggle-group {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid var(--glass-border);
}

.toggle-group .label {
    font-size: 0.75rem;
    margin-left: 6px;
    margin-right: 4px;
    color: var(--text-secondary);
}

.mode-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
}

.mode-btn.active {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
    font-weight: bold;
}

[data-theme="light"] .mode-btn.active {
    background: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.glass-select {
    background: rgba(0, 0, 0, 0.2);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
    padding: 6px 10px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.85rem;
    outline: none;
    cursor: pointer;
}

/* Board Dropdown */
.board-dropdown {
    position: relative;
    display: inline-block;
}

.board-dropdown-btn {
    gap: 8px;
    min-width: 140px;
    justify-content: space-between !important;
}

.board-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    padding: 8px;
    background: var(--dropdown-bg-glass);
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    animation: fadeInScale 0.2s ease-out;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.board-item {
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.board-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.board-item.active {
    background: rgba(59, 130, 246, 0.2);
    color: var(--accent-blue);
    font-weight: 600;
}

.board-item i {
    font-size: 1.1rem;
    opacity: 0.8;
}

.board-dropdown-divider {
    height: 1px;
    background: var(--glass-border);
    margin: 4px 0;
}

.board-action-item {
    color: var(--accent-blue);
    font-weight: 600;
}

/* Board Manager Modal Styling */
#board-list-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px;
}

#board-list-container .board-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    padding: 14px 18px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s;
    cursor: pointer;
    font-size: 1rem;
}

#board-list-container .board-item:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-blue);
    transform: translateY(-2px);
}

#board-list-container .board-item.active {
    background: rgba(59, 130, 246, 0.15);
    border-color: var(--accent-blue);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);
}

#board-list-container .board-item.active span {
    color: var(--accent-blue);
    font-weight: 700;
}

#board-list-container .board-item i {
    font-size: 1.25rem;
    color: var(--text-secondary);
}

#board-list-container .board-item.active i {
    color: var(--accent-blue);
}

#board-list-container .mini-delete {
    opacity: 0.6;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: var(--accent-red);
    padding: 8px !important;
    border-radius: 8px;
}

#board-list-container .mini-delete:hover {
    background: var(--accent-red);
    color: white;
    opacity: 1;
}

/* Board Statistics Layout */
.board-item-details {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.board-title {
    font-size: 1.1rem;
    color: var(--text-primary);
}

.board-stats {
    display: flex;
    flex-wrap: wrap;
    row-gap: 4px;
    column-gap: 12px;
}

@media (max-width: 450px) {
    #board-list-container .board-item {
        padding: 12px 15px;
    }

    .board-stats {
        gap: 8px;
    }

    .board-stats span {
        font-size: 0.7rem;
    }
}

/* Add Board Input Styling */
#new-board-title-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--input-bg);
    border: 2px solid var(--input-border);
    color: var(--text-primary);
    border-radius: 12px;
    transition: all 0.3s;
}

#new-board-title-input:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
    outline: none;
}

[data-theme="light"] .glass-select {
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(0, 0, 0, 0.1);
}

.board-container {
    flex-grow: 1;
    display: flex;
    gap: 15px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 20px;
    align-items: flex-start;
}

.board-container::-webkit-scrollbar {
    height: 8px;
}

.board-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

[data-theme="light"] .board-container::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
}

.list-column {
    min-width: 300px;
    max-width: 300px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(20px);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    max-height: calc(100% - 10px);
    flex-shrink: 0;
}

.list-column.orphan-list {
    border: 1px dashed var(--accent-red);
    background: rgba(20, 0, 0, 0.3);
}

[data-theme="light"] .list-column.orphan-list {
    background: rgba(255, 0, 0, 0.05);
}

.list-header {
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.list-header-left {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-grow: 1;
}

.list-drag-handle {
    cursor: grab;
    color: var(--text-secondary);
    opacity: 0.5;
    padding: 2px;
}

.list-drag-handle:hover {
    opacity: 1;
    color: var(--text-primary);
}

.list-header-right {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.list-title {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 700;
    width: 100%;
    min-width: 0;
    /* Critical for flex shrinking */
}

.list-title {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 700;
    width: 100%;
}

.list-title:focus {
    outline: none;
    border-bottom: 2px solid var(--accent-blue);
}

.confirm-box {
    text-align: center;
    padding: 35px 30px;
    max-width: 380px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(59, 130, 246, 0.15);
    background: rgba(15, 15, 15, 0.5);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
}

[data-theme="light"] .confirm-box {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.confirm-icon-area {
    font-size: 4rem;
    margin-bottom: 24px;
    color: var(--accent-blue);
    display: flex;
    justify-content: center;
    filter: drop-shadow(0 0 15px currentColor);
    opacity: 0.9;
}

.confirm-box h2 {
    margin-bottom: 12px;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-primary);
}

.confirm-box p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 30px;
    font-size: 1rem;
    opacity: 0.85;
}

.centered-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.centered-actions .btn {
    min-width: 120px;
    padding: 12px 20px;
}

.task-list {
    padding: 10px;
    overflow-y: auto;
    flex-grow: 1;
    min-height: 50px;
    -webkit-overflow-scrolling: touch;
}

/* Thicker Scrollbar for Lists */
.task-list::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 16px;
}

.task-list::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    border: 4px solid transparent;
    background-clip: content-box;
}

.task-list::-webkit-scrollbar-track {
    background: transparent;
}

[data-theme="light"] .task-list::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
}

/* TASK CARDS */
.task-card {
    background: var(--card-bg);
    padding: 4px 8px;
    margin-bottom: 8px;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: grab;
    transition: box-shadow 0.2s, border-color 0.2s;
    /* Removed transform transition */
    border: 1px solid transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

.task-card:hover {
    border-color: var(--glass-border);
}

[data-theme="light"] .task-card {
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* --- DRAG FIX STYLES --- */
.sortable-ghost {
    opacity: 0.4;
    background: rgba(0, 0, 0, 0.1);
    border: 1px dashed var(--text-secondary);
}

.sortable-fallback {
    opacity: 1 !important;
    background: var(--glass-bg);
    border: 2px solid var(--accent-blue);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
    cursor: grabbing;
    pointer-events: none;

    /* CRITICAL FIXES FOR MOUSE TRACKING */
    position: fixed !important;
    /* Detaches from the lists completely */
    z-index: 99999 !important;
    /* Floats above everything */
    left: 0;
    top: 0;
    /* Do NOT set transform: none here, Sortable needs to set it inline */
    will-change: transform;
}

.task-card.linked-task {
    background: var(--card-linked-bg);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.task-card.archived-task {
    background: var(--card-archived-bg);
    border: 1px dashed var(--text-secondary);
    opacity: 0.9;
    /* Allow touch interactions for archived tasks since they need the unarchive button */
    touch-action: auto;
    cursor: default;
}

.task-card.archived-task .task-text {
    text-decoration: line-through;
    opacity: 0.7;
}

/* Hover effect to hint interactivity */
.task-card.archived-task:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--glass-border);
}

[data-theme="light"] .task-card.archived-task:hover {
    background: rgba(0, 0, 0, 0.08);
}

/* Ensure archived task action buttons are always visible and touchable */
.task-card.archived-task .task-actions {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 10;
    /* Ensure it sits above any overlays */
}

.task-card.archived-task .icon-btn {
    pointer-events: auto !important;
    touch-action: manipulation;
    /* Prevent zoom delay but allow tap */

    /* Make buttons larger and more distinct everywhere for archived tasks */
    padding: 10px;
    margin-left: 5px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

[data-theme="light"] .task-card.archived-task .icon-btn {
    background: rgba(0, 0, 0, 0.05);
}

.task-card.important {
    background: var(--card-important-bg);
    border: 1px solid var(--card-important-border);
}

.task-number {
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--text-secondary);
    margin-top: 3px;
    min-width: 18px;
}

.task-checkbox {
    appearance: none;
    width: 32px;
    height: 32px;
    border: 3px solid var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    margin-top: 0;
    /* Adjusted alignment for larger box */
    display: grid;
    place-content: center;
    flex-shrink: 0;
}

.task-checkbox::before {
    content: "";
    width: 20px;
    height: 20px;
    transform: scale(0);
    background: var(--accent-blue);
    border-radius: 4px;
    transition: 0.1s;
}

.task-checkbox:checked {
    border-color: var(--accent-blue);
}

.task-checkbox:checked::before {
    transform: scale(1);
}

.task-content-wrapper {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.task-text {
    font-size: 0.9rem;
    line-height: 1.35;
    word-break: break-word;
    white-space: pre-wrap;
}

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

.task-images {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    margin-bottom: 2px;
}

.task-img-preview {
    width: 45px;
    height: 45px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--glass-border);
    cursor: pointer;
}

.task-actions {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-left: 2px;
    opacity: 0;
    transition: opacity 0.2s;
    align-self: flex-start;
    flex-shrink: 0;
    pointer-events: none;
    /* Prevent accidental clicks when hidden */
}

/* DESKTOP HOVER */
@media (hover: hover) {
    .task-card:hover .task-actions {
        opacity: 1;
        pointer-events: auto;
    }
}

/* MOBILE TOUCH REVEAL */
@media (hover: none) {
    .task-actions {
        display: none;
        /* Completely remove from layout by default on mobile */
    }

    .task-card.show-actions .task-actions {
        display: flex;
        opacity: 1;
        pointer-events: auto;
    }

    /* Make actions vertical on mobile if shown to save width */
    .task-card.show-actions .task-actions {
        flex-direction: column;
        gap: 4px;
        margin-left: 10px;
    }
}

.task-card.vertical-actions .task-actions {
    flex-direction: column;
    gap: 4px;
}

.icon-btn {
    font-size: 1.2rem;
    padding: 4px;
    color: var(--text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 6px;
}

.icon-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.1);
}

.edit-task-btn {
    background: rgba(79, 79, 79, 0.777) !important;
    color: #ffffff !important;
}

.edit-task-btn:hover {
    background: rgba(109, 109, 109, 0.617) !important;
}

.add-image-btn {
    background: rgba(0, 123, 255, 0.1) !important;
    color: #ffffff !important;
}

.add-image-btn:hover {
    background: rgba(0, 123, 255, 0.1) !important;
}

.archive-task-btn {
    background: rgba(23, 23, 23, 0.617) !important;
    color: #ffffff !important;
}

.archive-task-btn:hover {
    background: rgba(63, 63, 63, 0.617) !important;
}


.add-task-container {
    padding: 12px;
    border-top: 1px solid var(--glass-border);
}

.add-task-container.add-v-top {
    border-bottom: 1px solid var(--glass-border);
}

.add-task-form {
    display: flex;
    gap: 8px;
}

.add-task-input {
    flex-grow: 1;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    padding: 8px;
    border-radius: 6px;
    font-size: 16px;
}

[data-theme="light"] .add-task-input {
    background: rgba(0, 0, 0, 0.05);
}

/* Archive View Clarity */
body.is-archived-view .app-header {
    background: rgba(75, 54, 33, 0.6) !important;
    border-color: #4b3621 !important;
    box-shadow: 0 0 20px rgba(75, 54, 33, 0.4) !important;
}

body.is-archived-view .project-title-input {
    color: #facc15 !important;
}

.archive-view-badge {
    background: #4b3621;
    color: #facc15;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 2px solid #facc15;
    animation: pulse-gold 2s infinite;
    position: fixed;
    bottom: calc(20px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 2000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

@keyframes pulse-gold {
    0% {
        box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(250, 204, 21, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(250, 204, 21, 0);
    }
}

.options-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 20px;
    /* Extra space at bottom */
    overflow-y: auto;
    /* Content scrollable */
    flex: 1;
    /* Take up remaining space */
    scrollbar-width: thin;
    /* For Firefox */
}

/* Custom Scrollbar for Options List */
.options-list::-webkit-scrollbar {
    width: 6px;
}

.options-list::-webkit-scrollbar-thumb {
    background: rgba(129, 140, 248, 0.3);
    border-radius: 10px;
}

.options-list::-webkit-scrollbar-track {
    background: transparent;
}

.menu-action-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 1rem;
    font-family: inherit;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
}

[data-theme="light"] .menu-action-item {
    background: rgba(0, 0, 0, 0.05);
}

.menu-action-item.danger-text {
    color: var(--accent-red);
    border-color: rgba(239, 68, 68, 0.3);
}

.menu-action-item.danger-text:hover {
    background: rgba(239, 68, 68, 0.1);
}

.dropdown-divider {
    border: 0;
    border-top: 1px solid var(--glass-border);
    margin: 5px 0;
}

.dropdown-item-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    cursor: pointer;
    color: var(--text-primary);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--glass-border);
}

[data-theme="light"] .dropdown-item-toggle {
    background: rgba(0, 0, 0, 0.05);
}

.switch-small {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
}

.switch-small input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider-small {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #555;
    transition: .4s;
}

.slider-small:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
}

input:checked+.slider-small {
    background-color: var(--accent-blue);
}

input:checked+.slider-small:before {
    transform: translateX(16px);
}

.slider-small.round {
    border-radius: 34px;
}

.slider-small.round:before {
    border-radius: 50%;
}

.task-metadata {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    border: 1px solid var(--glass-border);
}

[data-theme="light"] .task-metadata {
    background: rgba(0, 0, 0, 0.03);
}

.timestamp-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.timestamp-label {
    font-weight: 600;
}

.timestamp-value {
    color: var(--text-primary);
    opacity: 0.9;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 3000;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

#confirm-modal-overlay,
#reset-modal-overlay,
#backup-reminder-modal-overlay {
    z-index: 4000;
    /* Higher than regular modal overlays */
}

/* No Blur for Search List Modal so we can see reordered lists */
#search-list-modal-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0, 0, 0, 0.1);
    /* Very subtle overlay to keep focus but allow visibility */
    pointer-events: auto;
    /* Ensure clicks still work */
}

/* VERSION INDICATOR */
.app-version {
    position: fixed;
    bottom: 5px;
    right: 5px;
    font-size: 0.7rem;
    color: var(--text-secondary);
    opacity: 0.5;
    z-index: 9999;
    pointer-events: none;
    font-family: monospace;
}

.modal {
    width: 90%;
    max-width: 450px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-height: 90vh;
    /* Slightly taller */
    overflow: hidden;
    /* Scroll handled by children */
}

.modal-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-shrink: 0;
    /* Keep title fixed */
}

.modal-header-row h2 {
    margin: 0;
    font-size: 1.2rem;
}

#modal-task-input,
#bulk-add-input {
    width: 100%;
    background: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--input-border);
    padding: 12px;
    border-radius: 12px;
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
    transition: border 0.2s;
}

#modal-task-input:focus,
#bulk-add-input:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.modal-actions-bar {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 5px;
}

.modal-divider {
    border-top: 1px solid var(--glass-border);
    margin: 15px 0;
}

.manual-move-section h3 {
    margin: 0 0 10px 0;
    font-size: 0.95rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.color-picker-section h3 {
    margin: 0 0 10px 0;
    font-size: 0.95rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.color-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.color-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    background: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: transform 0.2s;
}

.color-btn:hover {
    transform: scale(1.1);
    border-color: white;
}

.current-locations-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 20px;
}

.location-tag {
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
}

.full-width {
    width: 100%;
}

.move-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.move-buttons {
    display: flex;
    gap: 10px;
}

.move-buttons .btn {
    flex: 1;
}



.floating-action-bar {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--dropdown-bg-glass);
    padding: 15px 25px;
    border-radius: 50px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 2500;
    backdrop-filter: blur(12px);
    animation: floatUp 0.3s ease-out;
}



.color-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

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

.color-btn.selected {
    border-color: white;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.current-locations-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
}

.location-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
}

[data-theme="light"] .location-item {
    background: rgba(0, 0, 0, 0.05);
}

.location-name {
    font-weight: 500;
    font-size: 0.9rem;
}

.location-remove-btn {
    color: var(--text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.location-remove-btn:hover {
    color: var(--accent-red);
}

.move-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.full-width {
    width: 100%;
}

.move-buttons {
    display: flex;
    gap: 10px;
}

.move-buttons .btn {
    flex: 1;
    font-size: 0.85rem;
}

.image-modal-content {
    position: relative;
    max-width: 95%;
    max-height: 95%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#full-size-image {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 8px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

.slider-container {
    position: relative;
    width: 100%;
    height: 50px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 25px;
    border: 1px solid var(--glass-border);
    margin-top: 10px;
    overflow: hidden;
    touch-action: none;
    transition: border-color 0.3s, background 0.3s;
}

.slider-container.unlocked {
    border-color: var(--accent-red);
    background: rgba(239, 68, 68, 0.1);
}

.slider-container.unlocked .slider-text {
    color: var(--accent-red);
    font-weight: bold;
}

.slider-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
    pointer-events: none;
    transition: opacity 0.2s;
}

.slider-track {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-handle {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 46px;
    height: 46px;
    background: var(--text-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 1.2rem;
    cursor: grab;
}

@media (max-width: 600px) {
    .app-header {
        padding: 10px;
    }

    h1 {
        font-size: 1.2rem;
    }

    .header-controls {
        gap: 8px;
        width: 100%;
        justify-content: space-between;
        margin-top: 5px;
    }

    .control-item {
        margin-bottom: 5px;
    }

    .list-column {
        min-width: 85vw;
        max-width: 85vw;
    }

    .board-container {
        scroll-snap-type: x mandatory;
        padding-left: 10px;
        padding-right: 10px;
    }

    .list-column {
        scroll-snap-align: center;
    }

    /* Slim Mobile Compact Header */
    @media (max-width: 450px) {
        .app-header {
            margin: 5px 10px;
            padding: 8px 10px;
            gap: 5px;
        }

        .header-left {
            gap: 8px;
        }

        .project-title-input {
            font-size: 1.1rem;
            max-width: 150px;
        }

        .header-controls {
            gap: 4px;
        }

        .btn {
            padding: 6px 10px;
            font-size: 0.75rem;
            border-radius: 6px;
        }

        .icon-btn-large {
            font-size: 1.2rem;
            padding: 4px;
        }

        .toggle-group {
            padding: 2px;
            gap: 1px;
        }

        .toggle-group .label {
            display: none;
        }

        .mode-btn {
            padding: 3px 6px;
            font-size: 0.7rem;
        }

        .glass-select {
            padding: 4px;
            font-size: 0.75rem;
        }

        .total-count-badge {
            font-size: 0.75rem;
            padding: 2px 6px;
        }
    }
}

.hidden {
    display: none !important;
}

/* --- LOGIN OVERLAY --- */
#login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--bg-gradient);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

#login-overlay h1 {
    font-size: 3rem;
    margin: 0;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

#google-login-btn {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    padding: 12px 24px;
    border-radius: 24px;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--glass-border);
    cursor: pointer;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    animation: glowPulseBtn 2s infinite alternate;
}

#google-login-btn:hover {
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.8);
}

@keyframes glowPulseBtn {
    from {
        box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
    }

    to {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.7);
    }
}

[data-theme="light"] #google-login-btn {
    background: white;
    color: #333;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    animation: none;
}

[data-theme="light"] #google-login-btn:hover {
    transform: scale(1.05);
    background: white;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

#logout-btn {
    margin-left: 10px;
    font-weight: bold;
    color: var(--accent-red);
}


/* --- SYNC INDICATOR --- */
.sync-indicator {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    transition: opacity 0.3s;
}

.sync-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 50px;
    /* Pill shape */
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.sync-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ccc;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s, box-shadow 0.3s;
}

.sync-dot.active {
    background: var(--accent-blue);
    box-shadow: 0 0 8px var(--accent-blue);
}

.sync-dot.online {
    background: #22c55e;
    /* Green */
    box-shadow: 0 0 8px #22c55e;
}

.sync-dot.offline {
    background: #ef4444;
    /* Red */
    box-shadow: 0 0 8px #ef4444;
}

.sync-dot.syncing {
    background: #eab308;
    /* Yellow */
    box-shadow: 0 0 8px #eab308;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

/* --- SEARCH STYLES --- */
.search-context-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    background: rgba(59, 130, 246, 0.2);
    color: var(--accent-blue);
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 8px;
    flex-shrink: 0;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.search-context-badge i {
    font-size: 0.8rem;
}

[data-theme="light"] .search-context-badge {
    background: rgba(59, 130, 246, 0.1);
}

#search-results-container {
    padding-right: 5px;
    /* Scrollbar space */
}

#search-results-container .task-card {
    cursor: default;
    /* No drag in search */
}

/* --- RESET MODAL: BACKUP REQUIRED STYLES --- */
.backup-reminder {
    color: var(--accent-red);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    margin-bottom: 10px;
    font-weight: 500;
}

.backup-reminder.hidden {
    display: none !important;
}

.slider-container.disabled {
    opacity: 0.4;
    pointer-events: none;
    filter: grayscale(0.5);
}

.slider-container.disabled .slider-handle {
    cursor: not-allowed;
}

#reset-download-backup-btn i {
    font-size: 1.1rem;
}

#reset-download-backup-btn.downloaded {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.5);
    color: #22c55e;
}

#reset-download-backup-btn.downloaded:hover {
    background: rgba(34, 197, 94, 0.3);
}

.color-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.color-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    background: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: transform 0.2s;
}

.color-btn:hover {
    transform: scale(1.1);
    border-color: white;
}

.current-locations-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 20px;
}

.location-tag {
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
}

.full-width {
    width: 100%;
}

.move-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.move-buttons {
    display: flex;
    gap: 10px;
}

.move-buttons .btn {
    flex: 1;
}

/* --- MULTI EDIT MODE --- */
.multi-edit-active .task-checkbox {
    pointer-events: none;
    opacity: 0.3;
    filter: grayscale(100%);
}

.multi-edit-active .task-actions {
    display: none !important;
}

.multi-edit-active .task-card {
    cursor: pointer;
}

.multi-edit-active .task-card:hover {
    background: var(--glass-bg);
    /* Highlight on hover to show clickability */
    border-color: var(--accent-blue);
}

.multi-edit-active .task-card.selected {
    background: rgba(168, 85, 247, 0.3) !important;
    border: 1px solid #a855f7 !important;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.2);
}

.floating-action-bar {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--dropdown-bg-glass);
    padding: 15px 25px;
    border-radius: 50px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 2500;
    backdrop-filter: blur(12px);
    animation: floatUp 0.3s ease-out;
    width: max-content;
    max-width: 90vw;
    box-sizing: border-box;
    justify-content: center;
}

@media (max-width: 480px) {
    .floating-action-bar {
        padding: 10px 15px;
        gap: 10px;
        width: 90%;
        justify-content: space-between;
    }
}

@keyframes floatUp {
    from {
        transform: translate(-50%, 50px);
        opacity: 0;
    }

    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

#multi-selected-count {
    font-weight: bold;
    color: var(--text-primary);
    font-size: 1.1rem;
}


#multi-edit-btn.active {
    background: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
}

/* Toggle Buttons for Multi-Edit */
.multi-select-all-btn {
    display: none;
}

.multi-edit-active .multi-select-all-btn {
    display: inline-flex;
    color: var(--accent-blue);
}

.multi-edit-active .list-action-btn {
    display: none;
    /* Hide Bulk Add / Delete List in multi mode */
}

/* --- MOBILE SCROLLBAR OVERRIDES --- */
@media (max-width: 600px) {

    .task-list {
        overflow-y: scroll !important;
        /* Force scrollbar visibility */
    }

    /* Force permanent and thick scrollbar on mobile lists */
    .task-list::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 14px;
        /* Extra thick for easy touch */
        background: rgba(0, 0, 0, 0.05);
        /* Slight track color to force persistence */
        border-radius: 8px;
        display: block;
    }

    .task-list::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.6);
        border-radius: 8px;
    }

    .task-list::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05);
        border-radius: 8px;
    }

    /* Light mode mobile scrollbar */
    [data-theme="light"] .task-list::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.4);
    }

    [data-theme="light"] .task-list::-webkit-scrollbar-track,
    [data-theme="light"] .task-list::-webkit-scrollbar {
        background: rgba(0, 0, 0, 0.05);
    }

    /* OLED mode mobile scrollbar */
    [data-theme="oled"] .task-list::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.7);
    }

    [data-theme="oled"] .task-list::-webkit-scrollbar-track,
    [data-theme="oled"] .task-list::-webkit-scrollbar {
        background: rgba(255, 255, 255, 0.05);
    }

    .board-container {
        overflow-x: scroll !important;
        /* Force scrollbar visibility */
    }

    /* Board Horizontal Scrollbar (Mobile) */
    .board-container::-webkit-scrollbar {
        -webkit-appearance: none;
        height: 12px;
        display: block;
        background: rgba(0, 0, 0, 0.05);
        border-radius: 6px;
    }

    .board-container::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.6);
        border-radius: 6px;
    }

    [data-theme="light"] .board-container::-webkit-scrollbar {
        background: rgba(0, 0, 0, 0.05);
    }

    [data-theme="light"] .board-container::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.4);
    }

    [data-theme="oled"] .board-container::-webkit-scrollbar {
        background: rgba(255, 255, 255, 0.05);
    }

    [data-theme="oled"] .board-container::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.7);
    }

    /* --- ARCHIVED TASK MOBILE FIXES --- */
    /* Handled globally now for better touch support on all devices */
}

/* --- TOAST NOTIFICATION --- */
.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    padding: 12px 24px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    font-weight: 500;
    color: var(--text-primary);
    animation: slideUpFade 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    min-width: 200px;
    justify-content: center;
}

[data-theme="oled"] .toast {
    background: #111;
    border: 1px solid #333;
}

.toast i {
    font-size: 1.2rem;
}

.toast.success {
    border-color: rgba(34, 197, 94, 0.5);
    background: rgba(34, 197, 94, 0.1);
    backdrop-filter: blur(12px);
}

.toast.success i {
    color: #22c55e;
}

.toast.warning {
    border-color: rgba(234, 179, 8, 0.5);
    background: rgba(234, 179, 8, 0.1);
}

.toast.warning i {
    color: #eab308;
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translate(-50%, 20px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* MOBILE REORDER FIXES */

.mobile-reorder-list-item {
    background: var(--card-bg);
    padding: 12px 15px;
    margin-bottom: 8px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--text-primary);
    cursor: grab;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

[data-theme="light"] .mobile-reorder-list-item {
    border-color: rgba(0, 0, 0, 0.1);
}

.mobile-reorder-list-item:active {
    cursor: grabbing;
}

/* AUTO-MOVED RECENTLY */
.auto-moved-recently {
    border-left: 3px solid #22c55e !important;
    background-color: rgba(34, 197, 94, 0.05) !important;
}

[data-theme="light"] .auto-moved-recently {
    background-color: rgba(34, 197, 94, 0.1) !important;
}




/* Force the body gradient to cover the bottom safe area in the Home Screen app */
@media all and (display-mode: standalone) {
    body {
        height: 100vh !important;
    }
}