/* ===== THEME CSS VARIABLES ===== */
:root {
    /* Light Mode (Default) */
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-tertiary: #e8e8e8;
    --bg-topbar: #ffffff;
    --text-primary: #1a1a1a;
    --text-secondary: #666666;
    --text-muted: #999999;
    --border-color: #dddddd;
    --border-light: #eeeeee;
    --icon-color: #555555;
    --icon-hover: #333333;
    --hover-bg: #f0f0f0;
    --inverse-scale: 1;
    /* Right sidebar width */
    --right-sidebar-width: 55px;
    /* Row alignment - shared between calendar weeks and task rows */
    --row-height: 36px;
    --row-gap: 1px;
    --row-unit: 37px;
    /* = row-height + row-gap, the fundamental grid unit */

    /* Calendar zoom multipliers (modified by zoom state classes) */
    --zoom-height-multiplier: 1;
    --zoom-width-multiplier: 1;
}

/* Dark Mode - Stitch-inspired cool-toned palette */
.dark-mode {
    --bg-primary: #0d0f17;
    --bg-secondary: #161923;
    --bg-tertiary: #1e2230;
    --bg-topbar: #161923;
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-color: #23283b;
    --border-light: #1e2230;
    --icon-color: #94a3b8;
    --icon-hover: #e2e8f0;
    --hover-bg: #1e2230;
    --accent-primary: #6366f1;
}

/* ===== ZEN FOCUS THEME ===== */
/* Neutral gray palette from Google Stitch design with JetBrains Mono font
   Uses pure gray spectrum for a minimalist, distraction-free aesthetic */
.theme-zen-focus {
    /* Zen Gray palette - pure neutral grays */
    --bg-primary: #0d0d0d;
    /* zen-950 - deepest black */
    --bg-secondary: #1a1a1a;
    /* zen-900 */
    --bg-tertiary: #333333;
    /* zen-800 */
    --bg-topbar: #1a1a1a;
    /* zen-900 */
    --text-primary: #e5e5e5;
    /* zen-100 */
    --text-secondary: #b3b3b3;
    /* zen-300 */
    --text-muted: #666666;
    /* zen-600 */
    --border-color: #333333;
    /* zen-800 */
    --border-light: #1a1a1a;
    /* zen-900 */
    --icon-color: #808080;
    /* zen-500 */
    --icon-hover: #cccccc;
    /* zen-200 */
    --hover-bg: #1a1a1a;
    /* zen-900 */
    --accent-primary: #6366f1;
    /* Keep existing accent */

    /* Zen Focus Font - JetBrains Mono */
    --font-primary: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}

/* Apply Zen Focus font and weight to body when theme is active */
.theme-zen-focus body,
body.theme-zen-focus {
    font-family: var(--font-primary);
}

/* Global font-weight: 400 for ALL elements in Zen Focus theme */
.theme-zen-focus *,
body.theme-zen-focus * {
    font-weight: 400 !important;
}

/* Zen Focus theme overrides for specific components */
.theme-zen-focus .task-item,
body.theme-zen-focus .task-item {
    font-family: var(--font-primary);
    border-radius: 0;
    /* Sharp 90-degree corners for minimalist look */
}

/* Zen Focus add task button - sharp corners and gray hover */
.theme-zen-focus .add-task-btn,
body.theme-zen-focus .add-task-btn {
    border-radius: 0;
    /* Sharp 90-degree corners for minimalist look */
}

.theme-zen-focus .add-task-btn:hover,
body.theme-zen-focus .add-task-btn:hover {
    color: #b3b3b3;
    /* zen-300 - neutral gray text on hover */
    background: rgba(77, 77, 77, 0.2);
    /* zen-600 with transparency - subtle gray background */
}

.theme-zen-focus .six-col-day-header,
body.theme-zen-focus .six-col-day-header {
    font-family: var(--font-primary);
    letter-spacing: 0.1em;
    font-weight: 400;
}

.theme-zen-focus .yearly-timeline-label,
body.theme-zen-focus .yearly-timeline-label {
    font-family: var(--font-primary);
    letter-spacing: 0.2em;
    font-weight: 400;
}

.theme-zen-focus .yearly-month-label,
body.theme-zen-focus .yearly-month-label {
    font-family: var(--font-primary);
    letter-spacing: 0.15em;
}

/* Zen Focus scrollbar styling - thinner, more subtle */
.theme-zen-focus ::-webkit-scrollbar,
body.theme-zen-focus ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.theme-zen-focus ::-webkit-scrollbar-track,
body.theme-zen-focus ::-webkit-scrollbar-track {
    background: transparent;
}

.theme-zen-focus ::-webkit-scrollbar-thumb,
body.theme-zen-focus ::-webkit-scrollbar-thumb {
    background: #333333;
    border-radius: 2px;
}

.theme-zen-focus ::-webkit-scrollbar-thumb:hover,
body.theme-zen-focus ::-webkit-scrollbar-thumb:hover {
    background: #4d4d4d;
}

/* Zen Focus calendar blocks - neutral gray colors */
.theme-zen-focus .yearly-week-block.month-light .yearly-day-block,
body.theme-zen-focus .yearly-week-block.month-light .yearly-day-block {
    background-color: #1a1a1a;
    /* zen-900 */
}

