/* Flatpickr Calendar Custom Styling */
.flatpickr-calendar {
    border: 1.5px solid rgba(99, 102, 241, 0.25) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    background: #FFFFFF !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    min-width: 320px !important;
    max-width: 320px !important;
    width: 320px !important;
    overflow: visible !important;
}

/* Contain the calendar days but allow months overflow */
.flatpickr-calendar .flatpickr-innerContainer {
    overflow: visible !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Ensure months section can overflow at bottom for outline */
.flatpickr-calendar .flatpickr-months {
    margin-bottom: 0 !important;
}

/* Allow months section to overflow for dropdown focus shadows */
.flatpickr-calendar .flatpickr-months {
    position: relative !important;
    z-index: 10 !important;
}

/* Allow overflow for months container to show dropdown properly */
.flatpickr-calendar .flatpickr-months {
    overflow: visible !important;
    clip-path: none !important;
}

/* Ensure dropdown focus shadows aren't clipped - prevent any transforms */
.flatpickr-calendar .flatpickr-monthDropdown-months:focus,
.flatpickr-calendar .flatpickr-monthDropdown-years:focus {
    transform: none !important;
}

.flatpickr-calendar * {
    box-sizing: border-box !important;
}

/* Ensure calendar doesn't get cut off - adjust positioning and width */
.flatpickr-calendar.flatpickr-calendar {
    max-width: calc(100vw - 40px) !important;
    width: min(320px, calc(100vw - 40px)) !important;
}

/* In modals, ensure calendar fits within modal bounds */
.modal .flatpickr-calendar {
    max-width: calc(100vw - 80px) !important;
    width: min(320px, calc(100vw - 80px)) !important;
}

/* Adjust calendar position if it would overflow - use JavaScript to handle this dynamically */
.flatpickr-calendar[style*="left"] {
    max-width: calc(100vw - 40px) !important;
}

/* Ensure modal content doesn't clip calendar - but allow form to scroll */
.modal-content {
    overflow: visible !important;
}

.modal-content #item-form {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.modal {
    overflow: visible !important;
}

.flatpickr-calendar.open {
    border-color: rgba(99, 102, 241, 0.4) !important;
    box-shadow: 0 12px 32px rgba(99, 102, 241, 0.25), 0 6px 16px rgba(0, 0, 0, 0.2) !important;
}

.flatpickr-months {
    border-radius: 12px 12px 0 0 !important;
    padding: 22px 20px 24px 20px !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 10 !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

.flatpickr-month {
    border-radius: 12px 12px 0 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 8px !important;
    padding-top: 0 !important;
}

.flatpickr-current-month {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex: 1 !important;
}

/* Month and Year Dropdown Styling */
.flatpickr-monthDropdown-months,
.flatpickr-monthDropdown-years {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background: transparent !important;
    border: 2px solid rgba(99, 102, 241, 0.3) !important;
    border-radius: 8px !important;
    padding: 6px 32px 6px 12px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease !important;
    font-family: inherit !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%236366F1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 16px 16px !important;
    margin: -4px 4px 0 4px !important;
    min-width: 130px !important;
    width: auto !important;
    position: relative !important;
    z-index: 11 !important;
    overflow: visible !important;
    outline: none !important;
    border-width: 2px !important;
    border-style: solid !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
    transform: none !important;
    top: 0 !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    vertical-align: top !important;
}

/* Style the dropdown button with rounded top corners when open (connected look) */
.flatpickr-monthDropdown-months:focus,
.flatpickr-monthDropdown-years:focus {
    border-radius: 8px 8px 0 0 !important;
}

.flatpickr-monthDropdown-months.dropdown-open,
.flatpickr-monthDropdown-years.dropdown-open {
    border-radius: 8px 8px 0 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.flatpickr-monthDropdown-months:hover,
.flatpickr-monthDropdown-years:hover {
    border-color: rgba(99, 102, 241, 0.5) !important;
    background-color: rgba(99, 102, 241, 0.05) !important;
}

/* Only highlight when actively being used, not on focus */
.flatpickr-monthDropdown-months:active,
.flatpickr-monthDropdown-years:active {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
    position: relative !important;
    z-index: 12 !important;
    transform: none !important;
    top: 0 !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin: -4px 4px 0 4px !important;
    vertical-align: top !important;
    width: auto !important;
    height: auto !important;
}

/* Highlight when dropdown is open (via JavaScript class) */
.flatpickr-monthDropdown-months.dropdown-open,
.flatpickr-monthDropdown-years.dropdown-open {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
    position: relative !important;
    z-index: 12 !important;
    transform: none !important;
    top: 0 !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin: -4px 4px 0 4px !important;
    vertical-align: top !important;
    width: auto !important;
    height: auto !important;
}

/* Remove focus highlight - only show when dropdown is open */
.flatpickr-monthDropdown-months:focus,
.flatpickr-monthDropdown-years:focus {
    outline: none !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
    box-shadow: none !important;
    position: relative !important;
    z-index: 11 !important;
    transform: none !important;
    top: 0 !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin: -4px 4px 0 4px !important;
    vertical-align: top !important;
    width: auto !important;
    height: auto !important;
}

.flatpickr-monthDropdown-months option,
.flatpickr-monthDropdown-years option {
    background: #FFFFFF !important;
    color: var(--text-primary) !important;
    padding: 8px 12px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    display: block !important;
    visibility: visible !important;
    border-radius: 0 !important;
}

/* Attempt to style dropdown menu - limited browser support */
.flatpickr-monthDropdown-months,
.flatpickr-monthDropdown-years {
    /* Try to apply rounded corners to dropdown menu (limited browser support) */
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* Style options for better appearance */
.flatpickr-monthDropdown-months option:hover,
.flatpickr-monthDropdown-years option:hover {
    background: linear-gradient(to right, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.05) 100%) !important;
    color: var(--primary) !important;
    font-weight: 600 !important;
}

/* Note: Native select dropdown menus are OS-rendered and have limited styling support.
   The rounded corners on the dropdown menu itself may not appear in all browsers,
   but the select element will have rounded corners when open for a connected look. */

/* Ensure the select element can show its dropdown */
.flatpickr-monthDropdown-months:active,
.flatpickr-monthDropdown-years:active,
.flatpickr-monthDropdown-months:focus,
.flatpickr-monthDropdown-years:focus {
    z-index: 1000 !important;
}

.flatpickr-weekdays {
    border-radius: 0 !important;
    background: var(--bg-secondary) !important;
    padding: 12px 8px !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
    gap: 0 !important;
    overflow: hidden !important;
}

.flatpickr-weekday {
    padding: 0 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    color: var(--text-secondary) !important;
    text-align: center !important;
    box-sizing: border-box !important;
    letter-spacing: 0.2px !important;
    flex: 0 0 14.2857% !important;
    width: 14.2857% !important;
    max-width: 14.2857% !important;
    margin: 0 !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.flatpickr-days {
    padding: 10px 8px 16px 8px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    overflow: hidden !important;
    margin-top: 0 !important;
}

.flatpickr-dayContainer {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.flatpickr-day {
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    flex: 0 0 14.2857% !important;
    width: 14.2857% !important;
    max-width: 14.2857% !important;
    height: 40px !important;
    line-height: 40px !important;
    margin: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}

.flatpickr-day:hover {
    background: rgba(99, 102, 241, 0.1) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%) !important;
    border-color: var(--primary) !important;
    color: white !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
}

.flatpickr-time {
    border-top: 1px solid var(--border) !important;
    border-radius: 0 0 12px 12px !important;
    padding: 12px 8px 20px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.flatpickr-time .flatpickr-time-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}

.flatpickr-time input {
    border-radius: 6px !important;
    border: 1px solid var(--border) !important;
    transition: all 0.2s ease !important;
    padding: 6px 8px !important;
    text-align: center !important;
    min-width: 50px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
}

.flatpickr-time input:hover {
    border-color: var(--primary-light) !important;
    background: var(--bg-secondary) !important;
}

.flatpickr-time input:focus {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
}

.flatpickr-time .flatpickr-am-pm {
    border-radius: 6px !important;
    border: 1px solid var(--border) !important;
    transition: all 0.2s ease !important;
    padding: 6px 12px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 60px !important;
    cursor: pointer !important;
    background: var(--bg-primary) !important;
    font-weight: 500 !important;
    vertical-align: middle !important;
    line-height: 36px !important;
}

.flatpickr-time .flatpickr-am-pm:hover {
    border-color: var(--primary-light) !important;
    background: var(--bg-secondary) !important;
}

.flatpickr-time .flatpickr-am-pm:focus {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
}

.flatpickr-time .flatpickr-time-separator {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 4px !important;
    height: 36px !important;
    line-height: 36px !important;
    vertical-align: middle !important;
}

.flatpickr-arrow {
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    background: rgba(99, 102, 241, 0.1) !important;
    border-radius: 8px !important;
}

/* Flatpickr input styling - editable text input */
#item-deadline.flatpickr-input,
#item-deadline {
    width: 100%;
    padding: 14px 18px;
    padding-right: 50px;
    border: 2px solid var(--border);
    border-radius: 14px;
    font-size: 15px;
    font-weight: 500;
    background: linear-gradient(to bottom, #FFFFFF 0%, #FAFBFC 100%);
    background-color: #FFFFFF;
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.9);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: text;
    position: relative;
    font-family: inherit;
}

#item-deadline.flatpickr-input:hover,
#item-deadline:hover {
    border-color: var(--primary-light);
    background: linear-gradient(to bottom, #F8F9FA 0%, #F1F3F5 100%);
    background-color: #F8F9FA;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.9);
    transform: translateY(-1px);
}

#item-deadline.flatpickr-input:focus,
#item-deadline:focus {
    outline: none;
    border-color: var(--primary);
    background: linear-gradient(to bottom, #FFFFFF 0%, #FAFBFC 100%);
    background-color: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15), 0 8px 20px rgba(99, 102, 241, 0.25), 0 2px 6px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.9);
    transform: translateY(0);
}

