/* ============================================================
   Botanical Almanac Design System
   ============================================================ */

:root {
    /* New palette */
    --bg-cream: #FAF6F1;
    --surface: #FFFFFF;
    --text-primary: #2D2A26;
    --text-secondary: #6B6560;
    --forest: #2D5F2D;
    --terracotta: #C4653A;
    --sage: #8FA78B;
    --border: #E5DED6;
    --highlight: #E8F0E4;

    /* Legacy aliases so JS inline styles auto-inherit */
    --primary-color: #2D5F2D;
    --secondary-color: #C4653A;
    --accent-color: #2D5F2D;
    --light-bg: #FAF6F1;
    --dark-bg: #E8F0E4;
    --white: #FFFFFF;
    --black: #2D2A26;
    --shadow: rgba(0, 0, 0, 0.06);
}

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

body {
    font-family: 'Source Sans 3', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg-cream);
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 0.95rem;
    position: relative;
}

/* Paper-grain noise texture overlay */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

h1, h2, h3 {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-weight: 600;
    color: var(--text-primary);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* ============================================================
   Header — Desktop: white bar with text-tab nav
   ============================================================ */
@media (min-width: 769px) {
    header {
        text-align: center;
        margin: -20px -20px 20px -20px;
        padding: 18px 20px 0 20px;
        background-color: var(--surface);
        color: var(--text-primary);
        position: sticky;
        top: 0;
        z-index: 1000;
        border-bottom: 1px solid var(--border);
        display: block !important;
        transition: padding 0.3s ease;
    }

    header.scrolled {
        padding: 12px 20px 0 20px;
    }

    h1 {
        font-size: 1.8rem;
        margin-bottom: 14px;
        transition: all 0.3s ease;
        color: var(--text-primary);
    }

    header.scrolled h1 {
        font-size: 1.4rem;
        margin-bottom: 10px;
    }
}

/* Header illustration — desktop only, below sticky header */
.header-illustration {
    display: none;
}

@media (min-width: 769px) {
    .header-illustration {
        display: block;
        height: 120px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        margin: -20px -20px 20px -20px;
        opacity: 0.85;
    }

    /* Seasonal variants — paths relative to this stylesheet */
    .header-illustration.season-spring {
        background-image: url('assets/illustrations/header-spring.png');
    }
    .header-illustration.season-summer {
        background-image: url('assets/illustrations/header-summer.png');
    }
    .header-illustration.season-harvest {
        background-image: url('assets/illustrations/header-harvest.png');
    }
    .header-illustration.season-default {
        background-image: url('assets/illustrations/header-terracotta.png');
    }
}

/* Section dividers — botanical strip between major sections (desktop only) */
@media (min-width: 769px) {
    .weather-display::after,
    .month-navigation::after {
        content: '';
        display: block;
        height: 30px;
        margin: 20px auto -10px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.5;
        max-width: 300px;
    }

    .container.season-spring .weather-display::after,
    .container.season-spring .month-navigation::after {
        background-image: url('assets/illustrations/divider-spring.png');
    }
    .container.season-summer .weather-display::after,
    .container.season-summer .month-navigation::after {
        background-image: url('assets/illustrations/divider-summer.png');
    }
    .container.season-harvest .weather-display::after,
    .container.season-harvest .month-navigation::after {
        background-image: url('assets/illustrations/divider-harvest.png');
    }
    .container.season-default .weather-display::after,
    .container.season-default .month-navigation::after {
        background-image: url('assets/illustrations/divider-terracotta.png');
    }
}

/* Corner vignettes — decorative corners on the page container (desktop only) */
@media (min-width: 769px) {
    .container {
        position: relative;
    }

    .container::before,
    .container::after {
        content: '';
        position: absolute;
        width: 160px;
        height: 140px;
        opacity: 0.18;
        pointer-events: none;
        z-index: 0;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .container::before {
        top: 90px;
        left: -30px;
        background-position: top left;
    }

    .container::after {
        bottom: 40px;
        right: -30px;
        background-position: bottom right;
        transform: scaleX(-1);
    }

    .container.season-spring::before,
    .container.season-spring::after {
        background-image: url('assets/illustrations/corner-spring.png');
    }
    .container.season-summer::before,
    .container.season-summer::after {
        background-image: url('assets/illustrations/corner-summer.png');
    }
    .container.season-harvest::before,
    .container.season-harvest::after {
        background-image: url('assets/illustrations/corner-harvest.png');
    }
    .container.season-default::before,
    .container.season-default::after {
        background-image: url('assets/illustrations/corner-terracotta.png');
    }
}

/* Journal empty state — spot illustration replaces emoji (desktop only) */
@media (min-width: 769px) {
    .journal-empty-state {
        position: relative;
    }

    .journal-empty-state > .icon-size-jumbo {
        display: none;
    }

    .journal-empty-state::before {
        content: '';
        display: block;
        width: 180px;
        height: 150px;
        margin: 0 auto 10px;
        opacity: 0.6;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .container.season-spring .journal-empty-state::before {
        background-image: url('assets/illustrations/spot-spring.png');
    }
    .container.season-summer .journal-empty-state::before {
        background-image: url('assets/illustrations/spot-summer.png');
    }
    .container.season-harvest .journal-empty-state::before {
        background-image: url('assets/illustrations/spot-harvest.png');
    }
    .container.season-default .journal-empty-state::before {
        background-image: url('assets/illustrations/spot-terracotta.png');
    }
}

.description {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-secondary);
    margin: 0 auto;
    max-width: 700px;
}

.main-layout {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ============================================================
   Content Sections — thin border, no shadow
   ============================================================ */
.top-controls {
    background: var(--surface);
    border-radius: 8px;
    border: 1px solid var(--border);
    padding: 20px;
    margin-bottom: 20px;
}

.location-row {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    align-items: center;
}

.units-row {
    display: flex;
    gap: 25px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    background: var(--bg-cream);
    padding: 15px;
    border-radius: 6px;
}

.unit-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.unit-group label {
    font-weight: 500;
    color: var(--text-secondary);
}

.unit-group select {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background-color: var(--surface);
    color: var(--text-primary);
    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
    font-size: 0.95rem;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.unit-group select:hover {
    border-color: var(--sage);
}

.unit-group select:focus {
    border-color: var(--sage);
    box-shadow: 0 0 0 3px rgba(143, 167, 139, 0.2);
}

.weather-display {
    background: var(--surface);
    border-radius: 8px;
    border: 1px solid var(--border);
    padding: 20px;
    margin-bottom: 20px;
}

.search-bar {
    background: var(--surface);
    border-radius: 8px;
    border: 1px solid var(--border);
    padding: 20px;
    margin-bottom: 20px;
}

.search-section-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.3rem;
    color: var(--text-primary);
    margin-bottom: 15px;
    font-weight: 600;
}

.search-container {
    width: 100%;
    margin-bottom: 15px;
}

.search-box {
    width: 100%;
    padding: 12px 20px;
    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
    font-size: 1rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: var(--surface);
}

.search-box:focus {
    border-color: var(--sage);
    box-shadow: 0 0 0 3px rgba(143, 167, 139, 0.2);
}

.month-navigation {
    background: var(--surface);
    border-radius: 8px;
    border: 1px solid var(--border);
    padding: 20px;
    margin-bottom: 20px;
}

.month-nav-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.3rem;
    color: var(--text-primary);
    margin-bottom: 15px;
    font-weight: 600;
}

/* ============================================================
   Period Buttons — segmented control on desktop
   ============================================================ */
.calendar-nav {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.month-btn {
    padding: 10px 22px;
    background-color: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 0;
    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    min-width: 110px;
    text-align: center;
    box-shadow: none;
    margin-left: -1px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.period-name {
    line-height: 1.2;
}

.period-dates {
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.75;
    line-height: 1.2;
}

.month-btn:first-child {
    border-radius: 6px 0 0 6px;
    margin-left: 0;
}

.month-btn:last-child {
    border-radius: 0 6px 6px 0;
}

/* When only one button */
.month-btn:first-child:last-child {
    border-radius: 6px;
}

.month-btn:hover {
    background-color: var(--highlight);
    transform: none;
}

.month-btn.active {
    background-color: var(--terracotta);
    color: var(--surface);
    border-color: var(--terracotta);
    transform: none;
    box-shadow: none;
    z-index: 1;
    position: relative;
}

.location-action-btn {
    padding: 10px 22px;
    background-color: var(--terracotta);
    color: var(--surface);
    border: none;
    border-radius: 6px;
    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s;
    min-width: 120px;
    text-align: center;
    box-shadow: none;
}

.location-action-btn:hover {
    background-color: #b35830;
    transform: none;
}

/* Custom period buttons */
.add-period-btn {
    padding: 8px 16px;
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 8px;
}

.add-period-btn:hover {
    background: var(--highlight);
    border-color: var(--sage);
    color: var(--forest);
}

.period-btn-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    position: relative;
}

.period-actions-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    font-size: 1.1rem;
    opacity: 0.6;
    transition: opacity 0.2s;
    color: inherit;
}

.period-actions-btn:hover {
    opacity: 1;
}

.period-actions-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--surface);
    border-radius: 6px;
    border: 1px solid var(--border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 10;
    min-width: 100px;
    display: none;
}

.period-actions-menu button {
    display: block;
    width: 100%;
    padding: 8px 16px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
    font-size: 0.9rem;
}

.period-actions-menu button:hover {
    background: var(--highlight);
}

.scroll-indicator {
    text-align: center;
    padding: 15px;
    color: var(--forest);
    cursor: pointer;
    transition: background-color 0.15s;
    background: var(--surface);
    border-radius: 8px;
    border: 1px solid var(--border);
    margin-bottom: 20px;
}

.scroll-indicator:hover {
    background-color: var(--highlight);
    transform: none;
}

.scroll-indicator-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.scroll-indicator-text {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--forest);
}