.theme-zen-focus .yearly-week-block.month-dark .yearly-day-block,
body.theme-zen-focus .yearly-week-block.month-dark .yearly-day-block {
    background-color: #262626;
    /* Slightly lighter gray for alternation */
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Inter', Arial, sans-serif;
    overflow: hidden;
    touch-action: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* ===== TOOLBAR STYLES ===== */
.toolbar-btn {
    padding: 8px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--icon-color);
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toolbar-btn:hover {
    background-color: var(--hover-bg);
    color: var(--icon-hover);
}

.toolbar-divider {
    width: 1px;
    height: 20px;
    background-color: var(--border-color);
    margin: 0 8px;
    align-self: center;
}

.view-switcher-select {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 13px;
    cursor: pointer;
    outline: none;
}

.view-switcher-select:hover {
    border-color: var(--text-muted);
}

.view-switcher-select:focus {
    border-color: #6366f1;
}

/* Grid Lines */
.cell-border {
    border-right: 1px solid #23283b;
    border-bottom: 1px solid #23283b;
}

.week-block:first-child .cell-border {
    border-top: 1px solid #23283b;
}

.day-block:first-child {
    border-left: 1px solid #23283b;
}

/* Month Backgrounds (Subtle) */
.bg-month-0 {
    background-color: rgba(59, 130, 246, 0.05);
}

/* Jan - Blue */
.bg-month-1 {
    background-color: rgba(16, 185, 129, 0.05);
}

/* Feb - Emerald */
.bg-month-2 {
    background-color: rgba(245, 158, 11, 0.05);
}

/* Mar - Amber */
.bg-month-3 {
    background-color: rgba(236, 72, 153, 0.05);
}

/* Apr - Pink */
.bg-month-4 {
    background-color: rgba(139, 92, 246, 0.05);
}

/* May - Violet */
.bg-month-5 {
    background-color: rgba(14, 165, 233, 0.05);
}

/* Jun - Sky */
.bg-month-6 {
    background-color: rgba(244, 63, 94, 0.05);
}

/* Jul - Rose */
.bg-month-7 {
    background-color: rgba(234, 179, 8, 0.05);
}

/* Aug - Yellow */
.bg-month-8 {
    background-color: rgba(20, 184, 166, 0.05);
}

/* Sep - Teal */
.bg-month-9 {
    background-color: rgba(249, 115, 22, 0.05);
}

/* Oct - Orange */
.bg-month-10 {
    background-color: rgba(99, 102, 241, 0.05);
}

/* Nov - Indigo */
.bg-month-11 {
    background-color: rgba(220, 38, 38, 0.05);
}

/* Dec - Red */

/* Canvas Container */
#canvas-container {
    width: 100vw;
    height: 100vh;
    cursor: grab;
    position: relative;
    overflow: hidden;
}

#canvas-container:active {
    cursor: grabbing;
}

#grid-content {
    position: absolute;
    transform-origin: 0 0;
    will-change: transform;
}