/* Calendar trigger button with light outline */
.calendar-trigger-btn {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: 1.5px solid rgba(99, 102, 241, 0.3);
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(99, 102, 241, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.9);
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 10;
}

.calendar-trigger-btn:hover {
    background-color: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.9);
    transform: translateY(-50%) scale(1.05);
}

.calendar-trigger-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.calendar-trigger-btn svg {
    width: 20px;
    height: 20px;
}

/* Premium Deadline Tracker Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #6366F1;
    --primary-dark: #4F46E5;
    --primary-light: #818CF8;
    --secondary: #8B5CF6;
    --success: #10B981;
    --danger: #EF4444;
    --warning: #F59E0B;
    --info: #3B82F6;
    
    --bg-primary: #FFFFFF;
    --bg-secondary: #F9FAFB;
    --bg-tertiary: #F3F4F6;
    --bg-dark: #111827;
    
    --text-primary: #111827;
    --text-secondary: #6B7280;
    --text-tertiary: #9CA3AF;
    --text-inverse: #FFFFFF;
    
    --border: #E5E7EB;
    --border-light: #F3F4F6;
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 16px;
    --radius-xl: 20px;
}

/* Dark Mode Theme */
[data-theme="dark"] {
    --primary: #818CF8;
    --primary-dark: #6366F1;
    --primary-light: #A5B4FC;
    --secondary: #A78BFA;
    --success: #34D399;
    --danger: #F87171;
    --warning: #FBBF24;
    --info: #60A5FA;
    
    --bg-primary: #1F2937;
    --bg-secondary: #111827;
    --bg-tertiary: #374151;
    --bg-dark: #0F172A;
    
    --text-primary: #F9FAFB;
    --text-secondary: #D1D5DB;
    --text-tertiary: #9CA3AF;
    --text-inverse: #111827;
    
    --border: #374151;
    --border-light: #4B5563;
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Auth Pages */
.auth-page {
    background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.auth-container {
    width: 100%;
    max-width: 440px;
}

.auth-card {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 48px;
    animation: slideUp 0.4s ease-out;
}

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

.auth-header {
    text-align: center;
    margin-bottom: 32px;
}

.logo {
    margin-bottom: 16px;
    display: inline-block;
}

.auth-header h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.auth-header p {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.5;
}

.auth-form {
    display: none;
}

.auth-form.active {
    display: block;
}

.auth-form h2 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}

.form-subtitle {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 24px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text-primary);
    font-size: 14px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 15px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
}

/* Premium datetime-local input styling */
.form-group input[type="datetime-local"] {
    padding: 14px 18px;
    padding-right: 18px;
    border: 2px solid var(--border);
    border-radius: 14px;
    font-size: 15px;
    font-weight: 500;
    background: linear-gradient(to bottom, #FFFFFF 0%, #FAFBFC 100%);
    background-color: #FFFFFF;
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.9);
    cursor: pointer;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-group input[type="datetime-local"]:hover {
    border-color: var(--primary-light);
    background: linear-gradient(to bottom, #F8F9FA 0%, #F1F3F5 100%);
    background-color: #F8F9FA;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.9);
    transform: translateY(-1px);
}

.form-group input[type="datetime-local"]:focus {
    outline: none;
    border-color: var(--primary);
    background: linear-gradient(to bottom, #FFFFFF 0%, #FAFBFC 100%);
    background-color: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15), 0 8px 20px rgba(99, 102, 241, 0.25), 0 2px 6px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.9);
    transform: translateY(0);
}

/* Calendar icon styling for datetime-local */
.form-group input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Crect x='3' y='4' width='14' height='14' rx='2' stroke='%236366F1' stroke-width='2'/%3E%3Cpath d='M3 8H17' stroke='%236366F1' stroke-width='2'/%3E%3Cpath d='M7 2V6' stroke='%236366F1' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M13 2V6' stroke='%236366F1' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
    padding: 8px;
    margin-left: 8px;
    border-radius: 8px;
    border: 1.5px solid rgba(99, 102, 241, 0.3);
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(99, 102, 241, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.9);
    transition: all 0.2s ease;
    opacity: 1;
}