.scroll-arrow {
    font-size: 1.5rem;
    animation: bounce 2s infinite;
    color: var(--terracotta);
}

.scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--terracotta);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    transform: translateY(8px);
    z-index: 100;
    border: none;
    font-size: 1.2rem;
}

.scroll-to-top.visible {
    opacity: 1;
    transform: translateY(0);
}

.scroll-to-top:hover {
    background: #b35830;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0;
    }

    header {
        margin: 0;
        padding: 10px;
    }

    header.scrolled {
        padding: 8px;
    }

    h1 {
        font-size: 1.5rem;
        margin-bottom: 12px;
    }

    header.scrolled h1 {
        font-size: 1.3rem;
        margin-bottom: 8px;
    }

    .quick-jump-menu {
        padding: 8px;
        gap: 6px;
    }

    .quick-jump-btn {
        padding: 6px 12px;
        font-size: 0.9rem;
        min-width: calc(50% - 6px);
    }

    header.scrolled .quick-jump-btn {
        padding: 4px 10px;
        font-size: 0.85rem;
    }
}

/* ============================================================
   Plant Grid & Category Cards
   ============================================================ */
.calendar-content {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 20px !important;
    margin-top: 20px !important;
}

.calendar-content.hidden-by-tab {
    display: none !important;
}

.category-card {
    background-color: var(--surface);
    border-radius: 8px;
    padding: 24px;
    border: 1px solid var(--border);
    transition: border-color 0.15s;
    height: 100%;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    box-shadow: none;
}

.category-card:hover {
    border-color: var(--sage);
    transform: none;
    box-shadow: none;
}

.category-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.category-icon {
    width: 40px;
    height: 40px;
    margin-right: 12px;
    background-color: transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.category-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.15rem;
    color: var(--text-primary);
    font-weight: 600;
}

.plant-list {
    list-style-type: none;
}

.plant-item {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
}

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

/* Remove emoji prefix on plant items */
.plant-item::before {
    content: none;
}

.task-item {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
}

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

/* Remove emoji prefix on task items */
.task-item::before {
    content: none;
}

.item-label {
    width: 100%;
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background-color 0.1s;
    border-radius: 4px;
}

.item-label:hover {
    background: var(--highlight);
}

.item-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--terracotta);
    margin: 0;
}

.item-text {
    flex: 1;
    padding: 2px 0;
}

/* Custom item action buttons (edit/delete) */
.custom-item-actions {
    display: flex;
    gap: 2px;
    margin-left: auto;
    flex-shrink: 0;
}

.custom-item-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0;
    transition: background-color 0.15s, color 0.15s;
}

.custom-item-btn svg {
    width: 15px;
    height: 15px;
}

.custom-item-btn-edit:hover {
    background: var(--highlight);
    color: var(--sage);
}

.custom-item-btn-delete:hover {
    background: rgba(220, 53, 69, 0.08);
    color: #dc3545;
}

/* Desktop: hide buttons until row hover/focus */
@media (min-width: 769px) {
    .custom-item-actions {
        opacity: 0;
        transition: opacity 0.15s;
    }

    .item-label:hover .custom-item-actions,
    .item-label:focus-within .custom-item-actions {
        opacity: 1;
    }
}