/* Event styling */
.event-block {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.event-block:hover {
    z-index: 10;
}

/* Resize Handles */
.resize-handle-n,
.resize-handle-e,
.resize-handle-s,
.resize-handle-w {
    position: absolute;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Show handles on event hover (Visual Feedback) */
.event-block:hover .resize-handle-n,
.event-block:hover .resize-handle-e,
.event-block:hover .resize-handle-s,
.event-block:hover .resize-handle-w {
    opacity: 0.3;
    background-color: white;
    /* Visible guide */
}

/* Highlight handle on specific hover */
.resize-handle-n:hover,
.resize-handle-e:hover,
.resize-handle-s:hover,
.resize-handle-w:hover {
    opacity: 0.8 !important;
    background-color: white;
}

.resize-handle-n {
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    cursor: row-resize;
}

.resize-handle-s {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    cursor: row-resize;
}

.resize-handle-e {
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
}

.resize-handle-w {
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
}

/* Date Visibility Toggle */
.dates-hidden .date-num {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.dates-hidden .day-block:hover .date-num {
    opacity: 1;
}

/* Fixed Zoom Font Size */
:root {
    --inverse-scale: 1;
}

.header-day-label {
    transform: scale(var(--inverse-scale), 1);
    transform-origin: center;
}

.sidebar-label-content {
    transform: scale(1, var(--inverse-scale));
    transform-origin: right center;
}


/* Task Items - Stitch-inspired card design */
.task-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 12px;
    background-color: var(--bg-secondary);
    border: none;
    border-radius: 6px;
    cursor: grab;
    transition: all 0.15s ease;
    position: relative;
    /* 73px height + 1px bottom margin = 74px total (2 calendar row-units) */
    height: 73px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
    /* Right border accent for priority - default none */
    border-right: 4px solid transparent;
}

/* Priority accent colors via right border */
.task-item.priority-urgent {
    border-right-color: #fb923c;
    border-right-width: 8px;
}

.task-item.priority-important {
    border-right-color: #60a5fa;
}

.task-item.priority-normal {
    border-right-color: transparent;
}

.task-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Preserve priority accent on hover */
.task-item.priority-urgent:hover {
    border-right-color: #fb923c;
    border-right-width: 8px;
}

.task-item.priority-important:hover {
    border-right-color: #60a5fa;
}

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

.task-dragging {
    opacity: 0.5;
}

/* Compact task cards for secondary days */
.task-item.task-compact {
    padding: 8px 10px;
    gap: 4px;
}

.task-item.task-compact .task-title {
    font-size: 12px;
}

.task-item.task-compact .task-priority-badge {
    font-size: 9px;
    padding: 2px 6px;
}

/* Task card header - priority badge and time (DEPRECATED - using right border accent now) */
.task-card-header {
    display: none;
    /* Hidden - no longer using text badges */
}

/* Priority badges - DEPRECATED, kept for backwards compatibility */
.task-priority-badge {
    display: none;
    /* Hidden - using right border accent instead */
}

.task-priority-badge.priority-urgent {
    background-color: rgba(249, 115, 22, 0.2);
    color: #fb923c;
}

.task-priority-badge.priority-important {
    background-color: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.task-priority-badge.priority-normal {
    background-color: rgba(100, 116, 139, 0.2);
    color: #94a3b8;
}

/* Task time display */
.task-time {
    font-size: 10px;
    color: var(--text-muted);
}

/* Task title */
.task-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 73px;
    /* Single line with ellipsis for overflow */
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

/* Task description (optional) */
.task-description {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Old priority indicators (for backward compatibility) */
.task-priority-urgent {
    color: #fb923c;
    font-weight: bold;
}

.task-priority-important {
    color: #60a5fa;
    font-weight: bold;
}

.task-empty {
    color: var(--text-muted);
    font-style: italic;
    font-size: 12px;
}

/* ===== TASK INTERACTIONS ===== */

/* Task container for drop zones */
.tasks-container {
    min-height: 20px;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: var(--row-gap);
    min-width: 0;
    overflow: hidden;
}

/* Drop zone visual feedback */
.task-drop-zone {
    background-color: rgba(99, 102, 241, 0.1) !important;
    border-radius: 6px;
}

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

/* Checkbox styling - positioned inside the card */
.task-checkbox {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--text-muted);
    border-radius: 4px;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: all 0.15s ease;
    background-color: transparent;
}

/* Show checkbox on task hover */
.task-item:hover .task-checkbox {
    opacity: 1;
}

.task-checkbox:hover {
    border-color: #6366f1;
}

.task-checkbox:checked {
    background-color: #10b981;
    border-color: #10b981;
    opacity: 1;
}

.task-checkbox:checked::after {
    content: '✓';
    position: absolute;
    color: white;
    font-size: 11px;
    font-weight: bold;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Completed task styling */
.task-item.task-completed-card {
    opacity: 0.6;
}

.task-item.task-completed-card .task-title {
    text-decoration: line-through;
    color: var(--text-muted);
}

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

/* Delete button */
.task-delete-btn {
    opacity: 0;
    background: none;
    border: none;
    color: #f87171;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    padding: 2px 6px;
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.15s ease;
    line-height: 1;
    border-radius: 4px;
}

.task-item:hover .task-delete-btn {
    opacity: 0.6;
}

.task-delete-btn:hover {
    opacity: 1 !important;
    background-color: rgba(248, 113, 113, 0.1);
}

/* Add Task Button - Task-sized clickable area */
.add-task-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 73px;
    /* Match task card height for visual symmetry */
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.add-task-btn:hover {
    color: #6366f1;
    background: rgba(99, 102, 241, 0.1);
}

/* Inline Task Input */
.inline-task-input {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--bg-secondary);
    border: 2px solid #6366f1;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.2);
    margin-bottom: 8px;
    animation: slideIn 0.2s ease;
}

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

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

.task-input-field {
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;
    font-family: 'Inter', Arial, sans-serif;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    outline: none;
    transition: all 0.15s ease;
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.task-input-field:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.task-input-field::placeholder {
    color: var(--text-muted);
}

/* Priority Buttons */
.task-input-actions {
    display: flex;
    gap: 6px;
}

.priority-btn {
    padding: 6px 12px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-primary);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.15s ease;
    color: var(--text-muted);
}

.priority-btn:hover {
    border-color: var(--text-secondary);
}

.priority-btn.active {
    border-color: currentColor;
    background-color: currentColor;
    color: white;
}

.priority-normal {
    color: #94a3b8;
}

.priority-normal.active {
    background-color: #64748b;
    border-color: #64748b;
    color: white;
}

.priority-important {
    color: #60a5fa;
}

.priority-important.active {
    background-color: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

.priority-urgent {
    color: #fb923c;
}

.priority-urgent.active {
    background-color: #f97316;
    border-color: #f97316;
    color: white;
}

/* Calendar Grid Section - Full Year 4 Columns */
.calendar-grid-section {
    margin-top: 44px;
}

.quarters-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 44px;
}

.quarter-column {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.week-block {
    display: flex;
    gap: 2px;
}

/* Event selection highlight (shift+drag) */
.day-block.event-selecting {
    background-color: #3b82f6 !important;
    opacity: 0.7;
}


/* Month colors - alternating light/dark gray */
.week-block.month-light .day-block {
    background-color: #e8e8e8;
}

.week-block.month-dark .day-block {
    background-color: #d4d4d4;
}

.day-block {
    flex: 1;
    aspect-ratio: 1 / 1;
    cursor: pointer;
    transition: background-color 0.15s ease;
    min-width: 0;
    /* No borders - flat design */
}

.day-block:hover {
    background-color: #a0a0a0;
}


/* Primary selection (today + tomorrow) - subtle blue */
.day-block.primary-highlight {
    background-color: #93c5fd;
}

/* Secondary selection (next 4 days) - subtle lighter blue */
.day-block.secondary-highlight {
    background-color: #bfdbfe;
}

/* ===== TASK SECTION STYLES ===== */
/* Task section: 5 columns (Mon-Fri) */
.six-col-tasks-section {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    width: 100%;
    flex: 1;
}

.six-col-day-column {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    overflow: hidden;
    width: 100%;
}

.six-col-day-header {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    padding: 24px 0 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Header date numbers - hidden by default, shown when day numbers toggle is active */
.header-date-number {
    display: none;
    margin-left: 4px;
}

/* Show header date numbers when day numbers toggle is active */
.show-day-numbers .header-date-number {
    display: inline;
}

.six-col-tasks-list {
    display: flex;
    flex-direction: column;
    gap: var(--row-gap);
    padding-top: 12px;
    /* Matches calendar content padding for perfect grid alignment */
    min-width: 0;
    overflow: hidden;
}

/* Day number labels in calendar cells - centered, white, shown on hover */
.day-number-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    font-weight: 700;
    color: white;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    transition: opacity 0.15s ease;
}

/* Show day number on hover */
.yearly-day-block:hover .day-number-label {
    opacity: 1;
}

/* Show all day numbers when toggle is active */
.show-day-numbers .day-number-label {
    opacity: 1;
}


/* ===== RIGHT SIDEBAR STYLES ===== */
/* Anchored right sidebar - grid-aligned buttons matching calendar week positions */
.calendar-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--right-sidebar-width);
    height: 100vh;
    z-index: 1001;
    background-color: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    padding: 0 8px;
    box-sizing: border-box;
}

/* Profile button in header space - centered with "TIMELINE" text
   Note: .drawer-btn sets position:relative, so we need higher specificity
   Math: Header text center at ~34.5px, button height 34px, top = 34.5 - 17 = 17.5px ≈ 18px */
.drawer-btn.drawer-btn--profile {
    position: absolute;
    top: 18px;
    /* Vertically centered with header text labels */
    left: 50%;
    transform: translateX(-50%);
}

/* Grid-aligned drawer buttons - each aligned with a calendar week row
   Position formula: top = 69px + (N × 37px) where N is 0, 1, 2, ...
   The top value is set via inline style in JavaScript for precise control
   Note: .drawer-btn sets position:relative, so we need higher specificity */
.drawer-btn.drawer-btn--grid {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Drawer Material Icons styling */
.drawer-btn .material-icons-outlined {
    font-size: 18px;
}

/* View Switcher in Drawer */
.drawer-view-switcher {
    width: 100%;
}

.drawer-view-select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--hover-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 0.15s ease;
    font-family: inherit;
    text-align: center;
}

.drawer-view-select:hover {
    background-color: var(--border-light);
}

/* Divider between button groups */
.drawer-divider {
    height: 1px;
    width: 100%;
    background-color: var(--border-color);
    margin: 4px 0;
}

/* Drawer buttons - styled to match toolbar-btn */
.drawer-btn {
    padding: 8px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--icon-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    position: relative;
}

.drawer-btn:hover {
    background-color: var(--hover-bg);
    color: var(--icon-hover);
}

/* Active/toggled state - subtle text color change */
.drawer-btn.active {
    color: #3b82f6;
}

.drawer-btn.active:hover {
    background-color: var(--hover-bg);
    color: #60a5fa;
}

.drawer-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.drawer-btn.active svg {
    fill: currentColor;
}

/* Task indicator dots */
.task-dots-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    gap: 1px;
    pointer-events: none;
    z-index: 3;
}

.task-dot {
    width: 1px;
    height: 1px;
    background-color: #000000;
}

.dark-mode .task-dot {
    background-color: #94a3b8;
}

/* Hide dots when toggled off */
.yearly-calendar-section:not(.show-task-dots) .task-dots-container {
    display: none;
}

/* ===== YEARLY VIEW STYLES ===== */
.yearly-view-container {
    font-family: 'Inter', Arial, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    padding: 0;
    padding-right: var(--right-sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 8px;
    user-select: text;
    cursor: auto;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Override canvas-container styles when Yearly View is active */
#canvas-container:has(.yearly-view-container) {
    cursor: auto;
    overflow: auto;
}

#canvas-container:has(.yearly-view-container):active {
    cursor: auto;
}

/* Main content wrapper - side by side layout */
.yearly-main-content {
    display: flex;
    flex-direction: row;
    gap: 0;
    align-items: stretch;
}

/* Task section wrapper (left side, columns 1-5) */
.yearly-tasks-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
    padding-right: 16px;
    /* Match spacing on left side of task columns */
}