.form-group input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    background-color: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.9);
    opacity: 1;
    transform: scale(1.05);
}

.form-group input[type="datetime-local"]::-webkit-calendar-picker-indicator:active {
    transform: scale(0.95);
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Style the calendar popup itself */
.form-group input[type="datetime-local"]::-webkit-datetime-edit {
    padding: 0;
    color: var(--text-primary);
    font-weight: 500;
}

.form-group input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
}

.form-group input[type="datetime-local"]::-webkit-datetime-edit-text {
    color: var(--text-secondary);
    padding: 0 4px;
    opacity: 0.6;
}

/* Show placeholder-like text when empty */
.form-group input[type="datetime-local"]:invalid::-webkit-datetime-edit {
    color: var(--text-tertiary);
}

.form-group input[type="datetime-local"]:invalid::-webkit-datetime-edit-month-field,
.form-group input[type="datetime-local"]:invalid::-webkit-datetime-edit-day-field,
.form-group input[type="datetime-local"]:invalid::-webkit-datetime-edit-year-field,
.form-group input[type="datetime-local"]:invalid::-webkit-datetime-edit-hour-field,
.form-group input[type="datetime-local"]:invalid::-webkit-datetime-edit-minute-field {
    color: var(--text-tertiary);
    opacity: 0.5;
}

.form-group input[type="datetime-local"]::-webkit-datetime-edit-month-field,
.form-group input[type="datetime-local"]::-webkit-datetime-edit-day-field,
.form-group input[type="datetime-local"]::-webkit-datetime-edit-year-field,
.form-group input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
.form-group input[type="datetime-local"]::-webkit-datetime-edit-minute-field {
    color: var(--text-primary);
    padding: 0 2px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.form-group input[type="datetime-local"]::-webkit-datetime-edit-month-field:focus,
.form-group input[type="datetime-local"]::-webkit-datetime-edit-day-field:focus,
.form-group input[type="datetime-local"]::-webkit-datetime-edit-year-field:focus,
.form-group input[type="datetime-local"]::-webkit-datetime-edit-hour-field:focus,
.form-group input[type="datetime-local"]::-webkit-datetime-edit-minute-field:focus {
    background-color: rgba(99, 102, 241, 0.1);
    color: var(--primary);
    outline: none;
}

/* Firefox datetime-local styling */
.form-group input[type="datetime-local"]::-moz-placeholder {
    color: var(--text-secondary);
    opacity: 1;
}

/* Enhanced focus state for better visibility */
.form-group input[type="datetime-local"]:focus::-webkit-datetime-edit-month-field,
.form-group input[type="datetime-local"]:focus::-webkit-datetime-edit-day-field,
.form-group input[type="datetime-local"]:focus::-webkit-datetime-edit-year-field {
    background-color: rgba(99, 102, 241, 0.08);
}

/* Additional polish for datetime-local input */
.form-group input[type="datetime-local"]::placeholder {
    color: var(--text-secondary);
    font-weight: 400;
}

/* Make the input feel more interactive */
.form-group input[type="datetime-local"]:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.9);
}

/* Ensure consistent appearance across browsers */
.form-group input[type="datetime-local"] {
    -webkit-appearance: none;
    -moz-appearance: textfield;
}

/* Firefox specific styling */
@-moz-document url-prefix() {
    .form-group input[type="datetime-local"] {
        padding-right: 18px;
    }
}

/* Additional styling for calendar picker indicator visibility */
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    border: 1.5px solid rgba(99, 102, 241, 0.25) !important;
    background-color: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(99, 102, 241, 0.1) !important;
}

/* Make empty datetime fields show placeholder-like appearance */
.form-group input[type="datetime-local"][data-empty="true"]::-webkit-datetime-edit {
    color: var(--text-tertiary);
    opacity: 0.5;
}

.form-group input[type="datetime-local"][data-empty="true"]::-webkit-datetime-edit-month-field,
.form-group input[type="datetime-local"][data-empty="true"]::-webkit-datetime-edit-day-field,
.form-group input[type="datetime-local"][data-empty="true"]::-webkit-datetime-edit-year-field,
.form-group input[type="datetime-local"][data-empty="true"]::-webkit-datetime-edit-hour-field,
.form-group input[type="datetime-local"][data-empty="true"]::-webkit-datetime-edit-minute-field {
    color: var(--text-tertiary);
    opacity: 0.4;
}

.form-group input[type="datetime-local"][data-empty="true"]::-webkit-datetime-edit-text {
    color: var(--text-tertiary);
    opacity: 0.5;
}

/* Additional calendar picker styling for better visibility */
/* Note: The actual calendar popup that appears is a native browser element */
/* and cannot be fully styled with CSS. However, the picker button has a clear outline */

/* Note: The actual calendar popup that appears is a native browser element */
/* and cannot be fully styled with CSS. For a fully customizable rounded calendar, */
/* a custom calendar component would be needed (like Flatpickr, Pikaday, etc.) */
/* However, the input field itself and picker button are now styled with rounded corners */

.form-group select {
    width: 100%;
    padding: 14px 18px;
    padding-right: 50px;
    border: 2px solid var(--border);
    border-radius: 14px;
    font-size: 15px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.5;
    background: linear-gradient(to bottom, #FFFFFF 0%, #FAFBFC 100%);
    background-color: #FFFFFF;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%236366F1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    color: var(--text-primary);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.9);
    position: relative;
}

.form-group select:hover {
    border-color: var(--primary-light);
    background: linear-gradient(to bottom, #F8F9FA 0%, #F1F3F5 100%);
    background-color: #F8F9FA;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.9);
    transform: translateY(-1px);
    border-radius: 14px;
}

.form-group select:focus {
    outline: none;
    border-color: var(--primary);
    background: linear-gradient(to bottom, #FFFFFF 0%, #FAFBFC 100%);
    background-color: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15), 0 8px 20px rgba(99, 102, 241, 0.25), 0 2px 6px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.9);
    transform: translateY(0);
    border-radius: 14px;
}

.form-group select:active {
    border-color: var(--primary-dark);
    transform: translateY(0);
    box-shadow: var(--shadow-md);
}

/* Style for select options - enhanced for premium feel */
.form-group select option {
    padding: 14px 16px;
    font-weight: 500;
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    margin: 2px 0;
}

.form-group select option:hover,
.form-group select option:focus {
    background: var(--bg-secondary);
}

.form-group select option:checked {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
    font-weight: 600;
}

/* Disabled state styling */
.form-group select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--bg-tertiary);
}