/* Mobile: always visible, larger touch targets */
@media (max-width: 768px) {
    .custom-item-actions {
        opacity: 0.7;
    }

    .custom-item-btn {
        width: 32px;
        height: 32px;
    }

    .custom-item-btn svg {
        width: 16px;
        height: 16px;
    }
}

/* Quick-add inline field */
.quick-add-container {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    border-top: 1px dashed var(--border);
    background: var(--bg-cream);
    border-radius: 0 0 8px 8px;
}

.quick-add-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.9rem;
    background: var(--surface);
    color: var(--text-primary);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.quick-add-input::placeholder {
    color: var(--text-secondary);
    font-style: italic;
}

.quick-add-input:focus {
    outline: none;
    border-color: var(--sage);
    box-shadow: 0 0 0 2px rgba(143, 167, 139, 0.25);
}

.quick-add-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1.5px solid var(--terracotta);
    border-radius: 4px;
    color: var(--terracotta);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background-color 0.15s, color 0.15s;
}

.quick-add-btn svg {
    width: 16px;
    height: 16px;
}

.quick-add-btn:hover:not(:disabled) {
    background: rgba(196, 101, 58, 0.08);
}

.quick-add-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Sort toggle button in category header */
.custom-sort-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0;
    margin-left: auto;
    flex-shrink: 0;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.custom-sort-btn svg {
    width: 15px;
    height: 15px;
}

.custom-sort-btn:hover {
    background: var(--highlight);
    color: var(--forest);
    border-color: var(--sage);
}

.custom-sort-btn.active {
    background: var(--highlight);
    color: var(--forest);
    border-color: var(--sage);
}