/* ===== TWO-WEEK STACKED LAYOUT ===== */
/* Two-week container - fills available viewport height */
.yearly-tasks-wrapper--two-week {
    height: calc(100vh - 50px);
    /* Full viewport minus top offset */
    gap: 0;
    /* Remove gap, separator handled by week-row border */
}

/* Individual week row - grid-aligned height for proper alignment */
.week-row {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
}

/* First week row: height controlled by JavaScript for resizable behavior
   Default: 14 rows = 69px + (14 × 37px) - 1px (border offset) = 586px
   JS dynamically adjusts this based on user drag and snaps to grid */
.week-row:first-child {
    flex: 0 0 auto;
    height: 586px;
    /* Default fallback, JS overrides with saved value. -1px for border alignment */
}

/* Second week row: fills remaining space */
.week-row:nth-child(2) {
    flex: 1;
}

/* Bottom Window day header adjustment - add 4px to push task cards down for grid alignment
   Top Window headers are 57px and perfectly aligned.
   Bottom Window needs +4px extra padding to align cards with continuing calendar blocks */
.week-row:nth-child(2) .six-col-day-header {
    padding-bottom: 16px;
    /* 12px base + 4px alignment adjustment */
}

/* Visual separator between weeks - aligns with calendar 1px gaps */
.week-row+.week-row {
    border-top: var(--row-gap) solid var(--border-color);
    position: relative;
}

/* ===== WEEK RESIZE HANDLE ===== */
/* Three-dot drag handle for resizing the week split */
.week-resize-handle {
    position: absolute;
    top: 4px;
    /* Centered in header padding: (24px - 16px handle) / 2 = 4px */
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: ns-resize;
    z-index: 50;
    border-radius: 4px;
    background: transparent;
    transition: background-color 0.15s ease;
}

.week-resize-handle:hover {
    background-color: var(--hover-bg);
}

.week-resize-handle.dragging {
    background-color: #6366f1;
}

/* The three dots */
.week-resize-handle .resize-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--text-muted);
    transition: background-color 0.15s ease;
}

.week-resize-handle:hover .resize-dot {
    background-color: var(--text-primary);
}

.week-resize-handle.dragging .resize-dot {
    background-color: white;
}

/* Ensure task section fills the week row */
.week-row .six-col-tasks-section {
    flex: 1;
    height: auto;
}

/* Vertical resizer between tasks and calendar - hidden, sidebar is now fixed */
.yearly-vertical-divider {
    display: none;
}

.yearly-vertical-divider:hover {
    border-right-color: var(--text-muted);
}

.yearly-vertical-divider.dragging {
    border-right-color: var(--text-muted);
}

/* Calendar section: fixed left sidebar */
.yearly-calendar-section {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 280px;
    /* Fixed width sidebar */
    min-width: 280px;
    max-width: 280px;
    flex-shrink: 0;
    padding-left: 16px;
    /* Left edge spacing - matches right side */
    padding-right: 16px;
    margin-right: 16px;
}