.form-group input:focus:not([type="datetime-local"]),
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-tertiary);
}

.datetime-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-tertiary);
    font-style: italic;
    opacity: 0.7;
}

/* Checkbox group styling */
.checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
}

.checkbox-group input[type="checkbox"] {
    width: auto;
    margin: 0;
    cursor: pointer;
    accent-color: var(--primary);
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 2px solid var(--border);
    transition: all 0.2s ease;
}

.checkbox-group input[type="checkbox"]:hover {
    border-color: var(--primary-light);
    transform: scale(1.05);
}

.checkbox-group input[type="checkbox"]:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.checkbox-group input[type="checkbox"]:focus {
    outline: 2px solid rgba(99, 102, 241, 0.3);
    outline-offset: 2px;
}

.checkbox-group label {
    margin: 0;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-primary);
    user-select: none;
    flex: 1;
}

.checkbox-group label:hover {
    color: var(--primary);
}

.btn {
    padding: 12px 24px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

.btn-primary {
    background: var(--primary);
    color: white;
    width: 100%;
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background: var(--border);
}

.btn-google {
    background: white;
    color: var(--text-primary);
    border: 2px solid var(--border);
    width: 100%;
    margin-bottom: 20px;
}

.btn-google:hover {
    border-color: var(--border);
    box-shadow: var(--shadow);
    background: var(--bg-secondary);
}

.btn-sm {
    padding: 8px 16px;
    font-size: 14px;
}

.btn-block {
    width: 100%;
}

.divider {
    text-align: center;
    margin: 24px 0;
    position: relative;
}

.divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border);
}

.divider span {
    background: var(--bg-primary);
    padding: 0 16px;
    color: var(--text-tertiary);
    font-size: 14px;
    position: relative;
}

.error-message {
    color: var(--danger);
    font-size: 14px;
    margin-top: 8px;
    margin-bottom: 12px;
    min-height: 20px;
}

.success-message {
    color: var(--success);
    font-size: 14px;
    margin-top: 8px;
    margin-bottom: 12px;
    min-height: 20px;
}

.code-input {
    text-align: center;
    font-size: 24px;
    letter-spacing: 8px;
    font-weight: 600;
    font-family: 'Courier New', monospace;
}

.resend-section {
    text-align: center;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.resend-text {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 8px;
}

.btn-link {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    padding: 0;
    font-family: inherit;
}

.btn-link:hover {
    text-decoration: underline;
}

.btn-link:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.back-section {
    text-align: center;
    margin-top: 16px;
}

.dev-bypass-section {
    margin-top: 24px;
    padding: 24px;
    border-top: 2px dashed var(--warning);
    text-align: center;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 80px;
}

.dev-warning {
    color: var(--warning);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    display: block;
    visibility: visible;
}

.auth-switch {
    text-align: center;
    margin-top: 24px;
    font-size: 14px;
    color: var(--text-secondary);
}

.auth-switch a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

.auth-switch a:hover {
    text-decoration: underline;
}

/* Dashboard */
.dashboard-page {
    background: var(--bg-secondary);
    min-height: 100vh;
}

.dashboard-header {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.logo-small {
    display: flex;
    align-items: center;
}

.header-content h1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 16px;
}

.user-info {
    color: var(--text-secondary);
    font-size: 14px;
}

/* Settings button styling - more specific selector to ensure it overrides base .user-info */
a.user-info.settings-btn,
#user-email.user-info.settings-btn,
a#user-email.settings-btn,
a#user-email.user-info {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 16px !important;
    background: var(--bg-tertiary, #F3F4F6) !important;
    border: 1px solid var(--border, #E5E7EB) !important;
    border-radius: var(--radius-sm, 6px) !important;
    color: var(--text-primary, #111827) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    gap: 6px !important;
    box-sizing: border-box !important;
}

a.user-info.settings-btn:hover,
#user-email.user-info.settings-btn:hover {
    background: var(--border) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

a.user-info.settings-btn:active,
#user-email.user-info.settings-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

a.user-info.settings-btn svg,
#user-email.user-info.settings-btn svg {
    flex-shrink: 0;
}

.user-email-text {
    white-space: nowrap;
}

.dashboard-main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 32px;
}

.dashboard-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dashboard-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--bg-primary);
    padding: 8px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.nav-btn {
    padding: 12px 16px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 12px;
}

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

.nav-btn.active {
    background: var(--primary);
    color: white;
}

.dashboard-content {
    background: var(--bg-primary);
    border-radius: var(--radius);
    padding: 32px;
    box-shadow: var(--shadow);
}

.content-header {
    margin-bottom: 32px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
}

.content-header h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
    letter-spacing: -0.3px;
}

.view-subtitle {
    color: var(--text-secondary);
    font-size: 14px;
}

.view-controls {
    display: flex;
    gap: 12px;
}

.search-input {
    padding: 10px 16px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    background: var(--bg-primary);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
    width: 240px;
}

.category-filter {
    padding: 12px 18px;
    padding-right: 44px;
    border: 2px solid var(--border);
    border-radius: 14px;
    font-size: 14px;
    font-family: inherit;
    font-weight: 500;
    background: linear-gradient(to bottom, #FFFFFF 0%, #FAFBFC 100%);
    background-color: #FFFFFF;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M4.5 6.75L9 11.25L13.5 6.75' stroke='%236366F1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    color: var(--text-primary);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.9);
    min-width: 160px;
}

.search-input:hover {
    border-color: var(--primary-light);
    background-color: var(--bg-secondary);
    box-shadow: var(--shadow-md), 0 4px 12px rgba(99, 102, 241, 0.15);
    transform: translateY(-1px);
}

.category-filter:hover {
    border-color: var(--primary-light);
    background: linear-gradient(to bottom, #F8F9FA 0%, #F1F3F5 100%);
    background-color: #F8F9FA;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.9);
    transform: translateY(-1px);
    border-radius: 14px;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12), var(--shadow-lg), 0 8px 16px rgba(99, 102, 241, 0.2);
    background-color: var(--bg-primary);
    transform: translateY(0);
}

.category-filter:focus {
    outline: none;
    border-color: var(--primary);
    background: linear-gradient(to bottom, #FFFFFF 0%, #FAFBFC 100%);
    background-color: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15), 0 8px 20px rgba(99, 102, 241, 0.25), 0 2px 6px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.9);
    transform: translateY(0);
    border-radius: 14px;
}