/* Drag handle for custom item reorder */
.custom-item-drag-handle {
    width: 20px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: grab;
    color: var(--text-secondary);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

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

.custom-item-drag-handle svg {
    width: 14px;
    height: 14px;
}

/* Hide drag handles when alpha sort is active */
.plant-list.alpha-sorted .custom-item-drag-handle {
    display: none;
}

/* Dragging state */
li.dragging {
    opacity: 0.4;
    background: var(--highlight);
}

/* Desktop: show drag handle on hover/focus-within */
@media (min-width: 769px) {
    .custom-item-drag-handle {
        opacity: 0;
        transition: opacity 0.15s;
    }

    li.custom-item:hover .custom-item-drag-handle,
    li.custom-item:focus-within .custom-item-drag-handle,
    li.dragging .custom-item-drag-handle {
        opacity: 1;
    }
}

/* Mobile: drag handle always visible */
@media (max-width: 768px) {
    .custom-item-drag-handle {
        opacity: 0.5;
    }
}

.highlight {
    background-color: #ffe066;
    padding: 2px;
    border-radius: 3px;
}

.no-results {
    text-align: center;
    padding: 20px;
    font-size: 1.2rem;
    color: var(--text-secondary);
    grid-column: 1 / -1;
}

.mobile-warning {
    display: none;
    text-align: center;
    padding: 10px;
    background-color: #fff3e0;
    margin-bottom: 20px;
    border-radius: 6px;
}

@media (max-width: 1024px) {
    .main-layout {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
    }

    .action-bar {
        flex-direction: column;
    }

    .search-container {
        width: 100%;
    }

    .ai-advice-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Subtler fade-in animation (8px instead of 20px) */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.4s ease forwards;
}

/* ============================================================
   Footer
   ============================================================ */
footer {
    margin-top: 30px;
    padding: 20px 0;
    text-align: center;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

footer .footer-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    text-align: center;
}

footer .social-share-container {
    margin-bottom: 5px;
}

footer p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* Backup controls in footer */
.backup-controls {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

/* Backup reminder banner */
.backup-reminder {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 0 auto 16px;
    max-width: 800px;
    flex-wrap: wrap;
}

.backup-reminder-text {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
    color: #5d4037;
    flex: 1;
    min-width: 200px;
}

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

.backup-reminder-btn {
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
    font-weight: 500;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.15s;
}

.backup-reminder-btn--export {
    background: var(--forest);
    color: white;
}

.backup-reminder-btn--export:hover {
    background: #245024;
}

.backup-reminder-btn--dismiss {
    background: #e0e0e0;
    color: #555;
}

.backup-reminder-btn--dismiss:hover {
    background: #ccc;
}

/* ============================================================
   Weather Section
   ============================================================ */
.weather-section {
    background: var(--surface);
    border-radius: 8px;
    border: 1px solid var(--border);
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

.weather-location-row {
    margin-bottom: 10px;
}

.weather-location-info {
    margin-bottom: 18px;
    font-size: 1.08em;
}

.weather-forecast-table {
    width: 100%;
    font-size: 0.95em;
    margin-top: 10px;
    border-collapse: separate;
    border-spacing: 0 4px;
    background: var(--bg-cream);
    border-radius: 8px;
    overflow: hidden;
}

.weather-forecast-table th, .weather-forecast-table td {
    padding: 7px 14px;
    text-align: center;
}

.weather-forecast-table th {
    background: var(--highlight);
    color: var(--forest);
    font-weight: 600;
    border-bottom: 1px solid var(--border);
}

.weather-forecast-table td {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.weather-forecast-table tr:last-child td {
    border-bottom: none;
}

.weather-forecast-table td svg {
    display: block;
    margin: 0 auto;
    cursor: pointer;
}

.weather-current {
    margin-bottom: 10px;
    font-size: 1.08em;
}

.location-input {
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
    font-size: 1rem;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.location-input:focus {
    border-color: var(--sage);
    box-shadow: 0 0 0 3px rgba(143, 167, 139, 0.2);
}

.location-input-group {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 200px;
}

.location-results-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px var(--shadow);
    z-index: 100;
    max-height: 300px;
    overflow-y: auto;
}

.location-result-item {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 0.95em;
    border-bottom: 1px solid var(--border);
}

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

.location-result-item:hover {
    background: var(--highlight);
}

.search-location-btn {
    white-space: nowrap;
    min-width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.geo-location-btn {
    white-space: nowrap;
    min-width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.search-icon, .location-icon {
    font-size: 1.1em;
}

.location-clear-btn {
    position: absolute;
    right: 15px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    opacity: 0.7;
}

.location-clear-btn:hover {
    background-color: rgba(0,0,0,0.05);
    color: var(--text-primary);
}

.location-btn {
    padding: 10px 18px;
    background-color: var(--terracotta);
    color: var(--surface);
    border: none;
    border-radius: 6px;
    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s;
}

.location-btn:hover {
    background-color: #b35830;
}

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

/* ============================================================
   Modals — backdrop blur, 16px radius, serif titles
   ============================================================ */
.weather-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(45, 42, 38, 0.3);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
}

.weather-modal {
    background: var(--surface);
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    padding: 28px 32px 24px 32px;
    min-width: 340px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
}

.weather-modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 1.4em;
    color: var(--text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.15s;
}

.weather-modal-close:hover {
    color: var(--terracotta);
}

.weather-modal-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.2em;
    margin-bottom: 18px;
    color: var(--text-primary);
    font-weight: 600;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.weather-modal-chart {
    margin-bottom: 18px;
    background: var(--bg-cream);
    border-radius: 8px;
    padding: 12px 8px 8px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.weather-modal-hourly-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 4px;
    font-size: 0.95em;
    background: var(--bg-cream);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 8px;
}

.weather-modal-hourly-table th, .weather-modal-hourly-table td {
    padding: 6px 12px;
    text-align: center;
}

.weather-modal-hourly-table th {
    background: var(--highlight);
    color: var(--forest);
    font-weight: 600;
}

.weather-modal-hourly-table td {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.weather-modal-hourly-table tr:last-child td {
    border-bottom: none;
}

.weather-forecast-table tr:nth-child(even) td,
.weather-modal-hourly-table tr:nth-child(even) td {
    background: var(--bg-cream);
}

/* Visually hidden class for accessibility */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ============================================================
   AI Assistants Grid
   ============================================================ */
.ai-assistants-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.ai-assistant-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
    text-align: center;
}

.ai-assistant-btn:hover {
    border-color: var(--sage);
    background-color: var(--highlight);
    transform: none;
    box-shadow: none;
}

.ai-assistant-btn:active {
    transform: none;
}

.ai-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.ai-assistant-btn span {
    font-weight: 500;
    color: var(--text-primary);
}

@media (max-width: 600px) {
    .ai-assistants-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Focus states — terracotta outline */
.month-btn:focus, .location-btn:focus, .weather-modal-close:focus {
    outline: 2px solid var(--terracotta) !important;
    outline-offset: 2px;
}

/* Duplicate item-label/checkbox/text selectors removed — already defined above */

/* ============================================================
   Desktop Quick Jump Navigation — text-tab style
   ============================================================ */
.quick-jump-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    justify-content: center;
    padding: 0;
    max-width: 800px;
    margin: 0 auto;
    background: transparent;
    border-radius: 0;
}

.quick-jump-title {
    width: 100%;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.quick-jump-btn {
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--text-secondary);
    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    justify-content: center;
}

.nav-icon {
    font-size: 1.1em;
    display: inline-block;
}

.quick-jump-btn:hover {
    color: var(--terracotta);
    border-bottom-color: var(--terracotta);
    background: transparent;
    transform: none;
}

.quick-jump-btn:focus {
    outline: 2px solid var(--terracotta);
    outline-offset: 2px;
    box-shadow: none;
}

.quick-jump-btn.active {
    background: transparent;
    color: var(--terracotta);
    border-bottom-color: var(--terracotta);
    box-shadow: none;
    transform: none;
    font-weight: 600;
}

@media (max-width: 799px) {
    header {
        padding: 10px;
        top: 0;
        border-radius: 0;
        margin: -20px -20px 20px -20px;
        width: calc(100% + 40px);
    }

    h1 {
        font-size: 1.5rem;
        margin-bottom: 12px;
    }

    .quick-jump-menu {
        padding: 8px;
        gap: 6px;
    }

    .quick-jump-btn {
        padding: 6px 8px;
        font-size: 0.85rem;
        flex: 0 0 calc(50% - 3px);
        border-bottom: 2px solid transparent;
    }

    .nav-icon {
        font-size: 1.1em;
    }
}

.ai-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
}

@media (max-width: 768px) {
    .location-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .location-row {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }

    .search-location-btn,
    .geo-location-btn {
        width: 100%;
        min-width: 0;
    }

    .units-row {
        padding: 12px;
        gap: 15px;
        justify-content: space-between;
    }

    .unit-group {
        flex-basis: calc(50% - 10px);
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .unit-group select {
        width: 100%;
    }

    .search-bar {
        flex-direction: column;
    }

    .search-container {
        width: 100%;
    }

    .ai-advice-btn {
        width: 100%;
    }

    .mobile-warning {
        display: block;
    }
}

/* ============================================================
   Select All Container
   ============================================================ */
.category-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.select-all-container {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    padding: 6px 10px;
    background-color: var(--highlight);
    border-radius: 6px;
}

.select-all-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 500;
    color: var(--forest);
}

.select-all-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--terracotta);
}

/* ============================================================
   Garden Journal
   ============================================================ */
.garden-journal {
    background: var(--surface);
    border-radius: 8px;
    border: 1px solid var(--border);
    padding: 25px;
    margin-bottom: 20px;
    position: relative;
    box-shadow: none;
}

.journal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.journal-title {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 600;
}

.journal-btn {
    padding: 10px 16px;
    background: var(--forest);
    color: white;
    border: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s;
    box-shadow: none;
}

.journal-btn:hover {
    background: #245024;
    transform: none;
    box-shadow: none;
}

.journal-add-btn {
    padding: 10px 16px;
    background: var(--terracotta);
    color: white;
    border: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s;
    box-shadow: none;
}

.journal-add-btn:hover {
    background: #b35830;
    transform: none;
    box-shadow: none;
}

/* Journal tabs — outlined chips, active fills terracotta */
.journal-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.journal-tab {
    padding: 8px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--text-secondary);
}

.journal-tab:hover {
    background: var(--highlight);
    transform: none;
}

.journal-tab.active {
    background: var(--terracotta);
    color: white;
    border-color: var(--terracotta);
    box-shadow: none;
}

/* Desktop specific journal improvements */
@media (min-width: 768px) {
    .garden-journal {
        padding: 30px;
    }

    .journal-header {
        margin-bottom: 30px;
    }

    .journal-title {
        font-size: 1.6rem;
    }

    .journal-actions {
        display: flex;
        gap: 12px;
    }

    .journal-btn, .journal-add-btn {
        padding: 12px 20px;
        font-size: 1rem;
        min-width: 120px;
    }

    .journal-tabs {
        margin-bottom: 25px;
    }

    .journal-tab {
        padding: 10px 20px;
        min-width: 120px;
        text-align: center;
    }
}

/* Mobile specific journal fixes */
@media (max-width: 768px) {
    .journal-tabs {
        gap: 4px;
    }

    .journal-tab {
        flex: 1 1 0;
        text-align: center;
        padding: 8px 10px;
        font-size: 0.9rem;
    }
}

/* Remove quick navigation hamburger and menu styles (no longer used) */
.quick-nav-toggle-btn,
.quick-nav-menu-container {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
}

/* Desktop-only Quick Navigation Menu */
@media (min-width: 769px) {
    .quick-jump-menu {
        display: flex !important;
        flex-wrap: wrap;
        gap: 0;
        justify-content: center;
        padding: 0;
        max-width: 800px;
        margin: 0 auto;
        background: transparent;
        border-radius: 0;
        height: auto !important;
        width: auto !important;
    }

    .quick-jump-title {
        width: 100%;
        text-align: center;
        font-size: 0.8rem;
        color: var(--text-secondary);
        margin-bottom: 8px !important;
        font-weight: 400;
        display: block !important;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .quick-jump-btn {
        padding: 8px 16px;
        background: transparent;
        border: none;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        color: var(--text-secondary);
        font-size: 0.9rem;
        cursor: pointer;
        transition: color 0.15s, border-color 0.15s;
        font-weight: 500;
        display: flex !important;
        align-items: center;
        gap: 6px;
        flex: 0 0 auto;
        justify-content: center;
    }
}

/* Hide desktop navigation on mobile/tablet */
@media (max-width: 768px) {
    .quick-jump-menu,
    .quick-jump-btn,
    .quick-jump-title {
        display: none !important;
    }

    header {
        display: none !important;
    }

    .main-layout {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .container {
        padding-top: 5px !important;
    }
}

/* ============================================================
   Bottom Navigation Bar (mobile / tablet)
   ============================================================ */
@media (max-width: 768px) {
    .bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 60px;
        background: var(--surface);
        border-top: 1px solid var(--border);
        display: flex;
        justify-content: space-around;
        align-items: center;
        z-index: 1205;
        box-shadow: none;
    }

    .bottom-nav-btn {
        flex: 1 1 0;
        background: none;
        border: none;
        outline: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        color: var(--text-secondary);
        padding: 6px 0 0 0;
        cursor: pointer;
        min-width: 44px;
        min-height: 44px;
        transition: color 0.15s;
        border-radius: 0;
        border-top: 2px solid transparent;
    }

    .bottom-nav-btn:active,
    .bottom-nav-btn.active {
        color: var(--terracotta);
        border-top-color: var(--terracotta);
        background: transparent;
    }

    .bottom-nav-label {
        font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
        font-size: 0.75em;
        margin-top: 2px;
        display: block;
    }

    /* FAB hidden — header "New Entry" button is visible at full width */
    .journal-fab-btn {
        display: none !important;
    }

    .scroll-to-top {
        bottom: 80px !important;
        right: 20px !important;
    }

    /* Period buttons: individual chips on mobile */
    .calendar-nav {
        gap: 8px;
    }

    .month-btn {
        border-radius: 6px;
        margin-left: 0;
        min-width: 80px;
        padding: 8px 12px;
        font-size: 0.9rem;
    }

    .month-btn:first-child {
        border-radius: 6px;
    }

    .month-btn:last-child {
        border-radius: 6px;
    }

    .period-dates {
        font-size: 0.7rem;
    }
}

@media (min-width: 769px) {
    .bottom-nav {
        display: none !important;
    }
}

/* Adjust main layout padding when header is visible */
@media (min-width: 769px) {
    .main-layout {
        padding-top: 20px;
    }

    .container {
        padding-top: 20px;
    }
}

/* ============================================================
   Search & AI Section
   ============================================================ */
.ai-advice-btn {
    padding: 12px 16px;
    background: var(--terracotta);
    color: white;
    border: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s;
    margin-bottom: 15px;
}

.ai-advice-btn:hover {
    background-color: #b35830;
    transform: none;
}

.ai-advice-btn:active {
    transform: none;
}

.search-container {
    width: 100%;
    margin-bottom: 15px;
}

/* Desktop layout - horizontal arrangement */
@media (min-width: 768px) {
    .search-bar {
        position: relative;
    }

    .search-section-title {
        width: 60%;
        float: left;
        margin-bottom: 20px;
    }

    .ai-advice-btn {
        position: absolute;
        right: 20px;
        top: 20px;
        margin-bottom: 0;
        min-width: 220px;
        justify-content: center;
        font-size: 1rem;
        padding: 14px 20px;
    }

    .search-container {
        clear: both;
    }

    .ai-hint-text {
        margin-left: 5px;
        width: 60%;
    }
}

/* Mobile layout */
@media (max-width: 600px) {
    .ai-advice-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 16px;
        margin-bottom: 12px;
    }

    .search-section-title {
        text-align: center;
        margin-bottom: 12px;
    }

    .search-box {
        padding: 14px 20px !important;
    }
}

/* AI advice row with selection badge */
.ai-advice-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.selection-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: var(--terracotta);
    color: white;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
    white-space: nowrap;
    animation: badgePop 0.2s ease-out;
}