/* Timeline header - Stitch-inspired design */
.yearly-timeline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 0 12px 12px;
    height: 57px;
    /* Standardized to match day headers exactly */
    box-sizing: border-box;
    /* Include padding in height calculation */
    background-color: transparent;
    margin-bottom: 0;
    position: relative;
}

.yearly-timeline-label {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--text-primary);
}

/* Timeline lock button - appears when week is selected */
.timeline-lock-btn {
    display: flex;
    visibility: hidden;
    pointer-events: none;
    width: 28px;
    height: 28px;
    background-color: #6366f1;
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
}

.timeline-lock-btn.active {
    visibility: visible;
    pointer-events: auto;
}

.timeline-lock-btn:hover {
    background-color: #818cf8;
}

.timeline-lock-btn svg {
    width: 16px;
    height: 16px;
    fill: white;
}

/* Calendar content wrapper (scrollable) */
.yearly-calendar-content {
    display: flex;
    flex-direction: column;
    gap: var(--row-gap);
    padding-top: 12px;
    /* 12px gap above first week block matches task section header-to-content spacing */
}

.yearly-month-block {
    display: flex;
    flex-direction: column;
    gap: var(--row-gap);
    /* Gap between week rows - uses shared row-gap variable */
    align-items: stretch;
    justify-content: flex-start;
}

/* Month label cell - positioned to the left of day cells like a "day 0" block */
.yearly-month-label-cell {
    flex: 1 1 0;
    height: var(--row-height);
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Same flex basis as day cells for consistent sizing */
}

/* Empty spacer for non-first weeks to maintain grid alignment */
.yearly-month-label-spacer {
    flex: 1 1 0;
    height: var(--row-height);
    min-width: 0;
    /* Matches label cell sizing exactly */
}

/* Month label text styling */
.yearly-month-label {
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--text-muted);
    pointer-events: none;
    text-align: center;
}

.yearly-weeks-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--row-gap);
    /* Gap between week rows - uses shared row-gap variable */
    align-items: stretch;
}

.yearly-week-block {
    display: flex;
    gap: 0;
    /* No gap between day cells - week appears as one solid rectangle */
}

.yearly-day-block {
    flex: var(--zoom-width-multiplier);
    height: calc(var(--row-height) * var(--zoom-height-multiplier));
    cursor: pointer;
    transition: background-color 0.15s ease, height 0.2s ease;
    min-width: 0;
    position: relative;
}

.yearly-day-block:hover {
    filter: brightness(0.9);
}

/* Month colors for yearly view - alternating light/dark */
.yearly-week-block.month-light .yearly-day-block {
    background-color: #e8e8e8;
}

.yearly-week-block.month-dark .yearly-day-block {
    background-color: #d4d4d4;
}

/* Dark mode yearly calendar colors - cool-toned surface */
.dark-mode .yearly-week-block.month-light .yearly-day-block,
.dark-mode .yearly-week-block.month-dark .yearly-day-block {
    background-color: #161923;
}

/* Highlights for yearly view */
.yearly-day-block.primary-highlight {
    background-color: #93c5fd;
}

.yearly-day-block.secondary-highlight {
    background-color: #bfdbfe;
}

/* Event selection for yearly view */
.yearly-day-block.event-selecting {
    background-color: #3b82f6 !important;
    opacity: 0.7;
}

/* Days wrapper - contains the 5 day cells, receives the selection border */
.yearly-days-wrapper {
    display: flex;
    flex: 5 5 0;
    gap: 0;
    position: relative;
    /* flex: 5 makes it 5x the size of label (flex: 1) - no gap for solid week rectangle */
}

/* Week hover highlight - indigo outline on the days wrapper */
.yearly-week-block.week-hover-highlight .yearly-days-wrapper {
    outline: 2px solid #6366f1;
    outline-offset: 0;
    z-index: 100;
}

/* Selected week - more prominent outline on the days wrapper */
.yearly-week-block.week-selected .yearly-days-wrapper {
    outline: 3px solid #6366f1;
    outline-offset: 0;
    z-index: 101;
}

/* Responsive layout for yearly view */
.yearly-view-container.layout-responsive {
    width: 100% !important;
}

.yearly-view-container.align-center {
    margin-left: auto !important;
    margin-right: auto !important;
}

.yearly-view-container.align-left {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ===== CALENDAR ZOOM STATES ===== */
/* Zoom toggle cycles: Default → Tall → Wide → Large → Default */

/* Tall: 2x vertical height */
.yearly-calendar-section.zoom-tall {
    --zoom-height-multiplier: 2;
}

/* Wide: 2x horizontal width - doubles the calendar section width */
.yearly-calendar-section.zoom-wide {
    --zoom-width-multiplier: 2;
    width: 560px;
    min-width: 560px;
    max-width: 560px;
}

/* Large: 2x both dimensions */
.yearly-calendar-section.zoom-large {
    --zoom-height-multiplier: 2;
    --zoom-width-multiplier: 2;
    width: 560px;
    min-width: 560px;
    max-width: 560px;
}

/* ===== TASK CARD ZOOM SCALING ===== */
/* When calendar height is 2x, task cards match 1 zoomed row (72px) instead of 2 regular rows */
/* Zoomed calendar row = 36px * 2 = 72px, so task card = 72px for perfect alignment */

/* Tall zoom: 2x vertical height - task cards match single zoomed row */
.yearly-tasks-wrapper.zoom-tall .task-item,
.yearly-tasks-wrapper.zoom-large .task-item {
    height: 72px;
}

.yearly-tasks-wrapper.zoom-tall .task-title,
.yearly-tasks-wrapper.zoom-large .task-title {
    line-height: 72px;
}

.yearly-tasks-wrapper.zoom-tall .add-task-btn,
.yearly-tasks-wrapper.zoom-large .add-task-btn {
    height: 72px;
}

/* Zoom Toggle Button - positioned in timeline header */
.calendar-zoom-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    margin-left: 8px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 10px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 28px;
}