.category-filter option {
    padding: 12px 16px;
    font-weight: 500;
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* Custom Dropdown Component with Rounded Bottom Corners */
.custom-dropdown {
    position: relative;
    width: 100%;
}


.custom-dropdown-button {
    width: 100%;
    padding: 14px 18px;
    padding-right: 50px;
    border: 2px solid var(--border);
    border-radius: 14px;
    font-size: 15px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.5;
    background: linear-gradient(to bottom, #FFFFFF 0%, #FAFBFC 100%);
    background-color: #FFFFFF;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%236366F1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.9);
    text-align: left;
    display: flex;
    align-items: center;
}


.custom-dropdown-button:hover {
    border-color: var(--primary-light);
    background: linear-gradient(to bottom, #F8F9FA 0%, #F1F3F5 100%);
    background-color: #F8F9FA;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.9);
    transform: translateY(-1px);
}

.custom-dropdown-button:focus,
.custom-dropdown-button.active {
    outline: none;
    border-color: var(--primary);
    background: linear-gradient(to bottom, #FFFFFF 0%, #FAFBFC 100%);
    background-color: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15), 0 8px 20px rgba(99, 102, 241, 0.25), 0 2px 6px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.9);
    transform: translateY(0);
}


.custom-dropdown {
    position: relative;
}

.custom-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bg-primary);
    background-color: var(--bg-primary);
    border: 2px solid var(--primary);
    border-top: none;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.25), 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    animation: dropdownFadeIn 0.2s ease-out;
    color: var(--text-primary);
}


.custom-dropdown-menu.show {
    display: block;
}

.custom-dropdown-menu::-webkit-scrollbar {
    width: 8px;
}

.custom-dropdown-menu::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 0 0 14px 0;
}

.custom-dropdown-menu::-webkit-scrollbar-thumb {
    background: var(--primary-light);
    border-radius: 4px;
}

.custom-dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

.custom-dropdown-item {
    padding: 14px 18px;
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--text-primary);
    font-weight: 500;
    border-bottom: 1px solid var(--border-light);
}

.custom-dropdown-item:last-child {
    border-bottom: none;
    border-radius: 0 0 12px 12px;
}


.custom-dropdown-item:hover {
    background: linear-gradient(to right, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.05) 100%);
    color: var(--primary);
}

.custom-dropdown-item.selected {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
    font-weight: 600;
}

.custom-dropdown-item.selected:hover {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--secondary) 100%);
    color: white;
}

/* Dark mode - override selected item to use subtle background instead of gradient */
[data-theme="dark"] .custom-dropdown-item.selected {
    background: var(--bg-tertiary) !important;
    background-color: var(--bg-tertiary) !important;
    color: var(--primary) !important;
}

