@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap');

:root {
    --color-primary: #2A6F97;
    --color-secondary: #1D4563;
    --color-accent: #F27D52;
    --color-background: #FFFFFF;
    --color-background-accent: #E6F2F9;
    --color-text: #50555B;
    --color-transparent: #00000000;
}

body {
    background: var(--color-background);
    color: var(--color-text);
    font-family: 'Figtree', sans-serif;
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: 'Poppins', sans-serif;
}

a {
    color: var(--color-primary);
}

a:hover {
    color: var(--color-secondary);
}


/* ========================================
   COMMON STYLES
   ======================================== */

/* Headers with Gradient Background */
.day-navigation,
.page-header,
.edit-header,
.lists-header,
.week-navigation,
.month-navigation,
.messages-header,
.shopping-header {
    background: linear-gradient(135deg, #2A6F97 0%, #1D4563 100%);
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    color: white;
    animation: sectionFadeIn 0.45s ease-out both;
}

.day-navigation,
.week-navigation,
.month-navigation {
    padding: 1.5rem;
}

.day-navigation h2,
.edit-header h2,
.week-navigation h2 {
    font-weight: 700;
    font-size: 1.8rem;
    margin-bottom: 1rem;
    text-align: center;
}

.page-header h2,
.lists-header h2,
.month-navigation h2,
.messages-header h2,
.shopping-header h2 {
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 0.5rem;
    text-align: center;
}

.edit-header h2 {
    margin-bottom: 0.5rem;
}

.page-header p,
.lists-header p,
.messages-header p,
.shopping-header p {
    text-align: center;
    opacity: 0.9;
    margin: 0;
}

.page-header p {
    margin: 0.5rem 0 0 0;
}

/* Navigation Buttons */
.nav-buttons,
.week-nav-buttons,
.month-nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.nav-btn,
.back-btn,
.week-nav-btn,
.month-nav-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: white;
    padding: 0.6rem 1.5rem;
    border-radius: 0.8rem;
    font-weight: 600;
    transition: all 0.3s;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    min-height: 44px;
}

.nav-btn,
.week-nav-btn,
.month-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-btn:hover,
.back-btn:hover,
.week-nav-btn:hover,
.month-nav-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    color: white;
}

.today-btn,
.current-week-btn,
.current-month-btn {
    background: rgba(255, 255, 255, 0.9);
    color: #2A6F97;
    font-weight: 700;
}

.today-btn {
    padding: 0.6rem 1.2rem;
}

.today-btn:hover,
.current-week-btn:hover,
.current-month-btn:hover {
    background: white;
    color: #2A6F97;
}

/* Content Sections */
.add-task-section,
.tasks-section,
.advanced-form-container,
.recurring-tasks-section,
.edit-form-section,
.create-list-section,
.meal-plan-section,
.filter-section,
.add-message-section,
.messages-section,
.calendar-container,
.add-item-section,
.shopping-list-section {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-bottom: 2rem;
    animation: sectionFadeUp 0.55s ease-out both;
}

.add-task-section,
.advanced-form-container,
.edit-form-section,
.create-list-section,
.add-message-section,
.add-item-section {
    animation-delay: 0.1s;
}

.tasks-section,
.recurring-tasks-section,
.meal-plan-section,
.messages-section,
.shopping-list-section,
.calendar-container {
    animation-delay: 0.2s;
}

.filter-section {
    animation-delay: 0.15s;
}

.skip-entry-anim .day-navigation,
.skip-entry-anim .page-header,
.skip-entry-anim .edit-header,
.skip-entry-anim .lists-header,
.skip-entry-anim .week-navigation,
.skip-entry-anim .month-navigation,
.skip-entry-anim .messages-header,
.skip-entry-anim .shopping-header,
.skip-entry-anim .add-task-section,
.skip-entry-anim .tasks-section,
.skip-entry-anim .advanced-form-container,
.skip-entry-anim .recurring-tasks-section,
.skip-entry-anim .edit-form-section,
.skip-entry-anim .create-list-section,
.skip-entry-anim .meal-plan-section,
.skip-entry-anim .filter-section,
.skip-entry-anim .add-message-section,
.skip-entry-anim .messages-section,
.skip-entry-anim .calendar-container,
.skip-entry-anim .add-item-section,
.skip-entry-anim .shopping-list-section,
.skip-entry-anim .event-banner,
.skip-entry-anim .home-masonry .card {
    animation: none !important;
}
@keyframes sectionFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .day-navigation,
    .page-header,
    .edit-header,
    .lists-header,
    .week-navigation,
    .month-navigation,
    .messages-header,
    .shopping-header,
    .add-task-section,
    .tasks-section,
    .advanced-form-container,
    .recurring-tasks-section,
    .edit-form-section,
    .create-list-section,
    .meal-plan-section,
    .filter-section,
    .add-message-section,
    .messages-section,
    .calendar-container,
    .add-item-section,
    .shopping-list-section,
    .event-banner,
    .home-masonry .card {
        animation: none !important;
    }
}

.advanced-form-container,
.recurring-tasks-section {
    max-width: 800px;
    margin: 0 auto 2rem auto;
}

.advanced-form-container {
    padding: 2.5rem;
}

.filter-section {
    padding: 1.5rem;
}

.create-list-section {
    padding: 1rem 2rem;
}

.edit-form-section {
    padding: 2.5rem;
}

/* Section Headings */
.add-task-section h5,
.tasks-section h5,
.recurring-tasks-section h5,
.shopping-list-section h5,
.add-message-section h5,
.messages-section h5,
.meal-plan-section h5 {
    font-weight: 700;
    font-size: 1.3rem;
    color: #50555B;
    margin-bottom: 1.5rem;
}

.filter-section h6 {
    font-weight: 700;
    font-size: 1rem;
    color: #50555B;
    margin-bottom: 1rem;
}

/* Form Elements */
.form-group {
    margin-bottom: 2rem;
}

.form-group label,
.form-label {
    display: block;
    font-weight: 600;
    font-size: 1.1rem;
    color: #50555B;
    margin-bottom: 0.75rem;
}

.form-group label {
    font-weight: 700;
}

.form-label {
    font-size: 0.95rem;
}

.form-group label i {
    margin-right: 0.5rem;
    color: #2A6F97;
}

.task-input,
.form-input,
.form-control-custom,
.date-input,
.item-input {
    width: 100%;
    padding: 0.8rem;
    border: 2px solid #e0e0e0;
    border-radius: 0.6rem;
    font-size: 1rem;
    transition: border 0.3s;
    background: white;
    -webkit-appearance: none;
    appearance: none;
}

.form-input,
.form-control-custom {
    padding: 1rem;
    font-size: 1.1rem;
}

.form-control-custom,
.date-input {
    padding: 0.9rem;
}

.item-input {
    padding: 0.9rem;
}

.task-input {
    flex: 1 1 300px;
}

.date-input {
    cursor: pointer;
}

.task-input:focus,
.form-input:focus,
.form-control-custom:focus,
.date-input:focus,
.item-input:focus {
    outline: none;
    border-color: #2A6F97;
}

/* Flatpickr alternate input styling */
.flatpickr-input[readonly] {
    background: white !important;
    cursor: pointer !important;
    opacity: 1 !important;
}

input.flatpickr-input {
    background: white !important;
    color: #50555B !important;
}

/* Placeholder styling for all inputs including Flatpickr */
input::placeholder,
input.flatpickr-input::placeholder {
    color: #999 !important;
    opacity: 1 !important;
}

input::-webkit-input-placeholder {
    color: #999 !important;
    opacity: 1 !important;
}

input::-moz-placeholder {
    color: #999 !important;
    opacity: 1 !important;
}

input:-ms-input-placeholder {
    color: #999 !important;
    opacity: 1 !important;
}

/* Make sure alternate input is visible and styled properly */
input.flatpickr-input.form-control.input {
    display: block !important;
    width: 100% !important;
    padding: 0.8rem !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 0.6rem !important;
    font-size: 1rem !important;
    background: white !important;
    color: #50555B !important;
    cursor: pointer !important;
}

/* Style for empty Flatpickr inputs */
input.flatpickr-input:not([value]),
input.flatpickr-input[value=""] {
    color: #999 !important;
}