.calendar-zoom-btn:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
    border-color: var(--text-muted);
}

/* Zoom state indicator text */
.calendar-zoom-btn .zoom-label {
    font-weight: 500;
    letter-spacing: 0.05em;
}

/* Task Compact Toggle Button - next to zoom button */
.task-compact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    margin-left: 4px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 10px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 28px;
}

.task-compact-btn:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
    border-color: var(--text-muted);
}

.task-compact-btn .compact-label {
    font-weight: 500;
    letter-spacing: 0.05em;
}

/* ===== TASK COMPACT MODE ===== */
/* When tasks-compact class is applied, reduce task card heights to match
   exactly 1 row unit (--row-height = 36px) instead of 2 row units (~71px).
   This maintains perfect horizontal alignment with calendar week blocks.
   
   CRITICAL: Must reset margins to ensure total row = 36px + 1px = 37px (--row-unit)
   The base .task-item has margin-top: 1px and margin-bottom: 2px (3px total).
   In compact mode, we need exactly 1px gap (var(--row-gap)) between cards. */
.tasks-compact .task-item {
    height: var(--row-height);
    /* Reset margins for perfect grid alignment */
    margin-top: 0;
    margin-bottom: var(--row-gap);
}

/* Hide the ::after divider line in compact mode - we use margin-bottom for gap instead */
.tasks-compact .task-item::after {
    display: none;
}

.tasks-compact .task-title {
    line-height: var(--row-height);
    font-size: 12px;
}

.tasks-compact .add-task-btn {
    height: var(--row-height);
    /* Reset margins for grid alignment */
    margin-top: 0;
    margin-bottom: var(--row-gap);
}

.tasks-compact .task-checkbox {
    width: 14px;
    height: 14px;
}

.tasks-compact .task-delete-btn {
    font-size: 14px;
}

/* ===== SETTINGS MODAL ===== */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.modal-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.settings-modal {
    background-color: #1e293b;
    /* Slate 800 - Dark mode default */
    width: 400px;
    max-width: 90%;
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
    border: 1px solid #334155;
    transform: scale(0.95);
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    overflow: hidden;
}

.modal-backdrop.open .settings-modal {
    transform: scale(1);
}

.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid #334155;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: border-color 0.2s ease;
}

.modal-title {
    color: #f1f5f9;
    font-weight: 600;
    font-size: 18px;
    transition: color 0.2s ease;
}

.modal-close-btn {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: color 0.15s, background-color 0.15s;
}

.modal-close-btn:hover {
    color: #f1f5f9;
    background-color: #334155;
}

.modal-body {
    padding: 20px;
    color: #cbd5e1;
    transition: color 0.2s ease;
}

.setting-group {
    margin-bottom: 24px;
}

.setting-group:last-child {
    margin-bottom: 0;
}

.setting-label {
    display: block;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.2s ease;
}

.setting-options {
    display: flex;
    gap: 12px;
}

.setting-option-btn {
    flex: 1;
    padding: 10px;
    border: 1px solid #475569;
    background-color: #0f172a;
    color: #cbd5e1;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    font-size: 14px;
    transition: all 0.15s ease;
}

.setting-option-btn:hover {
    border-color: #64748b;
    background-color: #1e293b;
}

.setting-option-btn.active {
    background-color: #3b82f6;
    border-color: #3b82f6;
    color: white;
    font-weight: 500;
}

/* Light Mode Settings Modal Styles */
:root .settings-modal,
body:not(.dark-mode) .settings-modal {
    background-color: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

:root .modal-header,
body:not(.dark-mode) .modal-header {
    border-bottom-color: #e2e8f0;
}

:root .modal-title,
body:not(.dark-mode) .modal-title {
    color: #1e293b;
}

:root .modal-close-btn,
body:not(.dark-mode) .modal-close-btn {
    color: #64748b;
}

:root .modal-close-btn:hover,
body:not(.dark-mode) .modal-close-btn:hover {
    color: #1e293b;
    background-color: #f1f5f9;
}

:root .modal-body,
body:not(.dark-mode) .modal-body {
    color: #475569;
}

:root .setting-label,
body:not(.dark-mode) .setting-label {
    color: #64748b;
}

:root .setting-option-btn,
body:not(.dark-mode) .setting-option-btn {
    background-color: #f8fafc;
    border-color: #cbd5e1;
    color: #475569;
}

:root .setting-option-btn:hover,
body:not(.dark-mode) .setting-option-btn:hover {
    border-color: #94a3b8;
    background-color: #f1f5f9;
}

:root .setting-option-btn.active,
body:not(.dark-mode) .setting-option-btn.active {
    background-color: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

/* Dark Mode Settings Modal Styles - Cool-toned Stitch-inspired palette */
.dark-mode .settings-modal {
    background-color: #161923;
    border-color: #23283b;
}

.dark-mode .modal-header {
    border-bottom-color: #23283b;
}

.dark-mode .modal-title {
    color: #e2e8f0;
}

.dark-mode .modal-close-btn {
    color: #64748b;
}

.dark-mode .modal-close-btn:hover {
    color: #e2e8f0;
    background-color: #1e2230;
}

.dark-mode .modal-body {
    color: #94a3b8;
}

.dark-mode .setting-label {
    color: #64748b;
}

.dark-mode .setting-option-btn {
    background-color: #0d0f17;
    border-color: #23283b;
    color: #94a3b8;
}

.dark-mode .setting-option-btn:hover {
    border-color: #3b82f6;
    background-color: #1e2230;
}

/* Notes Modal Textarea - Base styles */
#notes-textarea {
    border: 1px solid;
    outline: none;
}

#notes-textarea:focus {
    outline: 2px solid #3b82f6;
    outline-offset: -1px;
}

/* Notes Modal Textarea - Light Mode */
:root #notes-textarea,
body:not(.dark-mode) #notes-textarea {
    background-color: #f8fafc;
    border-color: #cbd5e1;
    color: #1e293b;
}