@keyframes badgePop {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* AI hint text */
.ai-hint-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: -8px 0 12px 0;
    padding-left: 4px;
    font-style: italic;
}

@media (max-width: 600px) {
    .ai-hint-text {
        text-align: center;
        margin-bottom: 16px;
        padding: 0 10px;
    }
}

/* ============================================================
   Planting Schedule Styles
   ============================================================ */
.month-nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

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

.data-manage-btn {
    padding: 8px 12px;
    background: var(--forest);
    color: white;
    border: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s;
}

.data-manage-btn:hover {
    background-color: #245024;
    transform: none;
}

/* Month buttons improved styling */
.calendar-nav {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

/* Desktop improvements for planting schedule */
@media (min-width: 768px) {
    .month-navigation {
        padding: 25px;
    }

    .month-nav-title {
        font-size: 1.4rem;
        margin-bottom: 18px;
    }

    .calendar-explainer {
        font-size: 1rem;
        margin-bottom: 18px;
        max-width: 80%;
        color: var(--text-secondary);
    }

    .month-btn {
        flex: 1;
        max-width: 220px;
    }
}

/* Mobile-specific adjustments */
@media (max-width: 600px) {
    .month-nav-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .data-management-buttons {
        width: 100%;
        flex-wrap: wrap;
    }

    .data-manage-btn {
        flex: 1 1 40%;
        justify-content: center;
        padding: 10px 8px;
        font-size: 0.9rem;
    }

    .calendar-explainer {
        margin-bottom: 12px;
        font-size: 0.95rem;
        color: var(--text-secondary);
    }
}

/* Desktop grid improvements */
@media (min-width: 1024px) {
    .calendar-content {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .calendar-content {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 767px) {
    .calendar-content {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .category-card {
        padding: 16px;
    }
}

/* ============================================================
   Custom Modal Styles (confirm dialogs)
   ============================================================ */
.custom-confirm-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(45, 42, 38, 0.3);
    backdrop-filter: blur(3px);
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-confirm-modal {
    background: var(--surface);
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    padding: 25px;
    max-width: 450px;
    width: 100%;
}

.confirm-modal-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 15px;
}

.confirm-modal-message {
    margin-bottom: 25px;
    line-height: 1.5;
}

.confirm-modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.confirm-modal-cancel-btn {
    background: var(--bg-cream);
    color: var(--text-primary);
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
}

.confirm-modal-ok-btn {
    background: var(--terracotta);
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
    font-weight: 500;
}

/* Export and Import Modal Styles */
.export-option, .import-option {
    display: flex;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.export-option:hover, .import-option:hover {
    background: var(--highlight);
    border-color: var(--sage);
}

.export-option-selected, .import-option-selected {
    background: var(--highlight);
    border-color: var(--sage);
    box-shadow: 0 0 0 2px rgba(143, 167, 139, 0.2);
}

/* Delete Modal Styles */
.delete-confirm-modal-title {
    color: #d32f2f;
}

.delete-confirm-btn {
    background: #d32f2f;
    color: white;
}

/* Custom Entries Styles */
.custom-entries-toolbar {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin: 15px 0;
    padding: 0 5px;
    flex-wrap: wrap;
}

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

/* Toolbar buttons — outlined, subtle */
.toolbar-btn {
    padding: 7px 14px;
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.15s, border-color 0.15s;
}

.toolbar-btn:hover {
    background: var(--highlight);
    border-color: var(--sage);
}

.toolbar-btn-add {
    border-color: var(--terracotta);
    color: var(--terracotta);
}

.toolbar-btn-add:hover {
    background: rgba(196, 101, 58, 0.08);
    border-color: var(--terracotta);
}

/* Modal form field input/select */
.modal-field-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
    font-size: 0.95rem;
    background: var(--surface);
    color: var(--text-primary);
}

.modal-field-input:focus {
    border-color: var(--sage);
    box-shadow: 0 0 0 3px rgba(143, 167, 139, 0.2);
    outline: none;
}

@media (max-width: 768px) {
    .toolbar-btn {
        padding: 6px 10px;
        font-size: 0.85rem;
    }
}

/* When journal is visible, ensure it has proper spacing */
.journal-content {
    height: 100%;
    overflow-y: auto;
}

/* ============================================================
   Photo Carousel (journal timeline & view modal)
   ============================================================ */
.photo-carousel {
    position: relative;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 12px;
    background: var(--bg-cream);
}

.carousel-track {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
}

.carousel-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.carousel-slide.active {
    opacity: 1;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

.carousel-prev,
.carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.85);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.15s, transform 0.15s;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.carousel-prev { left: 8px; }
.carousel-next { right: 8px; }

.carousel-prev:hover,
.carousel-next:hover {
    background: white;
    transform: translateY(-50%) scale(1.1);
}

.carousel-counter {
    position: absolute;
    bottom: 8px;
    right: 10px;
    background: rgba(0, 0, 0, 0.55);
    color: white;
    font-size: 0.8rem;
    padding: 2px 10px;
    border-radius: 12px;
    z-index: 2;
    font-family: 'Source Sans 3', sans-serif;
    font-variant-numeric: tabular-nums;
}

.carousel-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .carousel-track {
        aspect-ratio: 4 / 3;
    }

    .carousel-prev,
    .carousel-next {
        width: 32px;
        height: 32px;
        font-size: 1.2rem;
    }
}

/* ============================================================
   Mobile Journal Usability
   ============================================================ */

/* Journal Entry Modal Photo Preview Styles */
.photo-preview {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    margin: 5px;
    display: inline-block;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

.photo-remove-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 1;
}

.photo-preview:hover .photo-remove-btn {
    opacity: 1;
}

/* Always visible on touch devices */
@media (hover: none) {
    .photo-remove-btn {
        opacity: 0.8;
    }
}

/* Weather forecast styles for mobile */
@media (max-width: 600px) {
    .weather-forecast-table {
        display: block;
        width: 100%;
        border-spacing: 0;
        background: none;
    }
    .weather-forecast-table thead {
        display: none;
    }
    .weather-forecast-table tbody {
        display: block;
        width: 100%;
    }
    .weather-forecast-table tr {
        display: block;
        background: var(--bg-cream);
        margin-bottom: 12px;
        border-radius: 8px;
        border: 1px solid var(--border);
        padding: 10px 12px;
        width: 100%;
        box-sizing: border-box;
        cursor: pointer;
    }
    .weather-forecast-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 0;
        border: none;
        font-size: 0.95rem;
        background: none;
        width: 100%;
        box-sizing: border-box;
    }
    /* Date cell: display as card header */
    .weather-forecast-table td[data-label="Date"] {
        font-weight: 600;
        font-size: 1rem;
        color: var(--forest);
        border-bottom: 1px solid var(--border);
        padding-bottom: 8px;
        margin-bottom: 4px;
    }
    .weather-forecast-table td[data-label="Date"]::before {
        display: none;
    }
    /* Weather cell: center the icon+text */
    .weather-forecast-table td[data-label="Weather"] {
        justify-content: center;
        text-align: center;
        padding: 8px 0 4px;
        border-top: 1px solid var(--border);
        margin-top: 4px;
    }
    .weather-forecast-table td[data-label="Weather"]::before {
        display: none;
    }
    .weather-forecast-table td::before {
        content: attr(data-label);
        font-weight: 500;
        color: var(--forest);
        flex: 0 0 auto;
        min-width: 80px;
        text-align: left;
        font-size: 0.88rem;
    }
    /* Hide sparkline on mobile — tap row for hourly detail */
    .weather-forecast-table .sparkline-cell {
        display: none;
    }
}

/* ============================================================
   Journal Active Mode — full-width view on all screen sizes
   ============================================================ */

body.journal-active .main-layout > *:not(#garden-journal):not(.scroll-to-top):not(.bottom-nav) {
    display: none !important;
}

body.journal-active #garden-journal {
    animation: journalFadeIn 0.3s ease-out;
}