[data-theme="dark"] .custom-dropdown-item.selected:hover {
    background: var(--bg-secondary) !important;
    background-color: var(--bg-secondary) !important;
    color: var(--primary) !important;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* For category filter specifically */
.view-controls .custom-dropdown {
    min-width: 160px;
}

.view-controls .custom-dropdown-button {
    padding: 12px 18px;
    padding-right: 44px;
    font-size: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M4.5 6.75L9 11.25L13.5 6.75' stroke='%236366F1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right 14px center;
}

.items-container {
    display: grid;
    gap: 16px;
}

.item-card {
    background: var(--bg-secondary);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    transition: all 0.2s;
    cursor: pointer;
    position: relative;
}

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

.item-card.expired {
    border-left: 4px solid var(--danger);
}

.item-card.expiring {
    border-left: 4px solid var(--warning);
}

.item-card.completed {
    border-left: 4px solid var(--success, #10b981);
    opacity: 0.7;
}

.item-card.completed:hover {
    opacity: 0.9;
}

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

.complete-toggle {
    background: none;
    border: 2px solid var(--border);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
    flex-shrink: 0;
    color: var(--text-tertiary);
}

.complete-toggle:hover {
    border-color: var(--primary);
    transform: scale(1.1);
}

.complete-toggle.completed {
    background: var(--success, #10b981);
    border-color: var(--success, #10b981);
    color: white;
}

.complete-toggle.completed:hover {
    background: var(--success, #10b981);
    border-color: var(--success, #10b981);
    transform: scale(1.1);
}

.complete-toggle svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

.item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.item-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.item-deadline {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.item-actions {
    display: flex;
    gap: 8px;
}

.item-actions button {
    padding: 6px 12px;
    font-size: 12px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}

.item-meta {
    display: flex;
    gap: 16px;
    margin-top: 16px;
    font-size: 13px;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.item-category {
    display: inline-block;
    padding: 4px 12px;
    background: var(--primary);
    color: white;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.item-notes {
    margin-top: 12px;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.empty-state {
    text-align: center;
    padding: 80px 20px;
    color: var(--text-secondary);
}

.empty-state svg {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    opacity: 0.3;
}

.empty-state h3 {
    font-size: 20px;
    margin-bottom: 8px;
    color: var(--text-primary);
    font-weight: 600;
}

.loading {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 16px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    padding: 20px;
    backdrop-filter: blur(4px);
}

.modal.active {
    display: flex;
}

.modal-content {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 540px;
    height: 85vh;
    max-height: 700px;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
    animation: slideUp 0.3s ease-out;
    overflow: hidden;
}

.modal-content form {
    padding: 24px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0; /* Important for flex scrolling */
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.modal-header h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-close {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

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

/* Form padding handled above in .modal-content form */

.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
    flex-shrink: 0;
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
}

.pagination button {
    padding: 8px 16px;
    border: 2px solid var(--border);
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    font-weight: 500;
}

.pagination button:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
}

.pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination button.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* Responsive */
@media (max-width: 768px) {
    .dashboard-main {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .dashboard-sidebar {
        order: 2;
    }

    .dashboard-nav {
        flex-direction: row;
        overflow-x: auto;
    }

    .header-content {
        padding: 16px;
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .header-actions {
        width: 100%;
        justify-content: space-between;
    }

    .content-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .search-input {
        width: 100%;
    }

    .auth-card {
        padding: 32px 24px;
    }

    .item-card {
        padding: 16px;
    }

    .item-header {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .item-actions {
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .item-actions button {
        flex: 1;
        min-width: 80px;
    }

    .modal-content {
        max-width: calc(100vw - 32px);
        max-height: 90vh;
        margin: 16px;
    }

    .modal-content form {
        padding: 20px;
    }

    .cost-summary-widget {
        flex-direction: column;
        gap: 1rem;
    }

    .cost-stat {
        min-width: 100%;
    }

    .templates-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .dashboard-header h1 {
        font-size: 1.25rem;
    }

    .item-title {
        font-size: 16px;
    }

    .item-deadline {
        font-size: 13px;
    }

    .btn {
        padding: 8px 12px;
        font-size: 13px;
    }

    .btn-sm {
        padding: 6px 10px;
        font-size: 12px;
    }

    .modal-header {
        padding: 16px;
    }

    .modal-header h2 {
        font-size: 18px;
    }

    .form-group {
        margin-bottom: 16px;
    }

    .form-group label {
        font-size: 13px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 14px;
        padding: 10px 12px;
    }
}

/* ===== DARK MODE SPECIFIC OVERRIDES ===== */

/* Smooth transition when switching themes */
body,
.auth-card,
.dashboard-header,
.dashboard-content,
.dashboard-nav,
.item-card,
.modal-content,
.btn,
input,
select,
textarea {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Global dark mode color-scheme hint for all selects */
[data-theme="dark"] {
    color-scheme: dark;
}

/* Dark mode auth page gradient */
[data-theme="dark"] .auth-page {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #1e1b4b 100%);
}

/* Dark mode auth card */
[data-theme="dark"] .auth-card {
    background: var(--bg-primary);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Dark mode dashboard background */
[data-theme="dark"] .dashboard-page {
    background: var(--bg-secondary);
}

/* Dark mode form inputs */
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group textarea,
[data-theme="dark"] .form-group select {
    background: var(--bg-tertiary);
    border-color: var(--border);
    color: var(--text-primary);
}

[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group textarea:focus,
[data-theme="dark"] .form-group select:focus {
    background: var(--bg-primary);
    border-color: var(--primary);
}

[data-theme="dark"] .form-group input::placeholder,
[data-theme="dark"] .form-group textarea::placeholder {
    color: var(--text-tertiary);
}

/* Dark mode buttons */
[data-theme="dark"] .btn-google {
    background: var(--bg-tertiary);
    border-color: var(--border);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-google:hover {
    background: var(--bg-primary);
    border-color: var(--border-light);
}

[data-theme="dark"] .btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-secondary:hover {
    background: var(--border);
}

/* Dark mode item cards */
[data-theme="dark"] .item-card {
    background: var(--bg-primary);
    border-color: var(--border);
}

[data-theme="dark"] .item-card:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.15);
}

/* Dark mode modal */
[data-theme="dark"] .modal {
    background: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .modal-content {
    background: var(--bg-primary);
}

[data-theme="dark"] .modal-header {
    border-color: var(--border);
}

/* Dark mode flatpickr calendar */
[data-theme="dark"] .flatpickr-calendar {
    background: var(--bg-primary) !important;
    border-color: var(--border) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .flatpickr-calendar * {
    color: var(--text-primary);
}

[data-theme="dark"] .flatpickr-innerContainer {
    background: var(--bg-primary) !important;
}

[data-theme="dark"] .flatpickr-rContainer {
    background: var(--bg-primary) !important;
}

[data-theme="dark"] .flatpickr-days {
    background: var(--bg-primary) !important;
}

[data-theme="dark"] .dayContainer {
    background: var(--bg-primary) !important;
}

[data-theme="dark"] .flatpickr-day {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .flatpickr-day:hover {
    background: var(--bg-tertiary) !important;
}

[data-theme="dark"] .flatpickr-day.selected {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%) !important;
    color: white !important;
}

[data-theme="dark"] .flatpickr-weekdays {
    background: var(--bg-tertiary) !important;
}

[data-theme="dark"] .flatpickr-weekday {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .flatpickr-monthDropdown-months,
[data-theme="dark"] .flatpickr-monthDropdown-years {
    background: var(--bg-tertiary) !important;
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

/* Force dark background on native select dropdown options */
[data-theme="dark"] .flatpickr-monthDropdown-months option,
[data-theme="dark"] .flatpickr-monthDropdown-years option {
    background: #1F2937 !important;
    background-color: #1F2937 !important;
    color: #F9FAFB !important;
}

[data-theme="dark"] select.flatpickr-monthDropdown-months,
[data-theme="dark"] select.flatpickr-monthDropdown-months option {
    background: #1F2937 !important;
    background-color: #1F2937 !important;
    color: #F9FAFB !important;
}

[data-theme="dark"] .flatpickr-time input {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] .flatpickr-time .flatpickr-am-pm {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

/* Dark mode flatpickr - additional elements */
[data-theme="dark"] .flatpickr-months {
    background: var(--bg-primary) !important;
}

[data-theme="dark"] .flatpickr-month {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .flatpickr-current-month {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .flatpickr-current-month .cur-month {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}

[data-theme="dark"] .flatpickr-current-month span.cur-month:hover {
    background: var(--bg-tertiary) !important;
}

[data-theme="dark"] .flatpickr-current-month input.cur-year {
    color: var(--text-primary) !important;
    background: transparent !important;
}

[data-theme="dark"] .flatpickr-prev-month,
[data-theme="dark"] .flatpickr-next-month {
    color: var(--text-primary) !important;
    fill: var(--text-primary) !important;
}

[data-theme="dark"] .flatpickr-prev-month:hover,
[data-theme="dark"] .flatpickr-next-month:hover {
    background: var(--bg-tertiary) !important;
}

[data-theme="dark"] .flatpickr-prev-month svg,
[data-theme="dark"] .flatpickr-next-month svg {
    fill: var(--text-primary) !important;
}

[data-theme="dark"] .flatpickr-day.today {
    border-color: var(--primary) !important;
}

/* Hide overflow days from other months */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    visibility: hidden !important;
    pointer-events: none !important;
}

[data-theme="dark"] .flatpickr-day.prevMonthDay,
[data-theme="dark"] .flatpickr-day.nextMonthDay {
    visibility: hidden !important;
    pointer-events: none !important;
}

[data-theme="dark"] .flatpickr-day.disabled {
    color: var(--text-tertiary) !important;
}

[data-theme="dark"] .flatpickr-time-separator {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .numInputWrapper {
    background: var(--bg-tertiary) !important;
}

[data-theme="dark"] .numInputWrapper:hover {
    background: var(--bg-primary) !important;
}

[data-theme="dark"] .numInputWrapper span {
    border-color: var(--border) !important;
}

[data-theme="dark"] .numInputWrapper span:hover {
    background: var(--bg-tertiary) !important;
}

[data-theme="dark"] .numInputWrapper span svg path {
    fill: var(--text-secondary) !important;
}

/* Dark mode - Deadline input field specifically */
[data-theme="dark"] #item-deadline,
[data-theme="dark"] #item-deadline.flatpickr-input {
    background: var(--bg-tertiary) !important;
    background-image: none !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] #item-deadline:hover,
[data-theme="dark"] #item-deadline.flatpickr-input:hover {
    background: var(--bg-primary) !important;
    border-color: var(--primary-light) !important;
}

[data-theme="dark"] #item-deadline:focus,
[data-theme="dark"] #item-deadline.flatpickr-input:focus {
    background: var(--bg-primary) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.2) !important;
}

[data-theme="dark"] #item-deadline::placeholder {
    color: var(--text-tertiary) !important;
}

/* Dark mode - Calendar trigger button */
[data-theme="dark"] .calendar-trigger-btn {
    background: var(--bg-tertiary) !important;
    border-color: var(--border) !important;
    color: var(--primary) !important;
}

[data-theme="dark"] .calendar-trigger-btn:hover {
    background: var(--bg-primary) !important;
    border-color: var(--primary-light) !important;
    color: var(--primary-light) !important;
}

[data-theme="dark"] .calendar-trigger-btn svg {
    color: inherit !important;
}

[data-theme="dark"] .calendar-trigger-btn svg rect,
[data-theme="dark"] .calendar-trigger-btn svg path {
    stroke: currentColor !important;
}

/* Dark mode - Select dropdowns (category, recurrence, etc.) */
/* Use color-scheme to hint browser about dark mode */
[data-theme="dark"] select,
[data-theme="dark"] .form-group select,
[data-theme="dark"] #item-category,
[data-theme="dark"] #item-recurrence-type,
[data-theme="dark"] #item-free-trial-duration,
[data-theme="dark"] .category-filter {
    color-scheme: dark !important;
    background: var(--bg-tertiary) !important;
    background-color: var(--bg-tertiary) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23818CF8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

[data-theme="dark"] select:hover,
[data-theme="dark"] .form-group select:hover,
[data-theme="dark"] #item-category:hover,
[data-theme="dark"] #item-recurrence-type:hover,
[data-theme="dark"] #item-free-trial-duration:hover,
[data-theme="dark"] .category-filter:hover {
    background-color: var(--bg-primary) !important;
    border-color: var(--primary-light) !important;
}

[data-theme="dark"] select:focus,
[data-theme="dark"] .form-group select:focus,
[data-theme="dark"] #item-category:focus,
[data-theme="dark"] #item-recurrence-type:focus,
[data-theme="dark"] #item-free-trial-duration:focus,
[data-theme="dark"] .category-filter:focus {
    background-color: var(--bg-primary) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.2) !important;
}

/* Force dark background on ALL select options - most aggressive approach */
/* Note: Native browser dropdowns have limited styling control, but we try our best */
[data-theme="dark"] select option,
[data-theme="dark"] .form-group select option,
[data-theme="dark"] #item-category option,
[data-theme="dark"] #item-recurrence-type option,
[data-theme="dark"] #item-free-trial-duration option,
[data-theme="dark"] .category-filter option,
[data-theme="dark"] option {
    background: #1a1d27 !important;
    background-color: #1a1d27 !important;
    color: #f9fafb !important;
    border: none !important;
    padding: 12px 16px !important;
}

/* Selected/checked option */
[data-theme="dark"] select option:checked,
[data-theme="dark"] select option[selected] {
    background: #252836 !important;
    background-color: #252836 !important;
    color: #818cf8 !important;
    font-weight: 600 !important;
}

/* Hover state for options (limited browser support) */
[data-theme="dark"] select option:hover {
    background: #252836 !important;
    background-color: #252836 !important;
    color: #f9fafb !important;
}

/* Dark mode - All text inputs in forms */
[data-theme="dark"] .form-group input[type="text"],
[data-theme="dark"] .form-group input[type="number"],
[data-theme="dark"] .form-group input[type="email"],
[data-theme="dark"] .form-group input[type="password"] {
    background: var(--bg-tertiary) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .form-group input[type="text"]:focus,
[data-theme="dark"] .form-group input[type="number"]:focus,
[data-theme="dark"] .form-group input[type="email"]:focus,
[data-theme="dark"] .form-group input[type="password"]:focus {
    background: var(--bg-primary) !important;
    border-color: var(--primary) !important;
}

[data-theme="dark"] .form-group input::placeholder {
    color: var(--text-tertiary) !important;
}

/* Dark mode - Textarea */
[data-theme="dark"] .form-group textarea {
    background: var(--bg-tertiary) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .form-group textarea:focus {
    background: var(--bg-primary) !important;
    border-color: var(--primary) !important;
}

[data-theme="dark"] .form-group textarea::placeholder {
    color: var(--text-tertiary) !important;
}

/* Dark mode - datetime-local inputs */
[data-theme="dark"] .form-group input[type="datetime-local"] {
    background: var(--bg-tertiary) !important;
    background-image: none !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .form-group input[type="datetime-local"]:focus {
    background: var(--bg-primary) !important;
    border-color: var(--primary) !important;
}

/* Dark mode search and filter inputs */
[data-theme="dark"] .search-input,
[data-theme="dark"] .category-filter {
    background: var(--bg-tertiary);
    border-color: var(--border);
    color: var(--text-primary);
}

[data-theme="dark"] .search-input:focus,
[data-theme="dark"] .category-filter:focus {
    background: var(--bg-primary);
    border-color: var(--primary);
}

/* Dark mode custom dropdown */
[data-theme="dark"] .custom-dropdown-button {
    background: var(--bg-tertiary);
    border-color: var(--border);
    color: var(--text-primary);
}

[data-theme="dark"] .custom-dropdown-menu {
    background: var(--bg-primary) !important;
    background-color: var(--bg-primary) !important;
    border-color: var(--border) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* Dark mode - all dropdown items get dark background */
[data-theme="dark"] .custom-dropdown-item {
    color: var(--text-primary) !important;
    background: var(--bg-primary) !important;
    background-color: var(--bg-primary) !important;
    border-color: var(--border) !important;
    border-bottom-color: var(--border) !important;
}

[data-theme="dark"] .custom-dropdown-item:hover {
    background: var(--bg-tertiary) !important;
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .custom-dropdown-item.selected {
    background: var(--bg-tertiary) !important;
    background-color: var(--bg-tertiary) !important;
    color: var(--primary) !important;
}

[data-theme="dark"] .custom-dropdown-item.selected:hover {
    background: var(--bg-secondary) !important;
    background-color: var(--bg-secondary) !important;
    color: var(--primary) !important;
}

[data-theme="dark"] .custom-dropdown-item:last-child {
    border-bottom: none !important;
}

/* Dark mode divider */
[data-theme="dark"] .divider::before {
    background: var(--border);
}

[data-theme="dark"] .divider span {
    background: var(--bg-primary);
    color: var(--text-tertiary);
}

/* ===== THEME TOGGLE BUTTON ===== */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--text-secondary);
}

.theme-toggle:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: scale(1.05);
}

.theme-toggle:active {
    transform: scale(0.95);
}

.theme-toggle svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.theme-toggle:hover svg {
    transform: rotate(15deg);
}

/* Sun icon (shown in dark mode) */
.theme-toggle .sun-icon {
    display: none;
}

/* Moon icon (shown in light mode) */
.theme-toggle .moon-icon {
    display: block;
}

[data-theme="dark"] .theme-toggle .sun-icon {
    display: block;
}

[data-theme="dark"] .theme-toggle .moon-icon {
    display: none;
}

[data-theme="dark"] .theme-toggle {
    background: var(--bg-tertiary);
    border-color: var(--border);
    color: var(--warning);
}

[data-theme="dark"] .theme-toggle:hover {
    border-color: var(--warning);
    color: var(--warning);
}

/* ===== COST SUMMARY WIDGET ===== */
/* Subscription Banner */
.subscription-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
    color: white;
    flex-wrap: wrap;
    gap: 1rem;
}

.subscription-info {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
}

.subscription-tier {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tier-badge {
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tier-badge.tier-free {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.tier-badge.tier-pro {
    background: rgba(255, 215, 0, 0.3);
    color: #FFD700;
}

.tier-badge.tier-business {
    background: rgba(138, 43, 226, 0.3);
    color: #DDA0DD;
}

.tier-text {
    font-size: 0.875rem;
    opacity: 0.9;
}

.subscription-usage {
    font-size: 0.875rem;
    opacity: 0.9;
}

.subscription-actions {
    display: flex;
    gap: 0.75rem;
}

.subscription-actions .btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.subscription-actions .btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
}

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

.subscription-actions .btn-primary:hover {
    background: rgba(255, 255, 255, 0.9);
}

@media (max-width: 768px) {
    .subscription-banner {
        flex-direction: column;
        align-items: stretch;
    }
    
    .subscription-info {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    
    .subscription-actions {
        width: 100%;
    }
    
    .subscription-actions .btn {
        flex: 1;
    }
}

/* ===== READ-ONLY MODE BANNER ===== */
.read-only-banner {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    color: white;
    gap: 1rem;
}

.read-only-icon {
    font-size: 1.5rem;
}

.read-only-message {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.read-only-message strong {
    font-size: 1rem;
}

.read-only-message span {
    font-size: 0.875rem;
    opacity: 0.9;
}

/* ===== GRACE PERIOD BANNER ===== */
.grace-period-banner {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    color: white;
    gap: 1rem;
}

.grace-period-icon {
    font-size: 1.5rem;
}

.grace-period-message {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.grace-period-message strong {
    font-size: 1rem;
}

.grace-period-message span {
    font-size: 0.875rem;
    opacity: 0.9;
}

.btn-warning {
    background: white;
    color: #d97706;
    border: none;
    font-weight: 600;
}

.btn-warning:hover {
    background: rgba(255, 255, 255, 0.9);
}

/* ===== UPGRADE MODAL ===== */
.upgrade-modal-body {
    text-align: center;
    padding: 1rem 0;
}

.upgrade-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.upgrade-message {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.upgrade-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.upgrade-plan {
    background: var(--bg-secondary);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    text-align: center;
    transition: all 0.2s ease;
}

.upgrade-plan:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

.upgrade-plan.pro {
    border-color: var(--primary);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
}

.upgrade-plan h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.upgrade-plan .price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1rem;
}

.upgrade-plan .price span {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-secondary);
}

.upgrade-plan ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
    text-align: left;
}

.upgrade-plan ul li {
    padding: 0.375rem 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.upgrade-plan .btn {
    width: 100%;
}

/* Read-only deadline styling */
.item-card.read-only {
    opacity: 0.7;
    border-left: 4px solid #9ca3af;
    position: relative;
}

.item-card.read-only::after {
    content: "Read-Only";
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: #9ca3af;
    color: white;
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius);
    text-transform: uppercase;
}

.item-card.read-only .item-actions button:not(.btn-delete) {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .read-only-banner,
    .grace-period-banner {
        flex-direction: column;
        text-align: center;
    }
    
    .upgrade-plans {
        grid-template-columns: 1fr;
    }
}

/* ===== PWA INSTALL BANNER ===== */
.install-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    z-index: 10000;
    padding: 1rem;
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.install-banner-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

.install-banner-icon {
    flex-shrink: 0;
}

.install-banner-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.install-banner-text strong {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.install-banner-text span {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.install-banner-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.install-btn-primary,
.install-btn-secondary {
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

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

.install-btn-primary:hover {
    background: var(--primary-dark);
}

.install-btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.install-btn-secondary:hover {
    background: var(--bg-tertiary);
}

/* iOS Install Instructions */
.ios-install-instructions {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.ios-install-content {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: 2rem;
    max-width: 400px;
    box-shadow: var(--shadow-lg);
}

.ios-install-content h3 {
    margin: 0 0 1.5rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.ios-install-content ol {
    margin: 0 0 1.5rem 0;
    padding-left: 1.5rem;
    color: var(--text-secondary);
    line-height: 1.8;
}

.ios-install-content li {
    margin-bottom: 0.75rem;
}

.ios-install-content svg {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.25rem;
}

.ios-install-close {
    width: 100%;
    padding: 0.75rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.ios-install-close:hover {
    background: var(--primary-dark);
}

/* Update Banner */
.update-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--warning);
    color: white;
    padding: 0.75rem 1rem;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.update-banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.update-btn {
    padding: 0.5rem 1rem;
    background: white;
    color: var(--warning);
    border: none;
    border-radius: var(--radius);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.update-btn:hover {
    background: rgba(255, 255, 255, 0.9);
}

@media (max-width: 768px) {
    .install-banner-content {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .install-banner-actions {
        width: 100%;
    }
    
    .install-btn-primary,
    .install-btn-secondary {
        flex: 1;
    }
    
    .ios-install-content {
        padding: 1.5rem;
    }
}

/* Safe area for mobile devices with notches */
@supports (padding: max(0px)) {
    .install-banner {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}

.cost-summary-widget {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.cost-stat {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-width: 150px;
}

.cost-label {
    font-size: 0.875rem;
    color: var(--text-tertiary);
    font-weight: 500;
}

.cost-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

/* ===== TEMPLATES MODAL ===== */
.templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    padding: 1rem 24px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

#templates-modal .modal-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.template-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    background: var(--bg-primary);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.template-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.template-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.template-card h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.template-card p {
    font-size: 0.875rem;
    color: var(--text-tertiary);
    margin: 0;
}

/* ===== FORM HINT ===== */
.form-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-top: 0.25rem;
}

/* ===== ITEM CARD COST DISPLAY ===== */
.item-cost {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: var(--primary);
    color: white;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    margin-left: 0.5rem;
}