/* Make sure alternate input is visible and styled properly */
input.flatpickr-input.form-control.input {
    display: block !important;
    width: 100% !important;
    padding: 0.8rem !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 0.6rem !important;
    font-size: 1rem !important;
    background: white !important;
    color: #50555B !important;
    cursor: pointer !important;
}

.assign-select,
.form-select {
    padding: 0.8rem;
    border: 2px solid #e0e0e0;
    border-radius: 0.6rem;
    font-size: 1rem;
    background: white;
    cursor: pointer;
    transition: border 0.3s;
}

.assign-select {
    min-width: 140px;
    flex: 0 0 auto;
}

.form-select {
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
}

.edit-form-section .assign-select {
    width: 100%;
    padding: 0.9rem;
}

.assign-select:focus,
.form-select:focus {
    outline: none;
    border-color: #2A6F97;
}


.assign-button-group {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.assignee-btn {
    border: 1px solid #d0d7e2;
    background: #fff;
    color: #355070;
    border-radius: 999px;
    padding: .45rem .8rem;
    font-weight: 600;
    cursor: pointer;
}

.assignee-btn.active {
    background: #2A6F97;
    border-color: #2A6F97;
    color: #fff;
}


.edit-form-section .assign-button-group {
    width: 100%;
    margin-top: 0.25rem;
}

.edit-form-section .assignee-btn {
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid #d0d7e2;
    background: #f8fafc;
    color: #355070;
    border-radius: 999px;
    padding: 0.55rem 0.95rem;
    line-height: 1;
    transition: all 0.2s ease;
}

.edit-form-section .assignee-btn:hover {
    border-color: #2A6F97;
    background: #eef5fb;
}

.edit-form-section .assignee-btn.active {
    background: #2A6F97;
    border-color: #2A6F97;
    color: #fff;
    box-shadow: 0 4px 10px rgba(42, 111, 151, 0.2);
}

/* Time Input */
.time-input-wrapper {
    position: relative;
    min-width: 180px;
    flex: 0 0 auto;
    display: flex;
    gap: 0.5rem;
}

.quick-add-form .time-input-wrapper {
    flex: 1 1 200px;
    min-width: auto;
    min-height: 44px;
}

.time-input {
    flex: 1;
    padding: 0.8rem;
    border: 2px solid #e0e0e0;
    border-radius: 0.6rem;
    font-size: 1.1rem;
    cursor: pointer;
    background: white;
    transition: border 0.3s;
    font-weight: 500;
}

.form-group .time-input,
.time-input-group .time-input {
    padding: 1rem;
}

.edit-form-section .time-input {
    padding: 0.9rem;
}

.time-input:focus {
    outline: none;
    border-color: #2A6F97;
}

.clear-time-btn {
    background: #dc3545;
    color: white;
    border: none;
    padding: 0.8rem 1rem;
    border-radius: 0.6rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.form-group .clear-time-btn,
.time-input-group .clear-time-btn {
    padding: 1rem 1.2rem;
}

.edit-form-section .clear-time-btn {
    padding: 0.9rem 1.2rem;
}

.clear-time-btn:hover {
    background: #c82333;
    transform: translateY(-2px);
}

.time-input-group {
    display: flex;
    gap: 0.5rem;
}

/* Buttons */
.add-btn,
.create-btn {
    background: linear-gradient(135deg, #2A6F97 0%, #1D4563 100%);
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 0.6rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s;
    white-space: nowrap;
    flex: 0 0 auto;
}

.create-btn {
    padding: 0.9rem 2rem;
    width: 100%;
    font-size: 1.05rem;
}

.add-message-form .add-btn {
    padding: 0.9rem 2rem;
    align-self: flex-start;
}

.add-btn:hover,
.create-btn:hover {
    transform: translateY(-2px);
}

.advanced-btn {
    background: white;
    color: #2A6F97;
    border: 2px solid #2A6F97;
    padding: 0.6rem 1.5rem;
    border-radius: 0.6rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.advanced-btn:hover {
    background: #2A6F97;
    color: white;
}

.filter-btn {
    background: white;
    color: #2A6F97;
    border: 2px solid #2A6F97;
    padding: 0.5rem 1.25rem;
    border-radius: 0.6rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-block;
}

.filter-btn:hover,
.filter-btn.active {
    background: #2A6F97;
    color: white;
}

/* ========================================
   DAY/WEEK/MONTH SPECIFIC
   ======================================== */

/* Quick Add Form */
.quick-add-form {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.add-task-section .quick-add-form {
    margin-bottom: 1rem;
    align-items: stretch;
}

.advanced-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 0.5rem;
    width: 100%;
}

.week-display {
    font-size: 1.1rem;
    text-align: center;
    margin-bottom: 1rem;
    opacity: 0.95;
}

/* ========================================
   TASK LIST
   ======================================== */

.task-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid #eee;
    transition: background 0.2s;
}

.task-item:hover {
    background: #E6F2F9;
}

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

.task-left {
    display: flex;
    align-items: center;
    flex-grow: 1;
}

.task-checkbox {
    width: 20px;
    height: 20px;
    margin-right: 1rem;
    cursor: pointer;
    accent-color: #2A6F97;
}

.task-time {
    font-weight: 600;
    color: #2A6F97;
    min-width: 80px;
    margin-right: 1rem;
    font-size: 0.95rem;
}

.task-name {
    flex-grow: 1;
    font-size: 1rem;
}

.task-assigned {
    font-size: 0.85rem;
    color: #50555B;
    margin-left: 1rem;
    padding: 0.25rem 0.75rem;
    background: #f0f0f0;
    border-radius: 0.4rem;
    font-weight: 500;
    white-space: nowrap;
}

.task-item.completed {
    background: #f0f7f0;
}

.task-item.completed .task-name {
    text-decoration: line-through;
    color: #999;
}

.task-item.completed .task-time {
    color: #999;
}

.task-edit-btn {
    background: transparent;
    border: none;
    color: #50555B;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.3rem 0.6rem;
    transition: color 0.2s;
    text-decoration: none;
}

.task-edit-btn:hover {
    color: #2A6F97;
}

.no-tasks {
    text-align: center;
    padding: 3rem;
    color: #999;
    font-style: italic;
}

/* Dividers */
.completed-divider,
.ghost-divider,
.messages-divider,
.got-divider {
    margin: 1.5rem 0;
    padding: 0.75rem 0;
    border-top: 2px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #50555B;
    font-weight: 600;
    font-size: 0.9rem;
}

.ghost-divider {
    border-top: 2px dashed #e0e0e0;
}

.completed-divider i,
.ghost-divider i,
.messages-divider i,
.got-divider i {
    margin-right: 0.5rem;
}

/* Badges */
.early-badge {
    background: #28a745;
    color: white;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 0.3rem;
    margin-left: 0.5rem;
    font-weight: 600;
}

.ghost-badge {
    background: linear-gradient(135deg, #2A6F97 0%, #1D4563 100%);
    color: white;
    font-size: 0.7rem;
    padding: 0.2rem 0.6rem;
    border-radius: 0.3rem;
    margin-left: 0.5rem;
    font-weight: 600;
}

.today-badge {
    background: #2A6F97;
    color: white;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 0.4rem;
    font-weight: 600;
}

/* Ghost Task Styling */
.task-item.ghost {
    opacity: 0.5;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    cursor: not-allowed;
    position: relative;
}

.task-item.ghost::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
            45deg,
            transparent,
            transparent 10px,
            rgba(102, 126, 234, 0.05) 10px,
            rgba(102, 126, 234, 0.05) 20px
    );
    pointer-events: none;
}

.task-item.ghost:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
}

.task-item.ghost .task-checkbox {
    cursor: not-allowed;
    opacity: 0.5;
}

.task-item.ghost .task-name {
    font-style: italic;
}

/* ========================================
   RECURRING TASKS
   ======================================== */

.repeat-section {
    background: #E6F2F9;
    border: 2px solid #e0e0e0;
    border-radius: 0.8rem;
    padding: 1.5rem;
    margin-top: 1rem;
}

.repeat-type-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.repeat-type-btn {
    background: white;
    border: 2px solid #e0e0e0;
    padding: 1rem;
    border-radius: 0.6rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.repeat-type-btn:hover {
    border-color: #2A6F97;
    background: #E6F2F9;
}

.repeat-type-btn.active {
    background: #2A6F97;
    color: white;
    border-color: #2A6F97;
}

.repeat-options {
    display: none;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid #e0e0e0;
}

.repeat-options.active {
    display: block;
}

.weekday-selector {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
}

.weekday-btn {
    background: white;
    border: 2px solid #e0e0e0;
    padding: 0.8rem 0.3rem;
    border-radius: 0.6rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    font-size: 0.9rem;
}

.weekday-btn:hover {
    border-color: #2A6F97;
}

.weekday-btn.selected {
    background: #2A6F97;
    color: white;
    border-color: #2A6F97;
}

.monthly-options {
    display: grid;
    gap: 1rem;
}

.radio-option {
    background: white;
    border: 2px solid #e0e0e0;
    padding: 1rem;
    border-radius: 0.6rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
}

.radio-option:hover {
    border-color: #2A6F97;
    background: #E6F2F9;
}

.radio-option.selected {
    border-color: #2A6F97;
    background: #E6F2F9;
}

.radio-option input[type="radio"] {
    width: 20px;
    height: 20px;
    margin-right: 1rem;
    cursor: pointer;
    accent-color: #2A6F97;
    flex-shrink: 0;
}

.radio-option label {
    margin: 0;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    flex-grow: 1;
}

.radio-option select {
    padding: 0.5rem;
    border: 2px solid #e0e0e0;
    border-radius: 0.4rem;
    font-size: 0.95rem;
    margin-left: 0.5rem;
    cursor: pointer;
    min-width: 80px;
}

.radio-option select:focus {
    outline: none;
    border-color: #2A6F97;
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 2px solid #e0e0e0;
}

.btn-submit {
    flex: 1;
    background: linear-gradient(135deg, #2A6F97 0%, #1D4563 100%);
    color: white;
    border: none;
    padding: 1.2rem 2rem;
    border-radius: 0.6rem;
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    transition: transform 0.2s;
}

.btn-submit:hover {
    transform: translateY(-2px);
}

.btn-cancel {
    flex: 1;
    background: white;
    color: #50555B;
    border: 2px solid #e0e0e0;
    padding: 1.2rem 2rem;
    border-radius: 0.6rem;
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.btn-cancel:hover {
    border-color: #50555B;
    color: #50555B;
}

.recurring-task-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border: 2px solid #e0e0e0;
    border-radius: 0.8rem;
    margin-bottom: 1rem;
    transition: all 0.2s;
}

.recurring-task-item:hover {
    border-color: #2A6F97;
    background: #E6F2F9;
}

.recurring-task-item.inactive {
    opacity: 0.6;
    background: #f5f5f5;
}

.task-info {
    flex: 1;
}

.task-title {
    font-weight: 700;
    font-size: 1.1rem;
    color: #50555B;
    margin-bottom: 0.5rem;
}

.task-details {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.9rem;
    color: #50555B;
}

.task-detail {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.task-actions {
    display: flex;
    gap: 0.5rem;
}

.task-action-btn {
    background: white;
    border: 2px solid #e0e0e0;
    color: #50555B;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
}

.task-action-btn:hover {
    border-color: #2A6F97;
    color: #2A6F97;
}

.task-action-btn.delete:hover {
    border-color: #dc3545;
    color: #dc3545;
}

.no-recurring-tasks {
    text-align: center;
    padding: 3rem;
    color: #999;
    font-style: italic;
}

/* ========================================
   EDIT TASK
   ======================================== */

.action-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}

.save-btn {
    background: linear-gradient(135deg, #2A6F97 0%, #1D4563 100%);
    color: white;
    border: none;
    padding: 1rem 2.5rem;
    border-radius: 0.6rem;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    transition: transform 0.2s;
    flex: 1;
    min-width: 200px;
}

.save-btn:hover {
    transform: translateY(-2px);
}

.meal-plan-section .save-btn {
    padding: 1rem 3rem;
}

.delete-btn {
    background: #dc3545;
    color: white;
    border: none;
    padding: 1rem 2.5rem;
    border-radius: 0.6rem;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s;
    flex: 1;
    min-width: 200px;
}

.delete-btn:hover {
    background: #c82333;
    transform: translateY(-2px);
}

.delete-confirm {
    background: #fff3cd;
    border: 2px solid #ffc107;
    border-radius: 1rem;
    padding: 2rem;
    margin-top: 2rem;
    display: none;
}

.delete-confirm.show {
    display: block;
}

.delete-confirm h5 {
    color: #856404;
    font-weight: 700;
    margin-bottom: 1rem;
}

.delete-confirm-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.confirm-yes-btn {
    background: #dc3545;
    color: white;
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 0.6rem;
    font-weight: 600;
    cursor: pointer;
    flex: 1;
}

.confirm-no-btn {
    background: #50555B;
    color: white;
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 0.6rem;
    font-weight: 600;
    cursor: pointer;
    flex: 1;
}

/* ========================================
   LISTS
   ======================================== */

.create-list-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 1rem 0;
    user-select: none;
}

.create-list-toggle h5 {
    font-weight: 700;
    font-size: 1.3rem;
    color: #50555B;
    margin: 0;
}

.toggle-icon {
    font-size: 1.5rem;
    color: #2A6F97;
    transition: transform 0.3s;
}

.toggle-icon.expanded {
    transform: rotate(180deg);
}

.create-list-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.create-list-content.expanded {
    max-height: 1000px;
    transition: max-height 0.5s ease-in;
}

.create-list-form {
    display: grid;
    gap: 1rem;
    padding-top: 1rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.messages-section .form-row,
.add-message-form .form-row {
    display: flex;
}

.form-group-full {
    grid-column: 1 / -1;
}

.icon-selector,
.color-selector {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.5rem;
}

.icon-option {
    aspect-ratio: 1;
    border: 2px solid #e0e0e0;
    border-radius: 0.6rem;
    background: white;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-option:hover {
    border-color: #2A6F97;
    transform: scale(1.1);
}

.icon-option.selected {
    border-color: #2A6F97;
    background: #E6F2F9;
    transform: scale(1.1);
}

.color-option {
    aspect-ratio: 1;
    border: 3px solid transparent;
    border-radius: 0.6rem;
    cursor: pointer;
    transition: all 0.2s;
}

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

.color-option.selected {
    border-color: #50555B;
    transform: scale(1.1);
}

.lists-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.list-card {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.2s;
    border: 2px solid transparent;
}

.list-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.list-card.archived {
    background: #f5f5f5;
    opacity: 0.7;
    border-color: #999 !important;
}

.list-card.archived:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    opacity: 0.85;
}

.list-card.archived .list-name,
.list-card.archived .list-stats,
.list-card.archived .list-item-text {
    color: #999;
}

.list-card.archived .list-icon {
    opacity: 0.6;
}

.list-card.blue { border-color: #2A6F97; }
.list-card.green { border-color: #28a745; }
.list-card.orange { border-color: #fd7e14; }
.list-card.pink { border-color: #d63384; }
.list-card.purple { border-color: #6f42c1; }
.list-card.red { border-color: #dc3545; }
.list-card.teal { border-color: #20c997; }
.list-card.yellow { border-color: #ffc107; }

.list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e0e0e0;
}

.list-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.list-icon {
    font-size: 1.5rem;
}

.list-name {
    font-weight: 700;
    font-size: 1.2rem;
    color: #50555B;
}

.list-actions {
    display: flex;
    gap: 0.5rem;
}

.list-action-btn {
    background: transparent;
    border: none;
    color: #50555B;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    border-radius: 0.4rem;
    transition: all 0.2s;
}

.list-action-btn:hover {
    background: #E6F2F9;
    color: #2A6F97;
}

.list-action-btn.delete:hover {
    color: #dc3545;
}

.list-stats {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: #50555B;
}

.stat {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.progress-bar-container {
    width: 100%;
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}

.progress-bar.blue { background: #2A6F97; }
.progress-bar.green { background: #28a745; }
.progress-bar.orange { background: #fd7e14; }
.progress-bar.pink { background: #d63384; }
.progress-bar.purple { background: #6f42c1; }
.progress-bar.red { background: #dc3545; }
.progress-bar.teal { background: #20c997; }
.progress-bar.yellow { background: #ffc107; }

.list-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0;
    font-size: 0.95rem;
}

.list-item-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #2A6F97;
    flex-shrink: 0;
}

.list-item-text {
    flex: 1;
    color: #50555B;
}

.list-item.completed .list-item-text {
    text-decoration: line-through;
    color: #999;
}

.list-item-delete {
    background: transparent;
    border: none;
    color: #dc3545;
    cursor: pointer;
    padding: 0.2rem;
    transition: opacity 0.2s;
}

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

.add-item-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid #e0e0e0;
}

.add-item-form {
    display: flex;
    gap: 0.5rem;
}

.lists-grid .add-item-form {
    gap: 0.5rem;
}

.add-item-input {
    flex: 1;
    padding: 0.6rem;
    border: 2px solid #e0e0e0;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    transition: border 0.3s;
}

.add-item-input:focus {
    outline: none;
    border-color: #2A6F97;
}

.add-item-btn {
    background: #2A6F97;
    color: white;
    border: none;
    padding: 0.6rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.add-item-btn:hover {
    background: #1D4563;
}

.meal-ideas-nav-btn {
    background: linear-gradient(135deg, #2A6F97 0%, #1D4563 100%);
    color: #fff;
    border: none;
    padding: 0.6rem 1rem;
    border-radius: 0.6rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.meal-ideas-nav-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(29, 69, 99, 0.2);
}

.meal-idea-delete-btn {
    background: transparent;
    border: 1px solid #dc3545;
    color: #dc3545;
    border-radius: 0.5rem;
    padding: 0.3rem 0.7rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.meal-idea-delete-btn:hover {
    background: #dc3545;
    color: #fff;
}

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal-overlay.show {
    display: flex;
}

.modal-overlay .modal-content {
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.modal-overlay .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-top: 2px solid #e0e0e0;
}

.modal-overlay .modal-header h5 {
    font-weight: 700;
    font-size: 1.3rem;
    color: #50555B;
    margin: 0;
}

.modal-overlay .modal-close {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: #50555B;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.modal-overlay .modal-close:hover {
    color: #50555B;
}

.modal .modal-content {
    border: none;
    border-radius: 1rem;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
    position: relative;
}

.modal .modal-header {
    margin-bottom: 0;
    padding: 1rem 3.25rem 1rem 1.25rem;
    border-top: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.modal .modal-header .modal-title {
    color: #fff;
    font-weight: 700;
}

.modal .modal-body {
    padding: 1.25rem;
}

.modal .modal-footer {
    padding: 1rem 1.25rem;
}

.modal-close-btn {
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    width: 2rem;
    height: 2rem;
    border-radius: 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0;
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
}

.modal-close-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: #999;
}

.empty-state-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    display: block;
}

.empty-state h3 {
    font-size: 1.5rem;
    color: #50555B;
    margin-bottom: 0.5rem;
}

.archived-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid #e0e0e0;
}

.archived-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.archived-header h3 {
    color: #999;
    font-size: 1.3rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* ========================================
   WEEK MASONRY
   ======================================== */

.week-masonry {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    column-gap: 1.5rem !important;
    row-gap: 0.5rem !important;
    grid-auto-flow: row !important;
    columns: unset !important;
}

/* ========================================
   MEALS
   ======================================== */

.meal-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.meal-item {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 1rem;
    align-items: center;
    padding: 1.25rem;
    border: 2px solid #e0e0e0;
    border-radius: 0.8rem;
    transition: all 0.2s;
    background: #E6F2F9;
}

.meal-item:hover {
    border-color: #2A6F97;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
}

.meal-item.today {
    border: 3px solid #2A6F97;
    background: linear-gradient(135deg, #E6F2F9 0%, #E6F2F9 100%);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.day-label {
    font-weight: 700;
    font-size: 1.1rem;
    color: #50555B;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
    margin-bottom: 0.35rem;
}

.day-name {
    flex: 1 1 auto;
    min-width: 0;
}

.today-badge {
    margin-left: auto;
    position: relative;
    z-index: 2;
}

.meal-item.today .day-label {
    color: #2A6F97;
}

.meal-input {
    width: 100%;
    padding: 0.8rem;
    border: 2px solid #e0e0e0;
    border-radius: 0.6rem;
    font-size: 1rem;
    transition: border 0.3s;
    background: white;
}

.meal-input:focus {
    outline: none;
    border-color: #2A6F97;
    background: white;
}

.meal-input::placeholder {
    color: #999;
    font-style: italic;
}

.save-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid #e0e0e0;
    text-align: center;
}

.day-icon {
    font-size: 1.3rem;
}

/* ========================================
   MESSAGES
   ======================================== */

.filter-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.add-message-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.message-textarea {
    width: 100%;
    padding: 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 0.6rem;
    font-size: 1rem;
    transition: border 0.3s;
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
}

.message-textarea:focus {
    outline: none;
    border-color: #2A6F97;
}

.stats-bar {
    display: flex;
    justify-content: space-around;
    padding: 1.5rem;
    background: linear-gradient(135deg, #E6F2F9 0%, #E6F2F9 100%);
    border-radius: 0.8rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: #2A6F97;
    display: block;
}

.stat-label {
    font-size: 0.9rem;
    color: #50555B;
    margin-top: 0.25rem;
}

.message-card {
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 0.8rem;
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: all 0.3s;
}

.message-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.message-card.unread {
    border-left: 5px solid #2A6F97;
    background: linear-gradient(to right, #E6F2F9 0%, white 10%);
}

.message-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.message-recipients {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.message-from {
    font-weight: 700;
    color: #2A6F97;
    font-size: 1.05rem;
}

.message-to {
    font-size: 0.9rem;
    color: #50555B;
}

.message-badge {
    background: #2A6F97;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.message-badge.read {
    background: #50555B;
}

.message-date {
    font-size: 0.85rem;
    color: #50555B;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.message-content {
    font-size: 1.05rem;
    color: #50555B;
    line-height: 1.6;
    margin-bottom: 1rem;
    white-space: pre-wrap;
}

.message-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.action-btn {
    background: white;
    border: 2px solid #2A6F97;
    color: #2A6F97;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
}

.action-btn:hover {
    background: #2A6F97;
    color: white;
}

.action-btn.delete {
    border-color: #dc3545;
    color: #dc3545;
}

.action-btn.delete:hover {
    background: #dc3545;
    color: white;
}

.no-messages {
    text-align: center;
    padding: 3rem;
    color: #999;
    font-style: italic;
}

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

.message-card.new-message,
.shopping-item.new-item {
    animation: slideIn 0.3s ease-out;
}

/* ========================================
   CALENDAR/MONTH VIEW
   ======================================== */

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.75rem;
}

.day-header {
    background: linear-gradient(135deg, #2A6F97 0%, #1D4563 100%);
    color: white;
    font-weight: 700;
    text-align: center;
    padding: 1rem 0.5rem;
    border-radius: 0.6rem;
    font-size: 1rem;
}

.calendar-day {
    background: #E6F2F9;
    border: 2px solid #e0e0e0;
    border-radius: 0.8rem;
    padding: 0.75rem;
    min-height: 140px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.calendar-day:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    border-color: #2A6F97;
}

.calendar-day.today {
    border: 3px solid #2A6F97;
    background: linear-gradient(135deg, #E6F2F9 0%, #E6F2F9 100%);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.calendar-day.past-day {
    background: #f5f5f5;
    opacity: 0.6;
}

.calendar-day.past-day::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
            to bottom right,
            transparent 0%,
            transparent calc(50% - 1px),
            #ccc calc(50% - 1px),
            #ccc calc(50% + 1px),
            transparent calc(50% + 1px),
            transparent 100%
    );
    pointer-events: none;
    z-index: 1;
}

.calendar-day.past-day .day-number,
.calendar-day.past-day .day-info {
    position: relative;
    z-index: 2;
}

.calendar-day.other-month {
    background: #fafafa;
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

.calendar-day.has-event {
    border: 3px solid #28a745 !important;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.3);
}

.day-number {
    font-weight: 700;
    font-size: 1.3rem;
    color: #50555B;
    margin-bottom: 0.5rem;
}

.calendar-day.today .day-number {
    color: #2A6F97;
}

.day-info {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.85rem;
}

.day-weather {
    color: #50555B;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.day-meal {
    color: #50555B;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.day-meal .meal-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.day-meal span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

.day-tasks,
.day-appointments {
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.day-tasks {
    color: #2A6F97;
}

.day-appointments {
    color: #28a745;
}

.task-badge,
.appointment-badge {
    padding: 0.15rem 0.5rem;
    border-radius: 0.4rem;
    font-weight: 700;
    font-size: 0.75rem;
}

.task-badge {
    background: #2A6F97;
    color: white;
}

.appointment-badge {
    background: #28a745;
    color: white;
}

.empty-cell {
    min-height: 140px;
}

.calendar-legend {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid #e0e0e0;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #50555B;
}

.legend-box {
    width: 30px;
    height: 30px;
    border-radius: 0.4rem;
    border: 2px solid #e0e0e0;
    flex-shrink: 0;
}

.legend-box.today {
    border: 3px solid #2A6F97;
    background: linear-gradient(135deg, #E6F2F9 0%, #E6F2F9 100%);
}

.legend-box.past {
    background: #f5f5f5;
    opacity: 0.6;
    position: relative;
}

.legend-box.past::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
            to bottom right,
            transparent 0%,
            transparent calc(50% - 1px),
            #ccc calc(50% - 1px),
            #ccc calc(50% + 1px),
            transparent calc(50% + 1px),
            transparent 100%
    );
}

.legend-box.regular {
    background: #E6F2F9;
}

.mobile-indicators {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;
    margin-top: auto;
}

.mobile-indicators i {
    font-size: 1.1rem;
}

/* ========================================
   SHOPPING LIST
   ======================================== */

.shopping-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.shopping-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid #eee;
    transition: background 0.2s;
}

.shopping-item:hover {
    background: #E6F2F9;
}

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

.shopping-item.bought {
    background: #f0f7f0;
}

.item-left {
    display: flex;
    align-items: center;
    flex-grow: 1;
}

.item-checkbox {
    width: 24px;
    height: 24px;
    margin-right: 1rem;
    cursor: pointer;
    accent-color: #2A6F97;
}

.item-name {
    flex-grow: 1;
    font-size: 1.05rem;
    color: #50555B;
}

.shopping-item.bought .item-name {
    text-decoration: line-through;
    color: #999;
}

.item-delete-btn {
    background: transparent;
    border: none;
    color: #dc3545;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.3rem 0.6rem;
    transition: all 0.2s;
    opacity: 0;
}

.shopping-item:hover .item-delete-btn {
    opacity: 1;
}

.item-delete-btn:hover {
    color: #c82333;
    transform: scale(1.1);
}

.no-items {
    text-align: center;
    padding: 3rem;
    color: #999;
    font-style: italic;
}

/* ========================================
   EVENT BANNER
   ======================================== */

.event-banner {
    background: linear-gradient(135deg, #2A6F97 0%, #1D4563 100%);
    color: white;
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    animation: slideDown 0.3s ease-out;
}

.event-banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 1rem;
    flex-wrap: wrap;
}

.event-banner-content i {
    font-size: 1.3rem;
    flex-shrink: 0;
}

.event-banner-content strong {
    flex: 1;
    min-width: 0;
}

.event-dates {
    font-size: 0.85rem;
    opacity: 0.9;
    font-weight: normal;
    white-space: nowrap;
    flex-shrink: 0;
}

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

.current-event {
    border-left: 4px solid #28a745;
    background: #f0f9f4;
}


/* ========================================
   FLATPICKR CUSTOMIZATION
   ======================================== */

.flatpickr-calendar {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 0.6rem;
    font-size: 1.2rem !important;
}

.flatpickr-time input {
    font-size: 1.5rem !important;
    height: 50px !important;
    padding: 10px !important;
}

.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
    font-size: 1.5rem !important;
    height: 50px !important;
    line-height: 50px !important;
}

.flatpickr-time input:focus {
    border-color: #2A6F97;
}

.flatpickr-time .arrowUp,
.flatpickr-time .arrowDown {
    width: 30px !important;
    height: 30px !important;
}

.flatpickr-time .arrowUp:after,
.flatpickr-time .arrowDown:after {
    border-width: 8px !important;
}

/* Mobile Flatpickr adjustments - IMPORTANT: More specific selectors */
@media (max-width: 768px) {
    /* Force calendar to be smaller on mobile */
    .flatpickr-calendar {
        font-size: 0.9rem !important;
        max-width: 320px !important;
        width: auto !important;
    }

    /* Scale down time picker specifically */
    .flatpickr-calendar.hasTime .flatpickr-time {
        max-height: 45px !important;
        height: 45px !important;
    }

    .flatpickr-calendar.hasTime .flatpickr-time input {
        font-size: 1rem !important;
        height: 45px !important;
        padding: 5px !important;
        width: 38px !important;
    }

    .flatpickr-calendar.hasTime .flatpickr-time .flatpickr-time-separator,
    .flatpickr-calendar.hasTime .flatpickr-time .flatpickr-am-pm {
        font-size: 1rem !important;
        height: 45px !important;
        line-height: 45px !important;
        padding: 0 4px !important;
    }

    .flatpickr-calendar.hasTime .flatpickr-time .numInputWrapper {
        width: 38px !important;
    }

    .flatpickr-calendar.hasTime .flatpickr-time .arrowUp,
    .flatpickr-calendar.hasTime .flatpickr-time .arrowDown {
        width: 20px !important;
        height: 20px !important;
    }

    .flatpickr-calendar.hasTime .flatpickr-time .arrowUp:after,
    .flatpickr-calendar.hasTime .flatpickr-time .arrowDown:after {
        border-width: 4px !important;
    }

    /* Date picker calendar adjustments */
    .flatpickr-calendar .flatpickr-months {
        padding: 5px 0 !important;
    }

    .flatpickr-calendar .flatpickr-current-month {
        font-size: 1rem !important;
        padding: 5px 0 !important;
    }

    .flatpickr-calendar .flatpickr-day {
        max-width: 36px !important;
        max-height: 36px !important;
        line-height: 36px !important;
        font-size: 0.9rem !important;
    }

    .flatpickr-calendar .flatpickr-weekday {
        font-size: 0.8rem !important;
    }
}

@media (max-width: 480px) {
    .flatpickr-calendar {
        max-width: 280px !important;
    }

    .flatpickr-calendar.hasTime .flatpickr-time input {
        width: 34px !important;
        font-size: 0.95rem !important;
    }

    .flatpickr-calendar.hasTime .flatpickr-time .numInputWrapper {
        width: 34px !important;
    }
}
/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 992px) {
    .calendar-grid {
        gap: 0.5rem;
    }

    .calendar-day {
        min-height: 110px;
        padding: 0.5rem;
    }

    .day-number {
        font-size: 1.1rem;
    }

    .day-info {
        font-size: 0.75rem;
        gap: 0.3rem;
    }

    .day-header {
        padding: 0.75rem 0.25rem;
        font-size: 0.85rem;
    }

    .task-badge,
    .appointment-badge {
        font-size: 0.7rem;
        padding: 0.1rem 0.4rem;
    }
}

@media (max-width: 768px) {
    .day-navigation,
    .week-navigation,
    .month-navigation {
        padding: 1rem;
    }

    .day-navigation h2,
    .week-navigation h2 {
        font-size: 1.3rem;
        margin-bottom: 0.75rem;
    }

    .week-navigation h2 {
        font-size: 1.5rem;
    }

    .month-navigation h2 {
        font-size: 1.4rem;
        margin-bottom: 0.75rem;
    }

    .lists-header h2,
    .messages-header h2,
    .shopping-header h2 {
        font-size: 1.6rem;
    }

    .nav-buttons,
    .week-nav-buttons,
    .month-nav-buttons {
        gap: 0.5rem;
    }

    .month-nav-buttons {
        flex-wrap: wrap;
    }

    .nav-btn,
    .week-nav-btn,
    .month-nav-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
        min-height: 44px;
    }

    .week-nav-btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }

    .month-nav-btn {
        padding: 0.5rem 0.9rem;
        font-size: 0.8rem;
    }

    .today-btn {
        padding: 0.5rem 1rem;
    }

    .add-task-section,
    .edit-form-section,
    .add-message-section {
        padding: 1.25rem;
    }

    .advanced-form-container,
    .recurring-tasks-section {
        padding: 1.5rem;
    }

    .quick-add-form {
        flex-direction: column;
        gap: 0.75rem;
    }

    .task-input {
        width: 100% !important;
        flex: 1 1 100% !important;
        min-height: 44px;
        height: 44px;
        font-size: 16px;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .assign-select {
        width: 100% !important;
        flex: 1 1 100% !important;
        min-height: 44px;
        font-size: 16px;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .time-input-wrapper {
        width: 100% !important;
        flex: 1 1 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .add-btn {
        width: 100% !important;
        flex: 1 1 100% !important;
        min-height: 44px;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .time-input {
        font-size: 16px;
    }

    /* Critical: Force Flatpickr alternate inputs to behave on mobile */
    input.flatpickr-input,
    input.flatpickr-input.form-control.input {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        min-height: 44px !important;
        font-size: 16px !important;
        padding: 0.8rem !important;
        background: white !important;
        color: #50555B !important;
        border: 2px solid #e0e0e0 !important;
        border-radius: 0.6rem !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }

    /* Ensure the hidden real input doesn't cause layout issues */
    input[type="text"].flatpickr-input:not(.form-control) {
        display: none !important;
    }

    .advanced-buttons {
        grid-template-columns: 1fr;
    }

    .task-item {
        flex-wrap: wrap;
    }

    .task-time {
        min-width: 60px;
        font-size: 0.85rem;
    }

    .task-assigned {
        display: block;
        width: 100%;
        margin-left: 0;
        margin-top: 0.5rem;
    }
}
@media (max-width: 480px) {
    .calendar-grid {
        gap: 0.2rem;
    }

    .calendar-day {
        min-height: 65px;
        padding: 0.3rem;
    }

    .day-number {
        font-size: 1rem;
    }

    .mobile-indicators i {
        font-size: 1rem;
    }

    .day-header {
        padding: 0.4rem 0.05rem;
        font-size: 0.65rem;
    }

    .empty-cell {
        min-height: 65px;
    }

    .month-navigation h2 {
        font-size: 1.2rem;
    }

    .month-nav-btn {
        padding: 0.4rem 0.75rem;
        font-size: 0.75rem;
    }
}
/* ========================================
   GLOBAL LAYOUT / NAVBAR / UTILITIES
   ======================================== */

body:not(.auth-page):not(.forgot-password-page):not(.reset-password-page) { padding-top: 70px; }

.navbar {
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary) 70%);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
}

.nav-link { color: #fff !important; font-weight: 600; margin-right: .75rem; }
.nav-link:hover { opacity: 0.8; }
.clock-date-container,.clock,.date-display,.user-info { color:#fff; }
.user-info { background: rgba(255,255,255,0.2); border-radius:.5rem; }
.logout-btn { background: rgba(255,255,255,.2); border:2px solid rgba(255,255,255,.5); color:#fff; border-radius:.5rem; }

.navbar .dropdown-menu {
    min-width: 12rem;
}

@media (min-width: 992px) {
    .navbar .dropdown-menu {
        left: auto;
        right: 0;
    }
}

@media (max-width: 991.98px) {
    .navbar .dropdown-menu {
        position: static;
        width: 100%;
        margin-top: 0.5rem;
        text-align: center;
    }
}

.feedback-btn { background: var(--color-accent); border:2px solid var(--color-accent); color:#fff; border-radius:.5rem; }
.feedback-btn:hover { background: var(--color-secondary); border-color: var(--color-secondary); color: #fff; }

.modal-header-warning { background: linear-gradient(90deg, var(--color-accent), #d9653d); color: #fff; }
.modal-header-brand { background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); color: #fff; }
.modal-body-scroll { max-height: 70vh; overflow-y: auto; }
.hidden { display: none; }

.empty-icon { font-size: 3rem; color: #b5bcc2; display: block; margin-bottom: 1rem; }
.link-unstyled { text-decoration: none; color: inherit; }
.logo-wide { width: 300px; height: auto; }
.text-link-primary { color: var(--color-primary); text-decoration: none; font-weight: 600; }
.centered-block { text-align: center; margin-top: 1.5rem; }
.turnstile-error { display:none; color:#dc3545; text-align:center; margin-bottom:1rem; font-size:.9rem; }

/* login/auth */
.auth-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background: var(--color-background); padding-top:0; }
.login-container { background: #fff; border-radius:1.5rem; padding:3rem; box-shadow:0 10px 40px rgba(0,0,0,.2); max-width:450px; width:100%; }
.login-header { text-align:center; margin-bottom:2rem; }
.login-header h1 { color: var(--color-text); }
.login-header p, .stat-label, .message-meta { color: var(--color-text); }
.login-btn { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); color:#fff; border:none; padding:1rem; border-radius:.6rem; font-weight:700; width:100%; }
.login-btn:hover { transform: translateY(-2px); }

.weather-debug { background:#fff; padding:10px; border-radius:5px; margin-top:10px; font-size:.85em; }
.weather-debug-pre { margin:5px 0; white-space: pre-wrap; }
.event-text { color:#1f7a42; font-weight:600; }
.section-spacing-top { margin-top:2rem; }
.task-time-reset { margin-left:0; }
.task-left-column { flex-direction:column; align-items:flex-start; gap:.25rem; }
.task-row { display:flex; align-items:center; gap:.75rem; width:100%; }
.current-tag { background:#1f7a42; color:#fff; padding:.125rem .5rem; border-radius:4px; font-size:.75rem; font-weight:600; }
.task-name-strong { font-weight:600; }
.task-delete-btn { background:#dc3545; border:none; color:#fff; }
.month-task-icon { color: var(--color-primary); }
.month-appointment-icon { color:#1f7a42; }
.event-day-legend { border:3px solid #1f7a42; background:#fff; }
.select-days-label { font-size:1rem; margin-bottom:.75rem; display:block; }
.month-suffix { margin-left:.5rem; }
.inactive-label { color:#dc3545; font-size:.9rem; }

/* month.php multi-view enhancements (aligned to current palette) */
.view-toggle-container {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.view-toggle-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    padding: 0.5rem 1.1rem;
    border-radius: 0.6rem;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.view-toggle-btn:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.28); }
.view-toggle-btn.active { background: #fff; color: var(--color-primary); border-color: #fff; }

.calendar-list-view { display: flex; flex-direction: column; gap: 0; }
.list-day-card {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 1.2rem 1.4rem;
    border-bottom: 1px solid #e3e8ee;
    transition: background-color 0.2s ease;
}

.list-day-card:hover { background: #f4f9fc; color: inherit; text-decoration: none; }
.list-day-card:first-child { border-radius: 1rem 1rem 0 0; }
.list-day-card:last-child { border-radius: 0 0 1rem 1rem; border-bottom: none; }
.list-day-today { background: linear-gradient(135deg, #edf7fc 0%, #e6f2f9 100%); border-left: 4px solid var(--color-primary); }
.list-day-past { opacity: 0.62; }

.list-day-events { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.list-event-banner {
    background: linear-gradient(135deg, #2a8d56 0%, #1f7a42 100%);
    color: #fff;
    padding: 0.28rem 0.75rem;
    border-radius: .4rem;
    font-size: .82rem;
    font-weight: 700;
}

.list-day-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .7rem; flex-wrap: wrap; gap: .5rem; }
.list-day-date { display: flex; align-items: center; gap: .6rem; }
.list-day-number { font-size: 1.55rem; font-weight: 800; color: var(--color-text); line-height: 1; min-width: 2rem; }
.list-day-today .list-day-number { color: var(--color-primary); }
.list-day-name { font-size: 1.04rem; font-weight: 700; color: var(--color-text); }
.list-day-badge-today { background: var(--color-primary); color: #fff; padding: .15rem .6rem; border-radius: 1rem; font-size: .72rem; font-weight: 700; }
.list-day-badge-tomorrow { background: #f6c445; color: #473200; padding: .15rem .6rem; border-radius: 1rem; font-size: .72rem; font-weight: 700; }

.list-day-weather { display: flex; align-items: center; gap: .45rem; background: #eef7fc; padding: .38rem .72rem; border-radius: .5rem; }
.list-weather-emoji { font-size: 1.2rem; }
.list-weather-temp { font-weight: 700; color: var(--color-text); }
.list-weather-condition { color: #6a737b; font-size: .82rem; }

.list-day-content { display: flex; flex-direction: column; gap: .58rem; padding-left: .2rem; }
.list-day-section { display: flex; align-items: flex-start; gap: .72rem; }
.list-section-label { min-width: 105px; font-size: .83rem; font-weight: 700; color: var(--color-primary); }
.list-section-value { font-size: .93rem; color: var(--color-text); flex: 1; }
.list-section-empty { color: #9ca3aa; font-style: italic; }
.list-task-list { display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.list-task-item { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--color-text); }
.list-task-time { min-width: 110px; flex-shrink: 0; font-weight: 700; color: var(--color-primary); font-size: .84rem; }
.list-task-bullet { color: var(--color-primary); font-weight: 700; font-size: 1.1rem; }
.list-task-name { flex: 1; }
.list-task-recurring { color: #8f9aa5; font-size: .8rem; }

.appointments-controls { display: flex; justify-content: flex-end; margin-bottom: .75rem; }
.appointments-empty-toggle { display: inline-flex; align-items: center; gap: .45rem; font-size: .92rem; font-weight: 700; color: var(--color-text); background: #fff; border: 1px solid #d6dfe6; border-radius: .5rem; padding: .38rem .62rem; }
.appointments-day-empty { color: #75808a; font-style: italic; }

/* edittask.php recurring one-off warning */
.recurring-edit-warning {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: linear-gradient(135deg, #fff7dd 0%, #ffeec0 100%);
    border: 2px solid #f4c556;
    border-left: 6px solid #f0b429;
    border-radius: 1rem;
    padding: 1.3rem;
    margin-bottom: 1.6rem;
}

.recurring-edit-warning-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0b429;
    color: #5f4307;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.recurring-edit-warning-content strong { display: block; color: #6d4b00; margin-bottom: .4rem; }
.recurring-edit-warning-content p { color: #70530f; margin: 0 0 .4rem 0; line-height: 1.45; }

/* tasks.php recurring ghost action controls */
.ghost-action-buttons { display: flex; gap: .4rem; align-items: center; position: relative; z-index: 2; }
.ghost-edit-btn,
.ghost-skip-btn {
    width: 36px;
    height: 36px;
    border-radius: .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s ease;
}

.ghost-edit-btn {
    border: none;
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

.ghost-edit-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }

.ghost-skip-btn {
    background: #fff;
    color: #d97809;
    border: 2px solid #e28b25;
}

.ghost-skip-btn:hover,
.ghost-skip-btn.is-skipped { background: #e28b25; border-color: #e28b25; color: #fff; }

.task-item.ghost.ghost-skipped { opacity: .35; background: #f5f6f7; }
.task-item.ghost.ghost-skipped .task-name { text-decoration: line-through; }
.skip-badge { background: #e28b25; color: #fff; font-size: .68rem; padding: .15rem .5rem; border-radius: .3rem; margin-left: .45rem; font-weight: 700; }

/* meals.php responsive update for textarea inputs */
.meal-input {
    font-size: 16px;
    padding: 0.75rem 0.9rem;
    line-height: 1.3;
    resize: vertical;
    min-height: 44px;
}

@media (max-width: 768px) {
    .list-task-time { min-width: 96px; font-size: .8rem; }
    .ghost-edit-btn,
    .ghost-skip-btn { width: 40px; height: 40px; }
    .recurring-edit-warning { flex-direction: column; align-items: center; text-align: center; }
}

@media (max-width: 576px) {
    .view-toggle-btn { padding: .4rem .85rem; font-size: .84rem; }
    .list-day-card { padding: 1rem; }
    .list-day-header,
    .list-day-section { flex-direction: column; align-items: flex-start; }
    .list-section-label { min-width: auto; }
    .meal-item { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; }
    .day-label { width: 100%; }
}


/* ========================================
   PAGE-SPECIFIC MOVED STYLES
   ======================================== */

/* forgot-password.php */
body.forgot-password-page {
            background: var(--color-background);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Figtree', sans-serif;
            padding: 2rem 0;
        }

        .reset-container {
            background: white;
            border-radius: 1.5rem;
            padding: 3rem;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
            max-width: 500px;
            width: 100%;
        }

        .reset-header {
            text-align: center;
            margin-bottom: 2rem;
        }

        .reset-header h1 {
            font-size: 2rem;
            font-weight: 700;
            color: #333;
            margin-bottom: 0.5rem;
        }

        .reset-header .emoji {
            font-size: 3rem;
            margin-bottom: 1rem;
        }

        .reset-header p {
            color: #666;
            font-size: 1rem;
            line-height: 1.6;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-label {
            font-weight: 600;
            color: #333;
            margin-bottom: 0.5rem;
        }

        .form-control {
            padding: 0.9rem;
            border: 2px solid #e0e0e0;
            border-radius: 0.6rem;
            font-size: 1rem;
            transition: border 0.3s;
        }

        .form-control:focus {
            outline: none;
            border-color: #2A6F97;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .reset-btn {
            background: linear-gradient(135deg, #2A6F97 0%, #1D4563 100%);
            color: white;
            border: none;
            padding: 1rem;
            border-radius: 0.6rem;
            font-weight: 700;
            font-size: 1.1rem;
            cursor: pointer;
            transition: transform 0.2s;
            width: 100%;
        }

        .reset-btn:hover {
            transform: translateY(-2px);
        }

        .alert {
            border-radius: 0.6rem;
            padding: 1rem;
            margin-bottom: 1.5rem;
        }

        .back-link {
            text-align: center;
            margin-top: 1.5rem;
        }

        .back-link a {
            color: #2A6F97;
            text-decoration: none;
            font-weight: 600;
        }

        .back-link a:hover {
            text-decoration: underline;
        }

        @media (max-width: 576px) {
            .reset-container {
                margin: 1rem;
                padding: 2rem 1.5rem;
            }

            .reset-header h1 {
                font-size: 1.6rem;
            }
        }

/* reset-password.php */
body.reset-password-page {
            background: var(--color-background);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Figtree', sans-serif;
            padding: 2rem 0;
        }

        .reset-container {
            background: white;
            border-radius: 1.5rem;
            padding: 3rem;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
            max-width: 500px;
            width: 100%;
        }

        .reset-header {
            text-align: center;
            margin-bottom: 2rem;
        }

        .reset-header h1 {
            font-size: 2rem;
            font-weight: 700;
            color: #333;
            margin-bottom: 0.5rem;
        }

        .reset-header .emoji {
            font-size: 3rem;
            margin-bottom: 1rem;
        }

        .reset-header p {
            color: #666;
            font-size: 1rem;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-label {
            font-weight: 600;
            color: #333;
            margin-bottom: 0.5rem;
        }

        .form-control {
            padding: 0.9rem;
            border: 2px solid #e0e0e0;
            border-radius: 0.6rem;
            font-size: 1rem;
            transition: border 0.3s;
        }

        .form-control:focus {
            outline: none;
            border-color: #2A6F97;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .reset-btn {
            background: linear-gradient(135deg, #2A6F97 0%, #1D4563 100%);
            color: white;
            border: none;
            padding: 1rem;
            border-radius: 0.6rem;
            font-weight: 700;
            font-size: 1.1rem;
            cursor: pointer;
            transition: transform 0.2s;
            width: 100%;
        }

        .reset-btn:hover {
            transform: translateY(-2px);
        }

        .alert {
            border-radius: 0.6rem;
            padding: 1rem;
            margin-bottom: 1.5rem;
        }

        .login-link {
            text-align: center;
            margin-top: 1.5rem;
        }

        .login-link a {
            color: #2A6F97;
            text-decoration: none;
            font-weight: 600;
        }

        .login-link a:hover {
            text-decoration: underline;
        }

        .password-toggle {
            position: relative;
        }

        .password-toggle-btn {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: #666;
            cursor: pointer;
            font-size: 1.2rem;
            padding: 0;
            z-index: 10;
        }

        .password-toggle-btn:hover {
            color: #2A6F97;
        }

        .password-strength {
            margin-top: 0.5rem;
            font-size: 0.85rem;
        }

        .strength-weak { color: #dc3545; }
        .strength-medium { color: #ffc107; }
        .strength-strong { color: #28a745; }

        @media (max-width: 576px) {
            .reset-container {
                margin: 1rem;
                padding: 2rem 1.5rem;
            }

            .reset-header h1 {
                font-size: 1.6rem;
            }
        }

/* meals.php */


/* settings.php */
.user-item {
        background: #f8f9fa;
        transition: all 0.3s;
    }

    .user-item:hover {
        background: #e9ecef;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .user-email {
        font-size: 0.9rem;
    }

    .btn-check:checked + .btn-outline-primary,
    .btn-check:checked + .btn-outline-info {
        font-weight: 600;
    }
.color-option.color-blue { background-color: #2A6F97; }
.color-option.color-green { background-color: #1f7a42; }
.color-option.color-orange { background-color: #F27D52; }
.color-option.color-pink { background-color: #c45f92; }
.color-option.color-purple { background-color: #1D4563; }
.color-option.color-red { background-color: #dc3545; }
.color-option.color-teal { background-color: #2a9d8f; }
.color-option.color-yellow { background-color: #f4b942; }


/* Home page widget layout */
.home-masonry {
    column-count: 2;
    column-gap: 1.5rem;
}

.home-masonry .card {
    display: inline-block;
    width: 100%;
    margin-bottom: 1.5rem;
    break-inside: avoid;
    vertical-align: top;
    border: none;
    border-radius: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.event-banner,
.home-masonry .card {
    animation: sectionFadeUp 0.45s ease-out both;
}

.event-banner {
    animation-delay: 0.05s;
}

.home-masonry .card:nth-child(1) { animation-delay: 0.1s; }
.home-masonry .card:nth-child(2) { animation-delay: 0.16s; }
.home-masonry .card:nth-child(3) { animation-delay: 0.22s; }
.home-masonry .card:nth-child(4) { animation-delay: 0.28s; }


.home-masonry .card-title {
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.agenda-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e6e6e6;
}

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

.agenda-item label {
    flex-grow: 1;
    margin-left: 0.5rem;
}

.weather-hour {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: .6rem;
    padding: .4rem .7rem;
    margin-bottom: .4rem;
}

.unread {
    border-left: 5px solid var(--color-primary);
    background: var(--color-background-accent);
    padding-left: 0.75rem;
}

.mark-read-btn {
    font-size: .85rem;
    padding: .25rem .6rem;
}

.home-week-masonry {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.home-day-card {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
    border-radius: 0.8rem;
    padding: 0.9rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.home-day-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

.home-day-card .day-name {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: .4rem;
}

.home-day-card.mon  { background: #e3f0f7; }
.home-day-card.mon .day-name  { color: #2A6F97; }
.home-day-card.tue  { background: #e6f2f9; }
.home-day-card.tue .day-name  { color: #1D4563; }
.home-day-card.wed  { background: #fef2ec; }
.home-day-card.wed .day-name  { color: #F27D52; }
.home-day-card.thu  { background: #eaf3f8; }
.home-day-card.thu .day-name  { color: #2A6F97; }
.home-day-card.fri  { background: #eef6fa; }
.home-day-card.fri .day-name  { color: #1D4563; }
.home-day-card.sat  { background: #f4f8fb; }
.home-day-card.sat .day-name  { color: #2A6F97; }
.home-day-card.sun  { background: #fef2ec; }
.home-day-card.sun .day-name  { color: #F27D52; }

@media (max-width: 992px) {
    .home-masonry { column-count: 1; }
}

@media (max-width: 768px) {
    .home-week-masonry { grid-template-columns: 1fr; }
}

.app-toast-container {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.app-toast {
    min-width: 260px;
    max-width: 360px;
    color: #fff;
    border-radius: 0.5rem;
    padding: 0.75rem 2.2rem 0.75rem 0.9rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    position: relative;
    animation: toast-in 0.25s ease;
}

.app-toast-success { background: #1f8b4c; }
.app-toast-error { background: #bb2d3b; }
.app-toast-info { background: #2a6f97; }

.app-toast-close {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
}

.app-toast-hide {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.meal-idea-picker {
    background: #fff;
    border: 1px solid #dbe6ee;
    border-radius: 0.6rem;
    padding: 0.75rem;
}

.meal-idea-search {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid #d0d7de;
    border-radius: 0.4rem;
    margin-bottom: 0.5rem;
}

.meal-idea-options {
    max-height: 150px;
    overflow-y: auto;
    border-top: 1px solid #eef2f5;
    padding-top: 0.35rem;
}

.meal-idea-option {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.planned-recipe-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.recipe-link {
    background: #e6f2f9;
    color: #2A6F97;
    border: 1px solid #b7d6e8;
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    text-decoration: none;
    font-size: 0.85rem;
}

.recipe-link-button {
    cursor: pointer;
}

.meal-idea-card {
    width: 100%;
    border: 1px solid #dbe6ee;
    border-radius: 0.6rem;
    background: #fff;
    padding: 0.8rem;
}

.modal-open-lock { overflow: hidden; }

.recipe-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 34, 51, 0.55);
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.recipe-modal-overlay.show { display: flex; }

.recipe-modal-card {
    width: min(760px, 100%);
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.recipe-modal-card-sm { width: min(520px, 100%); }

.recipe-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1rem;
    color: #fff;
}

.recipe-modal-header h5 { margin: 0; font-size: 1.1rem; }
.recipe-modal-header-brand { background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); }
.recipe-modal-header-warning { background: linear-gradient(90deg, var(--color-accent), #d9653d); }

.recipe-modal-close {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.7rem;
    line-height: 1;
}

.recipe-modal-body {
    padding: 1rem 1.1rem;
    max-height: 70vh;
    overflow-y: auto;
}

.meal-idea-options { display: none; }
.meal-idea-options.show {
    display: block;
    margin-top: 0.4rem;
    border: 1px solid #dbe6ee;
    border-radius: 0.5rem;
    background: #fff;
    max-height: 170px;
    overflow-y: auto;
}

.meal-idea-result-row {
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: 0.5rem 0.65rem;
}
.meal-idea-result-row:hover { background: #eef5fa; }
.meal-idea-empty { padding: 0.5rem 0.65rem; color: #6c757d; font-size: 0.9rem; }
.selected-idea-chips { margin-top: 0.55rem; }
.chip-x { font-weight: 700; }

.meal-ideas-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}

.meal-idea-list-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
}

.category-chip-wrap { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.category-chip {
    border: 1px solid #b7d6e8;
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    background: #fff;
    color: #2A6F97;
    font-size: 0.9rem;
}
.category-chip.active {
    background: #2A6F97;
    color: #fff;
    border-color: #2A6F97;
}

@media (max-width: 992px) {
    .meal-ideas-grid { grid-template-columns: 1fr; }
}

/* PWA install prompt */
.pwa-install-prompt {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    width: min(680px, calc(100% - 2rem));
    z-index: 1080;
    background: #1D4563;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.9rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    padding: 0.8rem 0.9rem;
}

.pwa-install-prompt__content {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.85rem;
}

.pwa-install-prompt__icon {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    display: grid;
    place-items: center;
    font-size: 1rem;
}

.pwa-install-prompt__title {
    margin: 0 0 0.1rem;
    font-weight: 700;
    font-size: 0.97rem;
    line-height: 1.25;
}

.pwa-install-prompt__text {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.35;
    opacity: 0.95;
}

.pwa-install-prompt__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.pwa-install-prompt__actions .btn {
    white-space: nowrap;
}

.pwa-install-prompt__install {
    color: #1D4563;
    border-color: #fff;
    font-weight: 600;
}

@media (max-width: 767px) {
    .pwa-install-prompt {
        width: calc(100% - 1rem);
        bottom: 0.5rem;
        padding: 0.75rem;
    }

    .pwa-install-prompt__content {
        grid-template-columns: auto 1fr;
    }

    .pwa-install-prompt__actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
        margin-top: 0.2rem;
    }
}




.meal-idea-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.meal-idea-edit-btn,
.meal-idea-cancel-btn {
    background: transparent;
    border: 1px solid #2A6F97;
    color: #2A6F97;
    border-radius: 0.5rem;
    padding: 0.3rem 0.7rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.meal-idea-edit-btn:hover,
.meal-idea-cancel-btn:hover {
    background: #2A6F97;
    color: #fff;
}

.meal-idea-form-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}