/* Desktop: keep header nav visible so user can navigate back */
@media (min-width: 769px) {
    body.journal-active header {
        display: block !important;
    }
}

/* Mobile: hide header (bottom nav handles navigation) */
@media (max-width: 768px) {
    body.journal-active header {
        display: none !important;
    }
}

/* Close button for journal view */
.journal-close-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
}

.journal-close-btn:hover {
    background: var(--highlight);
    color: var(--text-primary);
    border-color: var(--sage);
}

/* On mobile, bottom nav handles navigation — hide the Back button */
@media (max-width: 768px) {
    .journal-close-btn {
        display: none;
    }
}

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

/* ============================================================
   Icon sizing classes
   ============================================================ */
.icon-size-sm {
    font-size: 1.1em;
}

.icon-size-md {
    font-size: 1.2em;
}

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

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

.icon-size-xxl {
    font-size: 2rem;
}

.icon-size-jumbo {
    font-size: 3rem;
    margin-bottom: 20px;
}

/* Hidden by default (JS-toggled sections) */
.hidden-default {
    display: none;
}

/* ============================================================
   Journal section styles
   ============================================================ */
.journal-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.journal-title-text {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--text-primary);
    font-size: 1.6rem;
}

.journal-actions-group {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.journal-btn-inline {
    padding: 8px 14px;
    background: var(--surface);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.journal-btn-inline:hover {
    background: var(--highlight);
    color: var(--text-primary);
    border-color: var(--sage);
}

.journal-add-btn-inline {
    padding: 8px 14px;
    background: var(--terracotta);
    color: white;
    border: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s;
}

.journal-add-btn-inline:hover {
    background: #b35830;
}

.journal-content-box {
    background: var(--surface);
    border-radius: 8px;
    padding: 24px;
    border: 1px solid var(--border);
}

/* Journal empty state */
.journal-empty-state {
    text-align: center;
    padding: 80px 20px;
}

.journal-empty-title {
    font-family: 'Playfair Display', Georgia, serif;
    margin-bottom: 12px;
    color: var(--text-primary);
    font-size: 1.3rem;
}

.journal-empty-text {
    margin-bottom: 24px;
    color: var(--text-secondary);
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.journal-empty-add-btn {
    padding: 10px 20px;
    background: var(--terracotta);
    color: white;
    border: none;
    border-radius: 6px;
    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.15s;
}

.journal-empty-add-btn:hover {
    background: #b35830;
}

/* Mobile journal header — stack vertically */
@media (max-width: 768px) {
    .journal-header-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .journal-title-text {
        font-size: 1.3rem;
        text-align: center;
    }

    .journal-actions-group {
        justify-content: center;
    }
}

/* ============================================================
   Modal shared styles
   ============================================================ */
.modal-overlay-high-z {
    z-index: 1300;
}

.modal-body-compact {
    max-width: 450px;
    padding: 25px;
}

.modal-body-wide {
    width: 90%;
    max-width: 800px;
}

.modal-body-form {
    max-width: 800px;
    padding: 25px;
}

.modal-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.modal-title-danger {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #d32f2f;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.modal-message {
    margin-bottom: 25px;
    line-height: 1.5;
    color: var(--text-primary);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.modal-actions-spread {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.modal-actions-end {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.modal-btn-cancel {
    background: var(--bg-cream);
    color: var(--text-primary);
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
}

.modal-btn-confirm {
    background: var(--terracotta);
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
    font-weight: 500;
}

.modal-btn-danger {
    background: #d32f2f;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
    font-weight: 500;
}

.modal-btn-accent {
    background: var(--forest);
}

.modal-btn-close {
    padding: 8px 16px;
    background: var(--bg-cream);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
}

.modal-btn-cancel-mr {
    background: var(--bg-cream);
    color: var(--text-primary);
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
    margin-right: 12px;
}

/* ============================================================
   Prompt generator modal styles
   ============================================================ */
.modal-section {
    margin: 20px 0;
}

.modal-description {
    margin-bottom: 15px;
    color: var(--text-secondary);
}

.modal-field-group {
    margin-bottom: 15px;
}

.modal-field-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.modal-textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 10px;
    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
}

.modal-textarea:focus {
    border-color: var(--sage);
    box-shadow: 0 0 0 3px rgba(143, 167, 139, 0.2);
    outline: none;
}

.modal-info-box {
    margin-bottom: 15px;
    padding: 12px;
    background: var(--highlight);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.modal-info-title {
    margin-bottom: 10px;
    color: var(--forest);
    font-size: 1rem;
    font-weight: 600;
}

.modal-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modal-checkbox-label {
    display: block;
}

.modal-checkbox-label input[type="checkbox"] {
    accent-color: var(--terracotta);
}

.modal-checkbox-hint {
    margin-left: 5px;
    color: var(--text-secondary);
    font-size: 0.9em;
}

.modal-button-row {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.modal-generated-output {
    background: var(--bg-cream);
    border-radius: 6px;
    border: 1px solid var(--border);
    padding: 15px;
    white-space: pre-wrap;
    font-family: monospace;
    max-height: 400px;
    overflow-y: auto;
    font-size: 0.9rem;
}

/* AI Assistants section in prompt modal */
.modal-ai-section {
    margin-top: 20px;
}

.modal-ai-section-title {
    margin-bottom: 15px;
    font-size: 1.1rem;
    color: var(--text-primary);
    font-weight: 600;
}

.ai-icon-chatgpt {
    background-color: #10a37f;
    color: white;
    border-radius: 8px;
}

.ai-icon-claude {
    background-color: #9A5CF2;
    color: white;
    border-radius: 8px;
}

.ai-icon-gemini {
    background-color: #1E88E5;
    color: white;
    border-radius: 8px;
}

.ai-icon-copilot {
    background-color: #0078d4;
    color: white;
    border-radius: 8px;
}

/* Import/Export option card styles */
.modal-option-icon {
    margin-right: 15px;
    font-size: 1.5rem;
}

.modal-option-content {
    flex-grow: 1;
}

.modal-option-title {
    font-weight: 500;
}

.modal-option-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.modal-file-input {
    margin-bottom: 20px;
}

/* ============================================================
   Journal entry form styles
   ============================================================ */
.form-row-flex {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.form-column-flex {
    flex: 1;
}

.form-label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.form-input {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
}

.form-input:focus {
    border-color: var(--sage);
    box-shadow: 0 0 0 3px rgba(143, 167, 139, 0.2);
    outline: none;
}

.form-textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
}

.form-textarea:focus {
    border-color: var(--sage);
    box-shadow: 0 0 0 3px rgba(143, 167, 139, 0.2);
    outline: none;
}

.form-harvest-container {
    margin-bottom: 15px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.form-harvest-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.form-harvest-fields {
    display: flex;
    gap: 10px;
}

.form-harvest-field {
    flex: 1;
}

.form-harvest-sublabel {
    display: block;
    margin-bottom: 5px;
}

.form-notes-group {
    margin-bottom: 15px;
}

.form-photos-group {
    margin-bottom: 15px;
}

.form-photo-select-btn {
    padding: 8px 12px;
    background: var(--forest);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
    font-weight: 500;
}

.form-photo-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    justify-content: flex-start;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

/* Bottom navigation icon styles */
.nav-icon-emoji {
    font-size: 1.5em;
}

/* Journal more button */
.journal-more-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    color: var(--text-secondary);
}

/* ============================================================
   Weather-to-Plants Bridge Callout
   ============================================================ */
.weather-callout:not(.hidden-default) {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--highlight);
    border: 1px solid var(--sage);
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 0.95rem;
    color: var(--text-primary);
    position: relative;
    animation: hintFadeIn 0.3s ease-out;
}

.weather-callout-icon {
    font-size: 1.4em;
    flex-shrink: 0;
}

.weather-callout-text {
    flex: 1;
}

.weather-callout-dismiss {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
    border-radius: 50%;
}

.weather-callout-dismiss:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
}

/* ============================================================
   Onboarding Hints
   ============================================================ */
.onboarding-hint {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-style: italic;
    padding: 10px 14px;
    border: 1px dashed var(--border);
    border-radius: 6px;
    margin: 8px 0 12px;
    background: var(--highlight);
    animation: hintFadeIn 0.3s ease-out;
}

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

/* Soil temperature legend */
.soil-temp-legend {
    font-size: 0.85em;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Frost date display in climate zone card */
.frost-date-info {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.frost-date-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 0.95em;
}

.frost-date-meta {
    color: var(--text-secondary);
    font-size: 0.9em;
}

.frost-date-disclaimer {
    font-size: 0.82em;
    color: var(--text-secondary);
    margin-top: 4px;
    font-style: italic;
}

/* Calendar explainer text */
.calendar-explainer {
    color: var(--text-secondary);
    margin-bottom: 15px;
}

/* ============================================================
   Schedule Tabs (Planting Calendar / TODO)
   ============================================================ */
.schedule-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}

.schedule-tab {
    padding: 8px 20px;
    border: 1.5px solid var(--border);
    border-radius: 20px;
    background: var(--surface);
    color: var(--text-secondary);
    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.schedule-tab:hover {
    border-color: var(--sage);
    color: var(--forest);
}

.schedule-tab.active {
    background: var(--forest);
    border-color: var(--forest);
    color: #fff;
}

@media (max-width: 768px) {
    .schedule-tabs {
        gap: 0;
    }
    .schedule-tab {
        flex: 1;
        text-align: center;
        border-radius: 0;
    }
    .schedule-tab:first-child {
        border-radius: 8px 0 0 8px;
    }
    .schedule-tab:last-child {
        border-radius: 0 8px 8px 0;
    }
}

/* ============================================================
   TODO List Styles
   ============================================================ */
.todo-content {
    margin-top: 10px;
}

.todo-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.todo-filter-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.todo-filter-select {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
    font-size: 0.9rem;
    color: var(--text-primary);
    cursor: pointer;
}

.todo-filter-select:focus {
    border-color: var(--sage);
    box-shadow: 0 0 0 3px rgba(143, 167, 139, 0.2);
    outline: none;
}

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

/* Quick-add form */
.todo-add-form {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.todo-quick-input {
    flex: 1;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
    font-size: 1rem;
    background: var(--surface);
    color: var(--text-primary);
    transition: border-color 0.2s;
}

.todo-quick-input:focus {
    border-color: var(--forest);
    box-shadow: 0 0 0 3px rgba(76, 111, 65, 0.15);
    outline: none;
}

.todo-quick-add-btn {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 8px;
    background: var(--forest);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}

.todo-quick-add-btn:hover {
    background: var(--sage);
}

/* TODO list */
.todo-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.todo-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: box-shadow 0.2s, opacity 0.2s;
}

.todo-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.todo-item--done {
    opacity: 0.55;
}

.todo-item--done .todo-item-text {
    text-decoration: line-through;
    color: var(--text-secondary);
}

.todo-item-checkbox {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--forest);
    cursor: pointer;
    flex-shrink: 0;
}

.todo-item-body {
    flex: 1;
    min-width: 0;
}

.todo-item-text {
    font-size: 1rem;
    line-height: 1.4;
    word-break: break-word;
}

.todo-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 5px;
}

.todo-meta-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.78rem;
    background: rgba(143, 167, 139, 0.15);
    color: var(--forest);
}

.todo-meta-badge--overdue {
    background: rgba(198, 90, 70, 0.12);
    color: var(--terracotta);
}

.todo-meta-badge--photos {
    background: rgba(143, 167, 139, 0.1);
    color: var(--sage);
}

.todo-item-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
}

.todo-item:hover .todo-item-actions {
    opacity: 1;
}

.todo-action-btn {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background 0.15s;
}

.todo-action-btn:hover {
    background: rgba(0, 0, 0, 0.06);
}

.todo-action-btn--journal {
    color: var(--forest);
}

.todo-action-btn--delete {
    color: var(--terracotta);
}

/* Empty state */
.todo-empty-state {
    text-align: center;
    padding: 50px 20px;
    color: var(--text-secondary);
}

.todo-empty-state h3 {
    font-family: 'Playfair Display', Georgia, serif;
    margin: 12px 0 6px;
    color: var(--text-primary);
}

.todo-empty-state p {
    font-size: 0.95rem;
}

/* Responsive */
@media (max-width: 768px) {
    .todo-header-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .todo-filter-row {
        flex-wrap: wrap;
    }
    .todo-filter-select {
        flex: 1;
        min-width: 0;
    }
    .todo-actions-bar {
        justify-content: flex-end;
    }
    .todo-item-actions {
        opacity: 1;
    }
    .todo-item-meta {
        flex-direction: column;
        gap: 4px;
    }
}