/* Notes Modal Textarea - Dark Mode (cool-toned) */
.dark-mode #notes-textarea {
    background-color: #0d0f17;
    border-color: #23283b;
    color: #e2e8f0;
}

/* Settings Modal Select Elements */
.settings-modal select,
.modal-select {
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid;
    border-radius: 6px;
    cursor: pointer;
    outline: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Light Mode Select */
:root .settings-modal select,
body:not(.dark-mode) .settings-modal select {
    background-color: #f8fafc;
    color: #1e293b;
    border-color: #cbd5e1;
}

:root .settings-modal select:hover,
body:not(.dark-mode) .settings-modal select:hover {
    border-color: #94a3b8;
}

/* Dark Mode Select (neutral grays) */
.dark-mode .settings-modal select {
    background-color: #333333;
    color: #f0f0f0;
    border-color: #444444;
}

.dark-mode .settings-modal select:hover {
    border-color: #666666;
}

/* Settings Modal Input Elements */
.settings-modal input[type="password"],
.settings-modal input[type="text"] {
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid;
    border-radius: 6px;
    outline: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Light Mode Input */
:root .settings-modal input[type="password"],
:root .settings-modal input[type="text"],
body:not(.dark-mode) .settings-modal input[type="password"],
body:not(.dark-mode) .settings-modal input[type="text"] {
    background-color: #f8fafc;
    color: #1e293b;
    border-color: #cbd5e1;
}

/* Dark Mode Input (cool-toned) */
.dark-mode .settings-modal input[type="password"],
.dark-mode .settings-modal input[type="text"] {
    background-color: #1e2230;
    color: #e2e8f0;
    border-color: #23283b;
}

/* Settings Modal secondary labels - use inherit to respect modal-body color */
.settings-modal .setting-sublabel,
.settings-modal .modal-body label {
    transition: color 0.2s ease;
}

/* Light Mode secondary labels */
:root .settings-modal .modal-body label,
body:not(.dark-mode) .settings-modal .modal-body label {
    color: #64748b;
}

/* Dark Mode secondary labels */
.dark-mode .settings-modal .modal-body label {
    color: #64748b;
}

/* Settings Modal secondary text */
.settings-modal .setting-hint {
    transition: color 0.2s ease;
}

:root .settings-modal .setting-hint,
body:not(.dark-mode) .settings-modal .setting-hint {
    color: #94a3b8;
}

.dark-mode .settings-modal .setting-hint {
    color: #64748b;
}

/* ===== EVENT MODAL STYLES ===== */
.event-modal-content {
    border: 1px solid;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Event Modal - Light Mode */
:root .event-modal-content,
body:not(.dark-mode) .event-modal-content {
    background-color: #ffffff;
    border-color: #e2e8f0;
}

:root #event-modal-title,
body:not(.dark-mode) #event-modal-title {
    color: #1e293b;
}

:root .rte-toolbar,
body:not(.dark-mode) .rte-toolbar {
    background-color: #f1f5f9;
    border: 1px solid #e2e8f0;
}

:root .rte-btn,
body:not(.dark-mode) .rte-btn {
    color: #475569;
}

:root .rte-btn:hover,
body:not(.dark-mode) .rte-btn:hover {
    background-color: #e2e8f0;
}

:root .rte-divider,
body:not(.dark-mode) .rte-divider {
    background-color: #cbd5e1;
}

:root .event-content-area,
body:not(.dark-mode) .event-content-area {
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #1e293b;
}

:root .event-content-area:focus,
body:not(.dark-mode) .event-content-area:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

:root .event-cancel-btn,
body:not(.dark-mode) .event-cancel-btn {
    color: #64748b;
}

:root .event-cancel-btn:hover,
body:not(.dark-mode) .event-cancel-btn:hover {
    color: #1e293b;
    background-color: #f1f5f9;
}

/* Event Modal - Dark Mode (cool-toned) */
.dark-mode .event-modal-content {
    background-color: #161923;
    border-color: #23283b;
}

.dark-mode #event-modal-title {
    color: #e2e8f0;
}

.dark-mode .rte-toolbar {
    background-color: #1e2230;
    border: 1px solid #23283b;
}

.dark-mode .rte-btn {
    color: #94a3b8;
}

.dark-mode .rte-btn:hover {
    background-color: #23283b;
}

.dark-mode .rte-divider {
    background-color: #23283b;
}

.dark-mode .event-content-area {
    background-color: #0d0f17;
    border: 1px solid #23283b;
    color: #e2e8f0;
}

.dark-mode .event-content-area:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

.dark-mode .event-cancel-btn {
    color: #64748b;
}

.dark-mode .event-cancel-btn:hover {
    color: #e2e8f0;
    background-color: #1e2230;
}

/* Alignment controls visibility */
#alignment-group {
    transition: opacity 0.2s, max-height 0.2s;
    max-height: 100px;
    overflow: hidden;
}


#alignment-group.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* ===== AUTH OVERLAY STYLES ===== */
.auth-overlay-hidden {
    display: none !important;
}

#auth-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #0d0f17;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.auth-container {
    width: 300px;
    font-family: 'Inter', Arial, sans-serif;
    padding: 30px;
    background: #161923;
    border: 1px solid #23283b;
    color: #e2e8f0;
}

.auth-container h2 {
    color: #e2e8f0;
}

#auth-username,
#auth-password {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #23283b;
    background-color: #1e2230;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 14px;
    box-sizing: border-box;
    color: #e2e8f0;
}

#auth-username::placeholder,
#auth-password::placeholder {
    color: #64748b;
}

#passcode-container {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 15px;
}

.passcode-digit {
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 24px;
    font-family: 'Inter', Arial, sans-serif;
    border: 1px solid #23283b;
    background-color: #1e2230;
    color: #e2e8f0;
}

/* Passcode label */
.auth-field-label {
    display: block;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 8px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Passcode visibility toggle button */
.passcode-visibility-btn {
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
}

.passcode-visibility-btn:hover {
    color: #e2e8f0;
}

/* Secondary auth button (Register) */
.auth-btn-secondary {
    background-color: transparent;
    border: 1px solid #23283b;
    color: #e2e8f0;
}

.auth-btn-secondary:hover {
    background-color: #1e2230;
    border-color: #6366f1;
}

.auth-btn {
    width: 100%;
    padding: 12px;
    background-color: #6366f1;
    color: white;
    border: none;
    cursor: pointer;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 14px;
}

.auth-btn:hover {
    background-color: #4f46e5;
}

.auth-toggle-link {
    font-size: 12px;
    color: #60a5fa;
    cursor: pointer;
    text-decoration: underline;
}

.auth-toggle-link:hover {
    color: #93c5fd;
}

.auth-error {
    margin-top: 15px;
    color: #f87171;
    font-size: 12px;
    text-align: center;
}

.forgot-message {
    margin-top: 15px;
    padding: 15px;
    background-color: #1e1520;
    border: 1px solid #3b2030;
    color: #fca5a5;
    font-size: 12px;
    line-height: 1.5;
    text-align: left;
}

/* Event Color Picker */
.color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.color-swatch:hover {
    transform: scale(1.15);
}

.color-swatch.selected {
    border-color: white;
    box-shadow: 0 0 0 2px #3b82f6;
}

/* ===== NEW APP HEADER STYLES (Stitch/Macro Planner Mockup) ===== */
:root {
    --header-height: 56px;
    --header-z-index: 1000;
}

.app-header {
    height: var(--header-height);
    background-color: var(--bg-topbar);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: var(--header-z-index);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Header Left: Logo + Title */
.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.logo-box {
    width: 32px;
    height: 32px;
    background-color: #6366f1;
    /* Primary */
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 16px;
}

.app-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* Header Right: Actions */
.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (min-width: 768px) {
    .header-right {
        gap: 16px;
    }
}

.icon-btn {
    padding: 8px;
    color: var(--icon-color);
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, background-color 0.15s ease;
}

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

.icon-btn .material-icons-outlined {
    font-size: 20px;
}

/* View Switcher Wrapper */
.view-switcher-wrapper {
    position: relative;
    margin-left: 8px;
}

.view-switcher-select {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--hover-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 6px 32px 6px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 0.15s ease;
    font-family: inherit;
    line-height: inherit;
    min-width: 100px;
}

.view-switcher-select:hover {
    background-color: var(--border-light);
}

.select-icon {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--text-muted);
    pointer-events: none;
}

/* Layout Padding Adjustments */
.yearly-view-container {
    padding-top: 0 !important;
}

/* ===== ALIGNMENT PATCH ===== */
/* Override gaps for alignment */
.yearly-calendar-content,
.yearly-month-block,
.yearly-weeks-wrapper,
.six-col-tasks-list,
.tasks-container {
    gap: 0 !important;
}

/* Custom alignment for week rows and task items */
.yearly-week-block {
    margin-bottom: 1px;
    position: relative;
}

.task-item {
    margin-top: 0;
    margin-bottom: 1px;
    position: relative;
}

/* Compact mode: reset margins for perfect 37px grid alignment (36px height + 1px gap) */
.tasks-compact .task-item {
    margin-top: 0;
    margin-bottom: 1px;
}

/* 1px divider positioned at the bottom of each task card */
.yearly-week-block::after,
.task-item::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--border-color);
    pointer-events: none;
    z-index: 10;
}

/* Hide the divider line on week blocks */
.yearly-week-block::after {
    background-color: transparent;
}

/* Remove spacing for the last task in a list to avoid dangling divider */
.six-col-tasks-list .task-item:last-child {
    margin-bottom: 0;
}

.six-col-tasks-list .task-item:last-child::after {
    display: none;
}

/* ===== PRIORITY VIEW STYLES (Top Window) ===== */
/* Priority view uses 4 columns: 3 priority columns + 1 double-width notes column */
.six-col-tasks-section.priority-view {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 2fr;
    /* 3 equal + 1 double */
    gap: 24px;
}

/* Priority column styling */
.priority-column {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    position: relative;
}

/* Priority column headers with color accents */
.priority-header {
    position: relative;
}

.priority-header.urgent {
    color: #fb923c;
}

.priority-header.important {
    color: #60a5fa;
}

.priority-header.normal {
    color: var(--text-secondary);
}

/* Priority tasks list container */
.priority-tasks-list {
    display: flex;
    flex-direction: column;
    gap: var(--row-gap);
    padding-top: 12px;
    min-width: 0;
    overflow: hidden;
    flex: 1;
}

/* Priority tasks container (inner) */
.priority-tasks-container {
    display: flex;
    flex-direction: column;
    gap: var(--row-gap);
    min-height: 50px;
}

/* Drop zone highlight for priority columns */
.priority-column .task-drop-zone {
    background-color: rgba(99, 102, 241, 0.15) !important;
    border-radius: 6px;
    min-height: 80px;
}

/* ===== NOTES COLUMN STYLES ===== */
/* Notes column - spans 2 units in priority view */
.notes-column {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: transparent;
}

.notes-header {
    color: var(--text-secondary);
}

.notes-editor-container {
    flex: 1;
    padding: 11px 0 0 0;
    display: flex;
}

.notes-editor {
    flex: 1;
    width: 100%;
    min-height: 200px;
    padding: 16px;
    font: 14px/1.6 'Inter', sans-serif;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    resize: none;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.notes-editor:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.notes-editor::placeholder {
    color: var(--text-muted);
}

/* ===== DAY VIEW STYLES (Bottom Window) ===== */
/* Ensure day view maintains standard 5-column layout */
.six-col-tasks-section.day-view {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
}

/* Window type indicators - .priority-window and .day-window classes are used for JS targeting */