/* ==== 1. DESIGN VARIABLES & NATURE-BASED COLOR PALETTE ==== */
:root {
    --primary-moss:   #4a6b42;  /* Moss green primary color */
    --primary-dark:   #2d4527;  /* Deep forest green for headings */
    --primary-light:  #f4f7f2;  /* Soft light-green tone for hovers */
    --accent-earth:   #8b5a2b;  /* Terracotta/earth tone for accents */

    --bg-main:         #f0ede6;  /* Warm, natural white background for the whole page */
    --bg-card:         #ffffff;  /* Chalk-white background for cards and containers */
    --bg-surface:      #faf9f6;  /* Off-white surface (sidebars, tab bar, fields) */
    --bg-error-tint:   #fdf2f2;  /* Faint red tint for errors/logout hover */
    --border-color:    #dcd7ce;  /* Soft beige/gray line color */

    --text-main:       #2c2a25;  /* Dark brown/black for maximum readability */
    --text-muted:      #706c61;  /* Muted gray-brown for secondary text */
    --text-inverse:    #ffffff;  /* Text on dark/colored backgrounds */

    --signal-success:  #2e6b31;  /* Green for success status messages */
    --signal-error:    #b23b3b;  /* Red for error messages */
    --signal-warning:  #b45309;  /* Amber for lab/simulation warnings */

    --green-band:      #c9dbc6;  /* Soft plant green (zones + outdoor bars) */
    --zone-border-green: #557548; /* Zone outer edges at rest */
    --zone-gold:       #f5a623;  /* Gold outline for the selected zone */

    --header-subtext:    #c2d1bd;  /* Light sage text in the dark header */
    --success-tint-bg:   #f2f8f3;  /* Faint green success-message background */
    --success-border:    #b4f8b6;  /* Light green success-message border */
    --error-border:      #f8b4b4;  /* Light red error-message border */
    --danger-strong:     #b3261e;  /* Strong red for warnings & urgent text */
    --danger-border:     #f0a89f;  /* Soft red outline for warning banners */
    --danger-text:       #7a1009;  /* Deep red text on warning banners */
    --bg-green-tint:     #fafbfa;  /* Near-white green crop-info background */
    --spec-badge-bg:     #edf2ed;  /* Pale green growing-spec badge */
    --neighbor-good:     #3b662d;  /* Green text for companion plants */
    --neighbor-bad:      #9c4137;  /* Rust text for plants to avoid */
    --zone-selection-bg: #d0e1fd;  /* Light blue while dragging a zone */
    --zone-selection-border: #4a90e2; /* Blue outline while dragging a zone */
    --plot-non-land:     #2a2e2c;  /* Near-black carved-away painter cells */
    --tip-tint-bg:       #fff8ea;  /* Warm cream manual-tip background */

    /* RGB triplets for recurring rgba() shades */
    --dark-rgb: 45, 69, 39;      /* = --primary-dark */
    --moss-rgb: 74, 107, 66;     /* = --primary-moss */
    --danger-rgb: 179, 38, 30;   /* = --danger-strong */
    --zone-gold-rgb: 245, 166, 35; /* = --zone-gold */
    --amber-rgb: 251, 191, 36;   /* amber status tint */
    --soft-red-rgb: 239, 68, 68; /* soft red status tint */

    /* Radii */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 20px;

    /* Border */
    --border: 1px solid var(--border-color);

    /* Motion */
    --transition-fast: all 0.15s ease;

    --gant-row-height: 54px;
    --gant-label-width: 200px;
}

/* ==== 2. GLOBAL BASE STYLES & RESET ==== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100vh; /* Forces the viewport to be exactly the window's full height */
    overflow: hidden; /* Absolutely forbids the entire page from ever being able to scroll! */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-main);
    color: var(--text-main);
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    height: 100vh; /* Make sure body stretches all the way down */
}

/* Header & Footer */
.main-header {
    background-color: var(--primary-dark);
    color: var(--text-inverse);
    padding: 0.8rem 2rem;
    border-bottom: 4px solid var(--primary-moss);
    flex-shrink: 0;
}

.header-container {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-logo {
    height: 128px;
    width: auto;
    max-width: 100vw;
    object-fit: contain;
    display: block;
}

.header-container p {
    font-size: 0.95rem;
    color: var(--header-subtext);
}

.main-content {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: stretch; /* Forces app-container to hold full height vertically */
    padding: 1.5rem;
    width: 100%;
    height: calc(100vh - 140px) !important; /* Fixed reserve for header + footer heights */
    max-height: calc(100vh - 140px) !important;
    overflow: hidden; /* Stops all ghost-scrolling across the whole page */
}

.main-footer {
    text-align: center;
    padding: 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    border-top: var(--border);
    background-color: var(--bg-surface);
    flex-shrink: 0;
}

.hidden { display: none !important; }

/* ==== 3. LOGIN AND AUTHENTICATION CARD (AUTH) ==== */
/* Large chalk-white panels share chrome; size + shadow differ */
.card,
.app-container {
    background-color: var(--bg-card);
    border: var(--border);
    border-radius: var(--radius-lg);
}

.card {
    padding: 2.5rem;
    width: 100%;
    max-width: 450px;
    box-shadow: 0 8px 24px rgba(var(--dark-rgb), 0.05);
}

.subtitle {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.alert-message {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.error-message {
    background-color: var(--bg-error-tint);
    color: var(--signal-error);
    border: 1px solid var(--error-border);
}

.success-message {
    background-color: var(--success-tint-bg);
    color: var(--signal-success);
    border: 1px solid var(--success-border);
}

/* ==== 4. APPLICATION CONTAINER & GLOBAL TAB BAR (TABS) ==== */
.app-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100% !important; /* Forces the card to soak up 100% of main-content vertically */
    max-height: 100% !important;
    background-color: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px rgba(var(--dark-rgb), 0.08);
    overflow: hidden;
}

.tab-content-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    /* Forces the tab to stay rock-solid within the app card's bounds minus the tab row! */
    height: calc(100% - 55px) !important;
    max-height: calc(100% - 55px) !important;
    overflow: hidden;
}

.tab-bar {
    display: flex;
    background-color: var(--bg-surface);
    border-bottom: var(--border);
    width: 100%;
    flex-shrink: 0; /* Keeps the tab bar from being squeezed */
}

.tab-btn {
    padding: 1rem 2rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: var(--transition-fast);
}

.tab-btn:hover {
    color: var(--primary-dark);
    background-color: rgba(var(--moss-rgb), 0.04);
}

.tab-btn.active {
    color: var(--primary-dark);
    border-bottom-color: var(--primary-moss);
    background-color: var(--bg-card);
}

.tab-logout-btn {
    margin-left: auto;
    padding: 1rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--signal-error);
    background: transparent;
    border: none;
    cursor: pointer;
}

/* ==== 5. UNIVERSAL COMPONENT LAYOUT (REUSED ON ALL TABS) ==== */
.tab-layout {
    display: flex;
    flex: 1;
    width: 100%;
    height: 100% !important;
    max-height: 100% !important;
    align-items: stretch; /* Forces sidebar and content-area to keep exactly the same height! */
    overflow: hidden;
}

.sidebar {
    width: 280px;
    background-color: var(--bg-surface);
    border-right: var(--border);
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1rem;
    height: 100% !important; /* Guarantees full height down to the bottom buttons! */
    flex-shrink: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.content-area {
    flex: 1;
    height: 100% !important;
    max-height: 100% !important;
    background-color: var(--bg-card);
    overflow: hidden !important;
}

/* Forces the right panel's content to stack vertically so nothing ends up beside the schedule */
.tab-layout .content-area {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 1.5rem !important;
    overflow-y: auto !important;
}

.sidebar-header {
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.sidebar-header h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 0.25rem;
}

.sidebar-header p {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-muted);
}

/* The independently scrollable area in the sidebar */
.sidebar-scrollable-content {
    flex: 1;
    width: 100%;
    overflow: hidden;
    margin-top: 0.5rem;
}

/* Pinned bottom plate in the sidebar (e.g., for save buttons) */
.sidebar-footer-actions {
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: var(--border);
    flex-shrink: 0;
    width: 100%;
    background-color: var(--bg-surface);
}

/* Centrally placed welcome boxes and placeholders */
.content-main-box {
    text-align: center;
    margin-top: 10%;
}

.content-main-box h2 {
    color: var(--primary-dark);
    margin-bottom: 0.5rem;
}

/* Universal dashed placeholder box (for matrix or empty lists) */
.content-dashed-placeholder {
    text-align: center;
    max-width: 500px;
    border: 2px dashed var(--border-color);
    padding: 3rem 2rem;
    border-radius: var(--radius-lg);
    background-color: var(--bg-surface);
    margin: 0 auto;
}

.content-dashed-placeholder h3 {
    color: var(--primary-dark);
    font-size: 1.15rem;
}

.content-dashed-placeholder p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-top: 0.5rem;
}

/* Visual divider in the sidebar panel */
.plan-section-divider { margin-top: 1rem; }

/* ==== 6. BUTTONS, FORMS & UNIFORM TYPOGRAPHY (BASE: 0.95rem) ==== */

/* Shared button foundation */
.btn {
    display: inline-block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    text-align: center;
    transition: var(--transition-fast);
}

.btn:hover { box-shadow: 0 4px 12px rgba(var(--dark-rgb), 0.15); }

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

.btn-secondary,
.btn-danger {
    background-color: transparent;
    border: 1px solid currentColor;
}

.btn-secondary { color: var(--primary-moss); }

.btn-secondary:hover,
.garden-cell-block:hover,
.gant-timeline-row:hover { background-color: var(--primary-light); }

.btn-danger { color: var(--signal-error); }

.btn-danger:hover,
.tab-logout-btn:hover { background-color: var(--bg-error-tint); }

/* Icon-only buttons (e.g. ✖ ✎ 🗑) share the shape of the outlined variants */
.btn-icon {
    width: auto;
    min-width: 32px;
    height: 32px;
    padding: 0 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    line-height: 1;
    border: var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

.btn-icon:hover {
    border-color: var(--primary-moss);
    color: var(--primary-dark);
}

.btn-icon.btn-danger:hover {
    border-color: var(--signal-error);
    color: var(--signal-error);
    background-color: var(--bg-error-tint);
}

/* Density & width variants on top of the .btn foundation */
.btn-sm {
    padding: 0.35rem 0.85rem;
    font-size: 0.85rem;
    width: auto;
}

.btn-auto { width: auto; }

.button-group {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* Compact and uniform form styling for the text fields [2026-07-09] */
.form-group {
    margin-bottom: 0.85rem;
    flex-shrink: 0; /* Forbids the browser from shrinking or squishing the field! */
}

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

.form-group label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="date"],
.plan-dropdown,
.forum-textarea {
    width: 100%;
    padding: 0.55rem 0.75rem;
    font-size: 0.95rem;
    font-family: inherit;
    border: var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--bg-surface);
    color: var(--text-main);

    /* Guarantees the fields keep their uniform, compact height while scrolling */
    min-height: 35px;
}

.form-group input:focus,
.plan-dropdown:focus,
.forum-textarea:focus {
    border-color: var(--primary-moss);
    outline: none;
}

.forum-textarea {
    min-height: 90px;
    resize: vertical;
}

/* Checkbox styling */
.form-checkbox-group { margin-top: 0.25rem; }

.checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 400 !important;
    color: var(--text-main) !important;
    cursor: pointer;
    user-select: none;
}

.checkbox-label input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--primary-moss);
    cursor: pointer;
    flex-shrink: 0;
}

/* ==== 7. TAB 1: THE PLANT EXPLORER (TREE MENU, DETAIL VIEW & BADGES) ==== */
.menu-list {
    list-style: none;
    padding: 0;
    margin: 0;

    /* The deep-scroll logic lives on the list itself */
    height: 100%;
    max-height: calc(100vh - 250px); /* Guarantees the list knows exactly when to start scrolling */
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.25rem; /* Leaves breathing room for the scrollbar */
}

.menu-item {
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.4;
    transition: var(--transition-fast);
}

/* Main crop with variants (e.g., Tomato) */
.main-crop-header,
.menu-item.clickable-crop { font-weight: 600; }

.main-crop-header {
    color: var(--primary-dark);
    padding: 0.65rem 0.75rem 0.25rem 0.75rem;
}

/* Sublist indent beneath the main crop */
.submenu-list {
    list-style: none;
    padding-left: 0.75rem;
    margin-bottom: 0.5rem;
}

/* Menu rows share their hit target shape */
.sub-variant-item,
.menu-item.clickable-crop {
    border-radius: var(--radius-sm);
    cursor: pointer;
}

/* Individual variant row (e.g., "- Sungold") */
.sub-variant-item {
    color: var(--text-muted);
    padding: 0.4rem 0.75rem;
    font-weight: 500;
}

.btn-primary,
.sub-variant-item.active,
.menu-item.clickable-crop.active {
    background-color: var(--primary-moss);
    color: var(--text-inverse);
}

/* Clickable single crops (e.g., Beetroot) */
.menu-item.clickable-crop {
    color: var(--text-main);
    padding: 0.65rem 0.75rem;
    margin-bottom: 0.25rem;
    display: block;
}

/* --- Detail view on the right --- */
.crop-details-view h2 {
    color: var(--primary-dark);
    font-size: 1.8rem;
    margin-bottom: 0.25rem;
}

.scientific-name {
    font-style: italic;
    color: var(--text-muted);
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.crop-description {
    margin-bottom: 2rem;
    color: var(--text-main);
    max-width: 700px;
}

/* The grid for pH, water and light */
.details-grid {
    display: grid;
    grid-template-columns: repeat(3, 160px);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Pill badges share the same rounded, semi-bold shape */
.badge,
.spec-badge {
    border-radius: var(--radius-pill);
    font-weight: 600;
}

.badge {
    display: inline-block;
    padding: 0.4rem 0.75rem;
    background-color: var(--primary-light);
    color: var(--primary-dark);
    font-size: 0.85rem;
    border: var(--border);
    text-align: center;
}

/* Varieties/Cultivars section */
.variants-section h4 {
    margin-bottom: 1rem;
    color: var(--primary-dark);
}

.variants-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    max-width: 700px;
}



.variant-card h5 {
    color: var(--primary-dark);
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
}

.variant-card p {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.active-variant-focus {
    border-color: var(--primary-moss) !important;
    background-color: var(--primary-light) !important;
}

/* Ensures the varieties grid container allows full width */
#detail-variants-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    width: 100% !important;
}

/* Forces the active variety card to expand to exactly the same width as the info box above */
.variant-card.active-variant-focus {
    width: 100% !important;
    max-width: 100% !important;
    background-color: var(--bg-card);
    border: var(--border);
    border-radius: var(--radius-md);
    padding: 1.5rem !important;
}

/* ==== 8. TABS 2 & 3: PLANNING MAP, MATRIX & MODALS ==== */

/* Interactive map frame (Tab 2) [2026-07-09] */
.plan-map-container {
    width: 100%;
    height: 140px;
    border: var(--border);
    border-radius: var(--radius-sm);
    z-index: 1;
    margin-top: 0.25rem;
    flex-shrink: 0; /* Keeps the map from collapsing or going flat */
}

.plan-coordinates-display {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.3rem;
    font-weight: 500;
    text-align: center;
}

/* Viewport around the CAD grid (merged: critical heights + scroll when needed) */
.plan-matrix-viewport {
    position: relative; /* Anchor for the off-shape zone warning banner */
    width: 100%;
    height: 100% !important;
    max-height: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    overflow: auto; /* Enables scrollbars if the plot is bigger than the screen */
}

#garden-matrix-grid {
    display: block;
    position: relative;
    background-color: transparent; /* Carved-away area is invisible, the land IS its shape */
    width: var(--canvas-w, auto);
    height: var(--canvas-h, auto);
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(var(--dark-rgb), 0.4); /* Soft forest green at reduced opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Sits rock-solid above maps and tabs */
    backdrop-filter: blur(4px); /* Modern, elegant blur on the background */
}

.modal-card {
    max-width: var(--modal-max-w, 500px) !important;
    width: var(--modal-w, 90%) !important;
    animation: modalPopIn 0.2s ease-out;
}

@keyframes modalPopIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Makes the dialog card much wider so its 3 columns can breathe nicely */
.modal-wide {
    --modal-max-w: 900px;
    --modal-w: 95%;
    padding: 2rem 2.5rem !important;
}

/* Creates a perfect 3-column grid via CSS Grid */
.modal-grid-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Three exactly equal-width columns */
    gap: 2rem;
    margin-top: 0.5rem;
    width: 100%;
}

/* Individual column container */
.modal-col {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Gives the map a far taller, more prominent profile when it lives in the middle column */
.plan-map-container.modal-map-height {
    height: 195px !important; /* Expanded height for optimal click precision */
}

/* --- Create-land modal: WIDER, with the land-shape painter as a right-hand column ---
   Moves the painter out of a tall full-width strip below the form and into the
   horizontal space, so the dialog is much wider but noticeably shorter. [2026-08-30] */
.modal-card.modal-create-land {
    --modal-max-w: 1380px;
    --modal-w: 96%;
}
.modal-create-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 1.5rem;
    align-items: start;
    margin-top: 0.5rem;
}
.plot-shape-painter {
    align-self: start;
    padding: 0;
    border: none;
}
@media (max-width: 1100px) {
    .modal-create-body {
        grid-template-columns: 1fr; /* Stack the painter below the form on narrow screens */
    }
    .plot-shape-painter {
        border-top: var(--border);
        padding-top: 1rem;
    }
}

/* Adjustment for the buttons at the bottom of the wide dialog */

/* ==== 9. INTERACTIVE TO-SCALE GRID & ZONE MARKING (GARDEN MATRIX) ==== */

/* The single 10x10 cm block - positioned absolutely by plan.js on the true land
   cells only. Right/bottom hairlines draw the internal grid separations. */
.garden-cell-block {
    box-sizing: border-box;
    position: absolute;
    background-color: var(--bg-card);
    border-right: var(--border);
    border-bottom: var(--border);
    transition: background-color 0.1s ease;
    cursor: crosshair;
    width: var(--cell-w, auto);
    height: var(--cell-h, auto);
    left: var(--cell-x, 0px);
    top: var(--cell-y, 0px);
}

/* Green outline following the land's actual contour (L/T/U). The true shape is
   read from a cell whose neighbour on that side is not land. [2026-08-30] */
.garden-cell-block.land-edge-top    { border-top:    2px solid var(--primary-moss); }
.garden-cell-block.land-edge-bottom { border-bottom: 2px solid var(--primary-moss); }
.garden-cell-block.land-edge-left   { border-left:   2px solid var(--primary-moss); }
.garden-cell-block.land-edge-right  { border-right:  2px solid var(--primary-moss); }

/* --- INTERACTIVE ZONE MARKING (CLICK AND DRAG) --- */
.garden-cell-block.mark-start {
    background-color: var(--primary-moss) !important;
    opacity: 0.7;
}

.garden-cell-block.selecting-zone {
    background-color: var(--zone-selection-bg) !important;
    outline: 1px solid var(--zone-selection-border);
}

/* A permanent, pre-drawn planted zone with frame and depth */
.garden-cell-block.active-planted-zone {
    background-color: var(--green-band) !important; /* Soft, natural plant green */
    box-shadow: inset 0 0 4px rgba(var(--dark-rgb), 0.15); /* Adds a subtle agronomic depth */
    cursor: pointer;
}

.garden-cell-block.active-planted-zone.is-dragging-priority {
    position: absolute !important; /* Keep absolute, or the blocks reflow into a diagonal staircase */
    z-index: 100 !important;
    box-shadow: inset 0 0 8px rgba(var(--moss-rgb), 0.4) !important;
}

.garden-cell-block.zone-off-shape {
    visibility: visible !important;
    background-color: rgba(var(--danger-rgb), 0.45) !important;
    box-shadow: inset 0 0 6px rgba(var(--danger-rgb), 0.55) !important;
}
.zone-text-container.zone-off-shape-label .zone-main-label {
    color: var(--danger-strong);
    font-weight: 700;
}

/* Floating warning banner inside the plan viewport when zones don't fit the
   land shape - mirrors the server's fits_geometrically flag. [2026-08-30] */
.shape-warning-banner {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 300;
    max-width: 92%;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background-color: var(--bg-error-tint);
    border: 1px solid var(--danger-border);
    border-left: 4px solid var(--danger-strong);
    color: var(--danger-text);
    padding: 8px 14px;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
.shape-warning-banner strong { color: var(--danger-strong); }
.shape-warning-close {
    background: none;
    border: none;
    color: var(--danger-text);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    margin-left: auto;
    flex: none;
}

/* --- Land-shape painter inside the "Skapa helt nytt land" modal --- */
.plot-shape-hint {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0.25rem 0 0.75rem 0;
}
.plot-shape-matrix {
    display: grid;
    grid-template-columns: var(--matrix-cols, auto);
    grid-template-rows: var(--matrix-rows, auto);
    gap: 1px;
    width: max-content;
    max-width: 100%;
    overflow: auto;
    border: var(--border);
    padding: 2px;
    background-color: var(--border-color);
}
.plot-shape-cell {
    width: 100%; /* Sized by the JS-written grid track, not a hard 12px */
    height: 100%;
    box-sizing: border-box;
    background-color: var(--bg-card);
    border: 1px solid rgba(var(--moss-rgb), 0.35);
    cursor: pointer;
}
.plot-shape-cell:hover { outline: 2px solid rgb(var(--moss-rgb)); }
.plot-shape-cell.is-non-land { background-color: var(--plot-non-land); }
.plot-shape-toolbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}
.plot-shape-dim {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Raise the active zone's TEXT so it floats at the very top */
.zone-text-container.is-dragging-text-priority {
    position: absolute !important;
    z-index: 200 !important;
}

/* ROCK-SOLID EMERGENCY BRAKE: When the user moves a zone, ALL OTHER idle
   text containers are forced to the bottom (z-index: 1) so the moved zone
   is guaranteed to glide ON TOP of everything [2026-07-13] */
#garden-matrix-grid:has(.is-dragging-priority) .zone-text-container:not(.is-dragging-text-priority) {
    z-index: 1 !important;
    opacity: 0.4; /* Quietly dims the neighbors' text during the move */
}

/* Dynamic frames drawn around the zone's outer edges in JavaScript */
.zone-border-top    { border-top: 2px solid var(--zone-border-green) !important; }
.zone-border-bottom { border-bottom: 2px solid var(--zone-border-green) !important; }
.zone-border-left   { border-left: 2px solid var(--zone-border-green) !important; }
.zone-border-right  { border-right: 2px solid var(--zone-border-green) !important; }

/* --- VISUAL HIGHLIGHT ON SINGLE-CLICK OF A ZONE [2026-07-09] --- */

/* Golden outline on the blocks that belong to the selected zone.
   NOTE: MUST stay position:absolute - changing to relative reflows the cells
   into a staircase because they are laid out via left/top CSS vars. */
.garden-cell-block.active-planted-zone.zone-selected {
    box-shadow: inset 0 0 6px rgba(var(--zone-gold-rgb), 0.4);
    z-index: 10 !important; /* Lifts the blocks so the gold frame shows above neighboring zones */
}

/* Recolors the dark outer edges to gold for the selected zone */
.garden-cell-block.zone-selected.zone-border-top    { border-top: 2px solid var(--zone-gold) !important; }
.garden-cell-block.zone-selected.zone-border-bottom { border-bottom: 2px solid var(--zone-gold) !important; }
.garden-cell-block.zone-selected.zone-border-left   { border-left: 2px solid var(--zone-gold) !important; }
.garden-cell-block.zone-selected.zone-border-right  { border-right: 2px solid var(--zone-gold) !important; }

/* ==== 10. FLOATING LIVE NOTIFICATIONS & ZONE TEXT (TOAST SYSTEM) ==== */

.sprout-toast {
    min-width: 280px;
    max-width: 380px;
    background-color: var(--bg-card);
    border-left: 4px solid var(--primary-moss);
    box-shadow: 0 10px 25px rgba(var(--dark-rgb), 0.15);
    padding: 0.85rem 1.25rem;
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    pointer-events: auto; /* Keeps the card clickable if you want to close it */

    /* Animations: slide in from the right, fade out at the end */
    animation: slideInToast 0.3s ease-out forwards, fadeOutToast 0.5s ease-in 4.5s forwards;
}

/* If a critical growing warning arises we change the border color */
.sprout-toast.toast-warning { border-left-color: var(--signal-error); }

.sprout-toast-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary-dark);
}

@keyframes slideInToast {
    from { transform: translateX(120%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

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

/* --- FLOATING, CENTERED TEXT LABEL FOR ZONES [2026-07-09] --- */
.zone-text-container {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 4px;
    left: var(--zone-x, auto);
    top: var(--zone-y, auto);
    width: var(--zone-w, auto);
    height: var(--zone-h, auto);

    /* Raised z-index so the text physically floats ON TOP of gold frames and blocks! */
    z-index: 50;
    pointer-events: none;
    user-select: none;
}

.zone-main-label {
    font-size: 0.7rem;
    font-weight: 800; /* Extra-bold text for maximum legibility */
    text-transform: uppercase;
    letter-spacing: 1px;

    /* Soft, semi-transparent dark green default tone at rest */
    color: rgba(var(--dark-rgb), 0.45);
    transition: color 0.15s ease, font-size 0.15s ease;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
}

/* When the blocks under the text have the .zone-selected class, the text turns razor-sharp and solid! [2026-07-09] */
.garden-cell-block.zone-selected ~ .zone-text-container .zone-main-label,
.zone-text-container:has(~ .garden-cell-block.zone-selected) .zone-main-label,
.zone-selected + .zone-text-container .zone-main-label { color: rgba(var(--dark-rgb), 0.95) !important; }

/* ==== 11. COMPACT GROWING LEXICON (PLANT DETAILS) ==== */

/* Slim container for plant details */
.crop-info-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--bg-green-tint);
    border: var(--border);
    border-radius: var(--radius-sm);
    margin-top: 0.5rem;
}

/* Horizontal rows of chips (compact growing specs, manual TOC) */
.crop-specs-row,
.manual-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Small compact fact badge (e.g., Sowing depth: 2 cm) */
.spec-badge {
    font-size: 0.75rem;
    color: var(--primary-dark);
    background-color: var(--spec-badge-bg);
    padding: 0.25rem 0.6rem;
    border: 1px solid rgba(var(--dark-rgb), 0.08);
}

/* Compact companion-planting section */
.neighbor-section {
    font-size: 0.75rem;
    line-height: 1.4;
}

.neighbor-title {
    font-weight: 700;
    margin-bottom: 0.15rem;
    font-size: 0.75rem;
}

.neighbor-title.good { color: var(--neighbor-good); }
.neighbor-title.bad  { color: var(--neighbor-bad); }

.neighbor-list {
    color: var(--text-muted);
    font-style: italic;
}

/* ==== 12. TAB 3: SPROUT CAD GANT ENGINE (360-DAY FINE-TUNING) [2026-07-19] ==== */

/* Guarantees the chart soaks up maximum width and is not crowded out by the legend */
.gant-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1.5rem;
    overflow-x: auto;
    flex-shrink: 0; /* Keeps the chart from being squeezed vertically or horizontally */
}

/* Uppercase micro-headers share a single canonical style */
.gant-header,
.gant-legend {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gant-header {
    display: flex;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.5rem;
    color: var(--text-muted);
}

.gant-label-col {
    width: var(--gant-label-width);
    flex-shrink: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary-dark);
    display: flex;
    align-items: center;
}

/* Month headers are built dynamically by gant.js (365 columns, one span per month) */
.gant-months-grid {
    display: grid;
    grid-template-columns: var(--gant-cols, repeat(12, minmax(55px, 1fr)));
    flex-grow: 1;
    text-align: center;
}

.gant-months-grid > div { grid-column: var(--gant-span, span 1); }

.gant-timeline-row {
    display: flex;
    align-items: center;
    height: var(--gant-row-height);
    border-bottom: var(--border);
    position: relative;
}

/* The container has 365 exact sub-columns (fixed calendar); the month lines
   are drawn by gant.js via overlay because the months differ in length */
.gant-bar-container {
    display: grid;
    grid-template-columns: repeat(365, 1fr);
    flex-grow: 1;
    height: 100%;
    position: relative;
    align-items: center;
}

/* Draws a super-thin vertical line at the start of each month (every 12th of the width)
   NOTE: zeroed out inline by gant.js, which draws exact lines instead */
.gant-bar-container,
.simulation-bar-container {
    background-image: linear-gradient(to right, var(--border-color) 1px, transparent 1px);
    background-size: calc(100% / 12) 100%;
}

/* The simulator studio matrix keeps its deliberate 360-cell grid (no year anchoring),
   independent of the Gantt view's real calendar */
.simulation-bar-container { grid-template-columns: repeat(360, 1fr); }

.gant-bar {
    height: 24px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 0.25rem;
    width: 100%; /* Lets CSS Grid control the width via column start/end */
    grid-column: var(--gant-col-start, auto) / var(--gant-col-end, auto);
}

/* Biological color bands mapped fully onto your color theme */
/* Thin 15px bars share border + height; only color and offset differ */
.bar-indoor,
.bar-harvest {
    border: var(--border);
    height: 15px;
}

.bar-indoor {
    background-color: var(--primary-light) !important;
    color: var(--primary-dark) !important;
    transform: translateY(-8px);
}

.bar-outdoor {
    background-color: var(--green-band) !important;
    color: var(--primary-dark) !important;
    box-shadow: inset 0 0 4px rgba(var(--dark-rgb), 0.1);
}

.bar-harvest {
    background-color: var(--bg-main) !important;
    color: var(--accent-earth) !important;
    transform: translateY(8px);
}

/* The legend is forced to sit rock-solid below the chart across the full width */
.gant-legend {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 2.5rem !important;
    margin-top: 1.5rem !important;
    padding-top: 1rem !important;
    border-top: var(--border);
    color: var(--text-main);
    width: 100% !important;
    flex-shrink: 0;
}

.legend-item {
    gap: 0.5rem;
    white-space: nowrap; /* Keeps the label from wrapping or collapsing */
}

.legend-dot {
    width: 14px;
    height: 14px;
    border-radius: var(--radius-sm);
    border: var(--border);
}

/* Small inline rows that center their content vertically */
.legend-item,
.sim-row-title {
    display: flex;
    align-items: center;
}

/* ==== 13. SIMULATOR STUDIO - ISOLATED SANDBOX [2026-08-22] ==== */

.sim-empty-state {
    text-align: center;
    padding: 3.5rem 1.5rem;
    color: var(--text-main);
}

.sim-label-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.15rem;
    padding-right: 0.75rem;
}

.sim-row-title {
    gap: 0.4rem;
    font-size: 0.85rem;
    width: 100%;
}

.sim-row-title span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.sim-facts-line {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8rem;
    padding: 0.15rem 0;
}

.sim-facts-line span { color: var(--text-muted); }
.sim-facts-line strong { color: var(--primary-dark); }

/* Per-row status tint. Class names mirror the status strings emitted by SimulationEngine ("too_cold", "impossible") */
.status-too_cold { background-color: rgba(var(--amber-rgb), 0.08); }
.status-impossible { background-color: rgba(var(--soft-red-rgb), 0.07); }

.draggable-harvest { cursor: grab; }
.row-dragging .draggable-harvest { cursor: grabbing; opacity: 0.9; }

/* ==== 14. UTILITY CLASSES (REPLACES REPEATED INLINE STYLES) ==== */

/* Flex layouts */
.flex-row-sm    { display: flex; gap: 0.5rem; }
.flex-row-1     { display: flex; gap: 1rem; }
.flex-baseline-between { display: flex; justify-content: space-between; align-items: baseline; }
.flex-col-stack,
.forum-threads-container,
.messages-list { display: flex; flex-direction: column; gap: 0.75rem; }
.flex-end       { display: flex; justify-content: flex-end; gap: 0.5rem; }

/* Layout helpers */
.half, .modal-footer-split .flex-end { flex: 1; }

/* Typography */
.help-text      { font-size: 0.8rem; color: var(--text-muted); line-height: 1.4; }

.small-muted,
.messages-conversation-date,
.sprout-toast-body,
.messages-search-hint,
.sim-row-message {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.sprout-toast-body,
.messages-search-hint,
.sim-row-message { line-height: 1.4; }

.sidebar-label,
.stat-card-label,
.detail-tile h4,
.diary-entry-type {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    font-weight: 700;
}

.sidebar-label { color: var(--primary-dark); }
.stat-card-label,
.detail-tile h4 { color: var(--text-muted); }
.detail-tile h4 { margin-bottom: 0.4rem; }
.diary-entry-type { opacity: 0.7; }

/* Cards & surfaces - shared chrome */
.surface-card,
.variant-card,
.messages-conversation-row,
.messages-search-result,
.messages-bubble,
.dash-task-item {
    background-color: var(--bg-surface);
    border: var(--border);
    border-radius: var(--radius-md);
}

.diary-entry-card,
.stat-card,
.gant-wrapper {
    background-color: var(--bg-card);
    border: var(--border);
    border-radius: var(--radius-md);
}

.surface-card { padding: 1rem 1.25rem; }

.surface-card.pad-lg { padding: 1.5rem; }

.surface-card.scroll-col { min-height: 0; }

.variant-card { padding: 1rem; }

.stat-card {
    flex: 1;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0, 0.01);
}

.stat-card-value {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--primary-dark);
    margin-top: 0.25rem;
}

.stat-card-sub {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.35rem;
    line-height: 1.4;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    width: 100%;
    height: 100%;
    min-height: 0;
    align-items: start;
}

.dashboard-col {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-height: 0;
    width: 100%;
}

.content-area-padded {
    padding: 2.5rem !important;
    background-color: var(--bg-card);
}

.scroll-list,
.surface-card.scroll-col {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.scroll-list { margin-top: 1rem; }

/* Modal components */
.modal-section-title {
    color: var(--primary-dark);
    margin-bottom: 0.75rem;
    border-bottom: var(--border);
    padding-bottom: 0.25rem;
}

.modal-narrow { --modal-max-w: 650px; }

.modal-2col {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

/* Shared bottom-button row; the split variant spreads its two halves apart */
.modal-footer-split,
.modal-footer-actions {
    margin-top: 1rem;
    display: flex;
    width: 100%;
}

/* Sections capped with a hairline + breathing room below the rule */
.modal-footer-actions,
.messages-compose-section,
.plan-section-divider {
    border-top: var(--border);
    padding-top: 1rem;
}

.modal-footer-split {
    justify-content: space-between;
    align-items: center;
}

.modal-footer-actions {
    justify-content: flex-end;
    margin-top: 1.5rem !important;
}

/* Deletion buttons start hidden; JS toggles them via the .is-visible class when editing */
#btn-zone-delete,
#sim-row-delete { display: none; }

#btn-zone-delete.is-visible,
#sim-row-delete.is-visible { display: block; }

/* Sidebar CTA margins that previously lived as inline styles */
#diary-btn-new { margin-top: 0.5rem; }

.messages-conversation-row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    width: 100%;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: var(--transition-fast);
}

.messages-conversation-row { padding: 0.85rem 1rem; }

.messages-conversation-row:hover,
.messages-conversation-row-active,
.messages-search-result:hover {
    background-color: var(--primary-light);
    border-color: var(--primary-moss);
}

.messages-conversation-name {
    font-weight: 600;
    color: var(--primary-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.messages-bubble-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.messages-conversation-preview {
    color: var(--text-muted);
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.forum-threads-container,
.messages-list {
    overflow-y: auto;
    min-height: 0;
}

.messages-conversation-topline,
.diary-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dth-line {
    font-size: 0.85rem;
    color: var(--primary-dark);
}

.dth-line { margin-top: 0.5rem; }

/* Preserves line breaks from the textarea without opening the door to HTML injection */
.messages-bubble-body,
.diary-entry-body {
    color: var(--text-main);
    line-height: 1.5;
    white-space: pre-wrap;
}

/* ==== DIARY ("DAGBOK") ==== */

.diary-feed-view,
.diary-edit-view {
    width: 100%;
    max-width: 100%;
}

.diary-feed-view h2 { margin-bottom: 0.75rem; }

.diary-entry-card {
    padding: 0.875rem 1rem;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.diary-entry-card:hover {
    border-color: var(--primary-moss);
    box-shadow: 0 0 0 1px var(--primary-moss);
}

.diary-entry-header { margin-bottom: 0.375rem; }

.diary-entry-date {
    font-size: 0.75rem;
    opacity: 0.5;
}

.diary-entry-title {
    margin: 0 0 0.375rem 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.diary-entry-body {
    font-size: 0.9rem;
    opacity: 0.85;
}

/* --- Edit view --- */

.diary-edit-view h2 { margin-bottom: 1rem; }

.diary-edit-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* --- Create-entry modal --- */

/* ==== 16. JS-GENERATED COMPONENTS & ID-SCOPED APPEARANCE (STYLE-FREE MARKUP) ==== */

/* Toast container (created dynamically by ui_notification.ts) */
#sprout-toast-container {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    pointer-events: none;
}

/* Gant: exact month-boundary overlay and its vertical lines */
.gant-month-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: var(--gant-cols, repeat(365, 1fr));
    pointer-events: none;
}

.gant-month-boundary {
    border-left: var(--border);
    opacity: 0.6;
    grid-column: var(--gant-line, 1 / 1);
}

.gant-bar-container.exact-lines { background-image: none; }

/* Forum: thread meta laid out as a flex row */


/* Dashboard: flattened alert boxes inside the warnings feed */
.alert-flat {
    margin-bottom: 0;
    border-radius: var(--radius-md);
    line-height: 1.4;
}

.alert-flat-center {
    text-align: center;
    padding: 1.5rem;
}

.alert-flat-sub {
    font-size: 0.8rem;
    opacity: 0.9;
}

/* Dashboard: season to-do rows */
.dash-task-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
}

.dash-task-check {
    cursor: pointer;
    width: 16px;
    height: 16px;
    accent-color: var(--primary-moss);
}

.dash-task-label {
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    flex: 1;
}

.dash-task-label.done {
    text-decoration: line-through;
    opacity: 0.5;
}

.content-dashed-placeholder.flat {
    padding: 2rem 1rem;
    width: 100%;
    max-width: none;
    border-radius: var(--radius-md);
    margin: 0;
}

/* Dashboard: soil/milieu fact badges fill the whole column */
.spec-badge-block {
    display: block;
    width: 100%;
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.6rem;
    text-align: left;
}

/* Dashboard: id-scoped spacing that previously used inline styles */
#dash-soil-specs {
    flex-direction: column;
    width: 100%;
}

#dash-soil-specs .spec-badge { text-align: left; }

#dash-weather-time { font-weight: 500; }

#dash-warnings-container { gap: 0.75rem; }

#dash-tasks-card { height: 100%; }

#dash-tasks-container { gap: 0.75rem; }

/* Simulator: plot-fact card, amber lab note and empty-state icon */
#sim-plot-facts {
    padding: 0.75rem;
    margin-top: 1rem;
}

.lab-note {
    color: var(--signal-warning);
    font-weight: 500;
    margin-top: 1rem;
}

.sim-empty-icon { font-size: 1.5rem; }

/* Forms: range sliders stretch like every other outlined field */
input[type="range"] { width: 100%; }

/* About me: tab card, map picker spacing and the onboarding dialog */
#aboutme-tab-card {
    max-width: 760px;
    margin: 0 auto;
}

#aboutme-map-picker { margin-bottom: 0.5rem; }

#aboutme-dialog-overlay .modal-card {
    max-width: 560px !important;
    max-height: 90vh;
    overflow-y: auto;
}

/* Modal & sidebar layout helpers that previously used inline styles */
#plan-sidebar-actions { margin-bottom: 1rem; }

.sidebar-header-gap {
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
}

/* Spacing utilities replacing one-off inline margins */
.mt-sm { margin-top: 0.5rem; }
.mt-1, #sim-empty-create-btn, #dash-weather-stats { margin-top: 1rem; }
.mt-2  { margin-top: 1.5rem; }

/* ==== 16. PRIVATE MESSAGES (MEDDELANDEN) [2026-08-28] ==== */

/* Conversation rows in the sidebar */
.messages-conversation-topline { gap: 0.6rem; }

.messages-conversation-name { font-size: 0.9rem; }

.messages-conversation-row .badge {
    padding: 0.05rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.4;
}

.messages-conversation-date { flex: 0 0 auto; }

.messages-conversation-preview { font-size: 0.85rem; }

/* Recipient search (top of the sidebar) */
.messages-search-results {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

.messages-search-result {
    display: block;
    width: 100%;
    padding: 0.6rem 0.8rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-dark);
    text-align: left;
    cursor: pointer;
    transition: var(--transition-fast);
}

.messages-search-result-email {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-muted);
    word-break: break-all;
}

.messages-search-hint { margin-top: 0.4rem; }

/* Right panel: empty state + thread */
.messages-empty-view {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

.messages-thread-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

.messages-thread-view h2 {
    color: var(--primary-dark);
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.messages-list { flex: 1; }

.messages-bubble {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-width: 78%;
    padding: 0.7rem 1rem;
}

.messages-bubble-mine {
    align-self: flex-end;
    background-color: var(--primary-light);
    border-color: var(--primary-moss);
}

.messages-bubble-theirs { align-self: flex-start; }

.messages-bubble-body {
    font-size: 0.9rem;
    word-break: break-word;
}

.messages-bubble-meta { align-self: flex-end; }

/* Composer pinned below the scrollable message list */
.messages-compose-section {
    flex-shrink: 0;
    margin-top: 1rem;
}

.messages-compose-section .btn { max-width: 200px; }

/* ==== 17. USER MANUAL (ANVÄNDARMANUAL) HELPERS [integrated 2026-09-05] ==== */
.manual-wrap { max-width: 900px; margin: 0 auto; padding: 1.5rem; }
.manual-toc { list-style: none; padding: 0; }
.manual-toc li { margin: 0; }
.manual-toc a {
    display: inline-block; padding: 0.3rem 0.7rem; border: var(--border);
    border-radius: var(--radius-pill); color: var(--primary-moss); text-decoration: none;
    font-size: 0.85rem; transition: var(--transition-fast);
}
.manual-toc a:hover { background: var(--primary-light); border-color: var(--primary-moss); }
.manual-section { margin-top: 2.5rem; scroll-margin-top: 1rem; }
.manual-section h2 {
    color: var(--primary-dark); font-size: 1.4rem; padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--green-band);
}
.manual-section h3 { color: var(--primary-moss); font-size: 1.05rem; margin-top: 1.4rem; }
.manual-note,
.manual-tip,
.manual-warn {
    border-left: 4px solid var(--primary-moss);
    border-radius: var(--radius-sm);
    padding: 0.8rem 1rem;
    margin: 1rem 0;
    font-size: 0.9rem;
}
.manual-note { background: var(--primary-light); }
.manual-tip { background: var(--tip-tint-bg); border-left-color: var(--zone-gold); }
.manual-warn { background: var(--bg-error-tint); border-left-color: var(--signal-error); }
.manual-warn strong, .manual-tip strong, .manual-note strong { color: var(--primary-dark); }
.manual-table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.9rem; }
.manual-table th, .manual-table td { border: var(--border); padding: 0.5rem 0.7rem; text-align: left; }
.manual-table th { background: var(--bg-surface); color: var(--primary-dark); }
kbd {
    background: var(--bg-surface); border: var(--border);
    border-bottom-width: 2px; border-radius: var(--radius-sm); padding: 0.1rem 0.45rem;
    font-size: 0.85rem; font-family: inherit;
}
.manual-steps { list-style: none; counter-reset: step; padding: 0; margin: 1rem 0; }
.manual-steps li { counter-increment: step; position: relative; padding-left: 2.2rem; margin-bottom: 0.6rem; }
.manual-steps li::before {
    content: counter(step); position: absolute; left: 0; top: 0;
    width: 1.5rem; height: 1.5rem; line-height: 1.5rem; text-align: center;
    background: var(--primary-moss); color: var(--text-inverse);
    border-radius: 50%; font-size: 0.8rem; font-weight: bold;
}
.manual-tablist { list-style: none; padding: 0; margin: 1rem 0; }
.manual-tablist li { padding: 0.35rem 0; border-bottom: 1px dashed var(--border-color); }
.manual-tablist strong { color: var(--primary-dark); }
.manual-ok { color: var(--signal-success); font-weight: bold; }

/* ==== 17. GARDEN FEED (SOCIAL FLÖDET) [2026-09-06] ==== */

/* Centered feed column inside the right panel */
.feed-content {
    display: flex;
    justify-content: center;
    overflow-y: auto;
}

.feed-feed {
    width: 100%;
    max-width: 720px;
    padding: 1.5rem 1rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.feed-heading {
    font-size: 1.35rem;
    margin: 0 0 0.25rem;
}

/* Shared card look for composer + posts */
.feed-card {
    background-color: var(--bg-card);
    border: var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

/* --- Composer --- */

.feed-composer { padding: 0.875rem 1rem 0.8rem; }

/* Composer lives in the narrow left sidebar (no date selectors there anymore) */
.feed-composer-sidebar .feed-composer-row {
    gap: 0.5rem;
}
.feed-composer-sidebar .feed-compose-body {
    min-height: 90px;
    font-size: 0.9rem;
}
.feed-composer-sidebar .feed-composer-toolbar {
    flex-wrap: wrap;
}
.feed-composer-sidebar .feed-compose-title {
    width: 100%;
}

.feed-composer-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.feed-compose-body {
    flex: 1;
    min-height: 68px;
    resize: vertical;
    border: var(--border);
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.7rem;
    font-family: inherit;
    font-size: 0.95rem;
    background: var(--bg-surface);
    color: var(--text-main);
}

.feed-compose-body:focus {
    outline: none;
    border-color: var(--primary-moss);
    background: var(--bg-card);
    box-shadow: 0 0 0 1px var(--primary-moss);
}

.feed-composer-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.55rem;
}

.feed-tool-btn {
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 0.45rem;
    border: var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--primary-dark);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

.feed-tool-btn:hover {
    background: var(--primary-light);
    border-color: var(--primary-moss);
}

.feed-tool-sep {
    width: 1px;
    height: 1.25rem;
    background: var(--border-color);
    margin: 0 0.15rem;
}

.feed-compose-title,
.feed-compose-zone {
    border: var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    padding: 0.35rem 0.55rem;
    font-family: inherit;
    font-size: 0.85rem;
    flex: 1;
    min-width: 110px;
}

.feed-compose-select,
.feed-compose-date {
    border: var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    padding: 0.3rem 0.45rem;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--text-main);
}

.feed-composer-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.6rem;
}

/* --- Composer previews --- */

.feed-compose-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.feed-compose-thumb {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: var(--border);
}

.feed-compose-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.feed-compose-remove {
    position: absolute;
    top: 3px;
    right: 3px;
    background: var(--bg-error-tint);
    border: 1px solid var(--signal-danger);
    color: var(--signal-danger);
    border-radius: 50%;
    width: 1.15rem;
    height: 1.15rem;
    line-height: 1;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0;
}

/* --- Avatars --- */

.feed-avatar {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-inverse);
    letter-spacing: 0.02em;
    user-select: none;
}

.feed-avatar-sm { width: 1.7rem; height: 1.7rem; font-size: 0.65rem; }

.feed-avatar-tone-0 { background: #4a6b42; } /* moss */
.feed-avatar-tone-1 { background: #8b5a2b; } /* earth */
.feed-avatar-tone-2 { background: #3f6d7a; } /* spruce-blue */
.feed-avatar-tone-3 { background: #8c5d5d; } /* russet */
.feed-avatar-tone-4 { background: #6b7a3f; } /* olive */
.feed-avatar-tone-5 { background: #7a5d3f; } /* bark */
.feed-avatar-tone-6 { background: #5d7a6b; } /* sage */
.feed-avatar-tone-7 { background: #6d4a6b; } /* plum */

/* --- Post cards --- */

.feed-posts {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.feed-post-card { padding: 1rem 1.1rem 0.75rem; }

.feed-post-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.feed-post-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.feed-post-author {
    font-weight: 700;
    color: var(--primary-dark);
    font-size: 0.95rem;
}

.feed-post-time {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.feed-type-badge { align-self: center; }

.feed-post-menu {
    display: flex;
    gap: 0.2rem;
    align-items: center;
}

.feed-icon-btn {
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.95rem;
    padding: 0.15rem 0.35rem;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}

.feed-icon-btn:hover {
    background: var(--primary-light);
    color: var(--primary-dark);
}

.feed-post-body {
    margin-top: 0.7rem;
    overflow-wrap: break-word;
}

.feed-post-title {
    margin: 0 0 0.35rem 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-dark);
    line-height: 1.3;
}

.feed-post-text {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-main);
    overflow-wrap: break-word;
}

.feed-post-text strong { color: var(--primary-dark); }

.feed-post-text em { color: inherit; }

.feed-post-text code {
    background: var(--bg-surface);
    border: var(--border);
    border-radius: var(--radius-sm);
    padding: 0.05rem 0.35rem;
    font-size: 0.85em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.feed-post-text a { color: var(--accent-earth); }

/* --- Media strip --- */

.feed-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.4rem;
    margin-top: 0.7rem;
}

.feed-media-count-1 { grid-template-columns: 1fr; }

.feed-media-count-2 { grid-template-columns: 1fr 1fr; }

.feed-media-thumb {
    display: block;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: var(--border);
    background: var(--bg-surface);
    min-height: 90px;
}

.feed-media-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
    transition: opacity 0.12s ease;
}

.feed-media-count-1 .feed-media-thumb img { aspect-ratio: auto; max-height: 420px; }

.feed-media-thumb:hover img { opacity: 0.9; }

.feed-media-thumb-error { min-height: 60px; }

/* --- Footer: reactions & comments --- */

.feed-post-footer {
    border-top: var(--border);
    margin-top: 0.7rem;
    padding-top: 0.55rem;
}

.feed-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.feed-reaction-btn {
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--text-main);
    cursor: pointer;
    transition: var(--transition-fast);
}

.feed-reaction-btn:hover {
    border-color: var(--primary-moss);
    background: var(--primary-light);
}

.feed-reaction-active {
    background: rgba(var(--moss-rgb), 0.14);
    border-color: var(--primary-moss);
    color: var(--primary-dark);
    font-weight: 600;
}

.feed-comment-toggle {
    margin-top: 0.6rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.2rem 0;
}

.feed-comment-toggle:hover { color: var(--primary-moss); }

.feed-comments {
    margin-top: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.feed-comments-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.feed-comment {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.feed-comment-bubble {
    flex: 1;
    background: var(--bg-surface);
    border: var(--border);
    border-radius: var(--radius-md);
    padding: 0.45rem 0.7rem;
    min-width: 0;
}

.feed-comment-meta {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
}

.feed-comment-text {
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--text-main);
    overflow-wrap: break-word;
}

.feed-comment-text code {
    background: var(--bg-card);
    border: var(--border);
    border-radius: var(--radius-sm);
    padding: 0.05rem 0.3rem;
    font-size: 0.85em;
}

.feed-comment-del {
    align-self: center;
    font-size: 1.05rem;
    line-height: 1;
}

.feed-comment-form {
    display: flex;
    gap: 0.4rem;
}

.feed-comment-form input,
.feed-comment-form textarea {
    flex: 1;
    border: var(--border);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.6rem;
    font-family: inherit;
    font-size: 0.88rem;
    background: var(--bg-surface);
}

.feed-comment-form textarea {
    resize: vertical;
    min-height: 2.2rem;
}

.feed-comment-form input:focus,
.feed-comment-form textarea:focus {
    outline: none;
    border-color: var(--primary-moss);
    background: var(--bg-card);
}

/* --- Load more --- */

.feed-load-more-row {
    display: flex;
    justify-content: center;
    padding-top: 0.25rem;
}

/* --- Unified feed: kind toggle, filter, badges, tags [2026-09-06] --- */

.feed-kind-toggle {
    display: flex;
    background: var(--bg-surface);
    border: var(--border);
    border-radius: var(--radius-pill);
    padding: 3px;
    margin-bottom: 0.6rem;
}

.feed-kind-btn {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.35rem 0.6rem;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.feed-kind-btn:hover { color: var(--primary-dark); }

.feed-kind-btn.active {
    background: var(--primary-moss);
    color: var(--text-inverse);
}

.feed-filter-row {
    display: flex;
    gap: 0.4rem;
    margin: 0 0 0.9rem;
}

.feed-chip {
    border: var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.3rem 0.85rem;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.feed-chip:hover { border-color: var(--primary-moss); color: var(--primary-dark); }

.feed-chip.active {
    background: var(--primary-moss);
    border-color: var(--primary-moss);
    color: var(--text-inverse);
}

.feed-forum-badge {
    background: var(--bg-green-tint);
    border: 1px solid var(--primary-moss);
    color: var(--primary-dark);
}

.feed-post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.55rem;
}

.feed-tag-chip {
    background: var(--bg-surface);
    border: var(--border);
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    font-size: 0.75rem;
    padding: 0.15rem 0.6rem;
}

.feed-compose-tags {
    flex: 1;
    min-width: 100px;
    border: var(--border);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.6rem;
    font-family: inherit;
    font-size: 0.85rem;
    background: var(--bg-card);
    color: var(--text-main);
}

.feed-compose-tags:focus {
    outline: none;
    border-color: var(--primary-moss);
}

.feed-visibility-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

.feed-visibility-toggle input {
    width: 15px;
    height: 15px;
    accent-color: var(--primary-moss);
    cursor: pointer;
}

.sidebar-footer-actions { margin-top: auto; }

/* ==== 18. RESPONSIVE FOUNDATIONS (TABLET & PHONE) [2026-09-07] ==== */
/* Step 2 of the mobile retrofit: swaps the fixed-height desktop-app scroll
   model for natural document scroll, stacks the sidebar above the content
   panel and scales top-level chrome. Desktop (>= 1024px) is untouched; every
   override uses !important to match the equal-specificity desktop rules, and
   only applies below this breakpoint. [2026-09-07] */
@media (max-width: 1023px) {

    /* --- Root: let the page scroll naturally on devices --- */
    html, body {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: visible;
    }

    body { overflow-y: auto; }

    /* --- Top-level chrome: cap the oversized desktop header/footer --- */
    .main-header { padding: 0.6rem 1rem; }

    .header-logo { height: 64px; }

    .main-footer { padding: 0.75rem 1rem; }

    /* --- Open the fixed-height app card so content flows down the page --- */
    .main-content {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0.75rem 0.85rem;
    }

    .app-container {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        border-radius: var(--radius-md);
        box-shadow: 0 6px 20px rgba(var(--dark-rgb), 0.08);
    }

    .tab-content-wrapper {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .tab-layout {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        flex-direction: column;
    }

    /* --- Sidebar: full-width block above the content --- */
    .sidebar {
        width: 100%;
        height: auto !important;
        border-right: none;
        border-bottom: var(--border);
        overflow: visible;
        padding: 1rem 0.85rem;
    }

    .sidebar-scrollable-content { overflow: visible; }

    .content-area,
    .tab-layout .content-area {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 1rem 0.85rem !important;
    }

    /* --- Tab bar: contained in its own horizontal scroll strip so the new
         page-level scroll never gains a horizontal scrollbar. The strip is
         fully refined in Step 3. --- */
    .tab-bar {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .tab-bar .tab-btn,
    .tab-logout-btn { flex: none; }

    /* --- Foundation touch baseline for core interactive controls. --- */
    .btn,
    .btn-icon,
    .tab-logout-btn {
        min-height: 44px;
        touch-action: manipulation;
    }
}

/* ==== 19. RESPONSIVE TAB BAR (STEP 3) [2026-09-07] ==== */
/* Refines the Step-2 tab-strip containment into a sticky, single-line strip:
   tighter tap targets, no wrapped labels, exact 44px touch row. Desktop keeps
   the original spacious 2rem-padded buttons above 1023px. */
@media (max-width: 1023px) {
    .tab-bar {
        position: sticky;
        top: 0;
        z-index: 40;
    }

    .tab-btn {
        padding: 0.9rem 0.9rem;
        font-size: 0.9rem;
        white-space: nowrap;
    }

    .tab-logout-btn {
        padding: 0.9rem 0.9rem;
    }
}

/* ==== 20. RESPONSIVE FORMS & MODALS (STEP 4) [2026-09-07] ==== */
@media (max-width: 1023px) {
    /* A 16px minimum on every text-ish control stops iOS Safari's automatic
       focus-zoom. Includes the auth fields (email/password), which previously
       had no width rule at all. */
    .form-group input[type="text"],
    .form-group input[type="number"],
    .form-group input[type="date"],
    .form-group input[type="email"],
    .form-group input[type="password"],
    .plan-dropdown,
    textarea,
    .forum-textarea {
        font-size: 16px;
    }

    .form-group input[type="email"],
    .form-group input[type="password"] {
        width: 100%;
    }

    /* Stack the two-field rows (Bredd/Djup, Soltimmar/Jorddjup, sidebar buttons). */
    .flex-row-sm {
        flex-wrap: wrap;
    }

    .flex-row-sm > .half {
        flex: 1 1 100%;
        min-width: 100%;
    }

    /* Auth card + wide dialogs: reduce the oversized desktop padding. */
    .card {
        padding: 1.5rem;
    }

    .modal-wide {
        padding: 1.25rem !important;
    }

    /* Create-garden form: 3 columns -> 2 on tablets (-> 1 on phones below). */
    .modal-grid-layout {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .card {
        padding: 1.25rem;
    }
}

/* ==== 21. RESPONSIVE DASHBOARD & WEATHER (STEP 5) [2026-09-07] ==== */
@media (max-width: 1023px) {
    .dashboard-grid {
        gap: 1rem;
    }

    .dashboard-col {
        gap: 1rem;
    }

    .surface-card.pad-lg {
        padding: 1rem;
    }
}

@media (max-width: 767px) {
    /* Weather/warnings left column + to-do column -> single column */
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .stat-card {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* ==== 22. RESPONSIVE GANTT & SIMULATOR CHARTS (STEP 7) [2026-09-07] ==== */
/* The 365-column charts stay horizontally scrollable but retain a readable
   minimum width, and the label/legend chrome stops eating the viewport. */
@media (max-width: 1023px) {
    :root {
        --gant-label-width: 120px;
    }

    .gant-wrapper {
        padding: 1rem;
    }

    .gant-months-grid,
    .gant-bar-container,
    .simulation-bar-container {
        min-width: 680px;
    }

    .gant-label-col {
        font-size: 0.8rem;
    }

    .gant-legend {
        gap: 1rem !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        margin-top: 0.75rem !important;
        padding: 0.75rem 0.5rem 0.5rem !important;
    }

    .legend-item {
        white-space: normal;
    }
}

/* ==== 23. RESPONSIVE GARDEN EDITOR SURFACE (STEP 8) [2026-09-07] ==== */
/* The CAD grid hands the browser no pan/zoom gestures on devices: the editor
   owns the whole touch surface (draw, move zones, two-finger pinch-zoom and
   pan are driven by pointer events in plan.ts). Scoped strictly to the editor. */
@media (max-width: 1023px) {
    .plan-matrix-viewport,
    #garden-matrix-grid {
        touch-action: none;
    }
}

/* ==== 24. RESPONSIVE SWEEP (FINAL PASS) [2026-09-07] ==== */
@media (max-width: 767px) {
    /* Explore: the fixed 3x160px tile row got squeezed below the width of its
       own content, causing a horizontal scrollbar on small phones. */
    .details-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 1rem;
    }
}

@media (max-width: 430px) {
    /* Toasts: keep the fixed-width notification inside a small viewport
       (stays anchored in the top-right corner, slides in from the right). */
    .sprout-toast {
        min-width: 0;
        max-width: calc(100vw - 1.5rem);
    }
}

/* ==== 25. POPUP CHAT (MEDDELANDEN, FACEBOOK/MESSENGER-STYLE) [2026-09-08] ==== */
/* The launcher is always visible bottom-right once the app is shown; the popup
   and the small chat window are layered over the page below it (fixed). */

.chat-root { position: fixed; z-index: 1200; bottom: 1.25rem; right: 1.25rem; }

.chat-launcher {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border: none;
    border-radius: 50%;
    background-color: var(--primary-moss);
    color: var(--text-inverse);
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(var(--dark-rgb), 0.35);
    transition: var(--transition-fast);
}
.chat-launcher:hover { background-color: var(--primary-dark); transform: translateY(-1px); }

.chat-launcher-badge {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.35rem;
    border-radius: var(--radius-pill);
    background-color: var(--signal-error);
    color: var(--text-inverse);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3rem;
    text-align: center;
    border: 2px solid var(--bg-card);
}

.chat-popup {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.75rem);
    width: min(20.5rem, calc(100vw - 2.5rem));
    max-height: min(26rem, calc(100vh - 8rem));
    display: flex;
    flex-direction: column;
    background-color: var(--bg-card);
    border: var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 28px rgba(var(--dark-rgb), 0.22);
    overflow: hidden;
}

.chat-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    background-color: var(--primary-moss);
    color: var(--text-inverse);
    flex-shrink: 0;
}
.chat-popup-header h3 { color: var(--text-inverse); font-size: 1rem; margin: 0; }

.chat-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: none;
    border-radius: 50%;
    background-color: transparent;
    color: inherit;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition-fast);
}
.chat-popup-header .chat-close-btn:hover { background-color: rgba(255, 255, 255, 0.18); }

.chat-popup-search { padding: 0.75rem 1rem 0.25rem; flex-shrink: 0; }

.chat-popup-search input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: var(--border);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.85rem;
    background-color: var(--bg-surface);
    color: var(--text-main);
}
.chat-popup-search input:focus {
    outline: none;
    border-color: var(--primary-moss);
    background-color: var(--bg-card);
}

.chat-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.5rem;
}

.chat-empty {
    padding: 1.25rem 1rem;
    text-align: center;
    color: var(--text-muted);
}
.chat-empty h3 { color: var(--primary-dark); font-size: 0.95rem; margin-bottom: 0.3rem; }
.chat-empty p { font-size: 0.8rem; }

.chat-conversation-row {
    display: block;
    width: 100%;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.3rem;
    border: var(--border);
    border-radius: var(--radius-md);
    background-color: var(--bg-card);
    text-align: left;
    cursor: pointer;
    transition: var(--transition-fast);
    font-family: inherit;
}
.chat-conversation-row:hover { background-color: var(--primary-light); border-color: var(--primary-moss); }
.chat-conversation-row-active { background-color: var(--primary-light); border-color: var(--primary-moss); }

.chat-conversation-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.chat-conversation-name { font-size: 0.88rem; font-weight: 600; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-conversation-badge { padding: 0.05rem 0.5rem; font-size: 0.72rem; line-height: 1.4; flex-shrink: 0; }
.chat-conversation-preview { margin-top: 0.15rem; font-size: 0.8rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-conversation-meta { margin-top: 0.15rem; font-size: 0.7rem; color: var(--text-muted); }

/* Search results inside the popup */
.messages-search-results { padding: 0.25rem 1rem 0.5rem; }

.chat-search-result {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: var(--border);
    border-radius: var(--radius-md);
    background-color: var(--bg-card);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary-dark);
    text-align: left;
    cursor: pointer;
    transition: var(--transition-fast);
}
.chat-search-result:hover { background-color: var(--primary-light); border-color: var(--primary-moss); }

.chat-search-result-email { font-size: 0.72rem; font-weight: 400; color: var(--text-muted); word-break: break-all; }

.messages-search-hint { margin-top: 0.35rem; font-size: 0.72rem; color: var(--text-muted); }

/* Small chat window layered over the page */
.chat-window {
    position: absolute;
    right: 22.5rem;
    bottom: 0;
    width: min(21.5rem, calc(100vw - 24rem));
    height: min(27rem, calc(100vh - 8rem));
    min-width: 17rem;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-card);
    border: var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 28px rgba(var(--dark-rgb), 0.22);
    overflow: hidden;
}

.chat-window-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.75rem;
    background-color: var(--primary-moss);
    color: var(--text-inverse);
    flex-shrink: 0;
}
.chat-window-title { flex: 1; font-size: 0.92rem; font-weight: 600; color: var(--text-inverse); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-window-header .chat-close-btn:hover { background-color: rgba(255, 255, 255, 0.18); }

.chat-window-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    background-color: var(--bg-surface);
}

.chat-bubble {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    max-width: 82%;
    padding: 0.5rem 0.75rem;
    border: var(--border);
    border-radius: var(--radius-md);
}
.chat-bubble-mine { align-self: flex-end; background-color: var(--primary-light); border-color: var(--primary-moss); }
.chat-bubble-theirs { align-self: flex-start; background-color: var(--bg-card); }

.chat-bubble-body { font-size: 0.85rem; word-break: break-word; white-space: pre-wrap; }
.chat-bubble-meta { align-self: flex-end; font-size: 0.68rem; color: var(--text-muted); }

.chat-window-compose { padding: 0.6rem 0.75rem; border-top: var(--border); background-color: var(--bg-card); flex-shrink: 0; }
.chat-window-compose textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: var(--border);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.85rem;
    background-color: var(--bg-surface);
    color: var(--text-main);
    resize: none;
}
.chat-window-compose textarea:focus { outline: none; border-color: var(--primary-moss); }
.chat-window-compose .btn { max-width: 100%; margin-top: 0.4rem; }

/* Narrow screens: the chat window covers the popup instead of sitting beside it */
@media (max-width: 760px) {
    .chat-window { right: 0; width: min(21.5rem, calc(100vw - 2.5rem)); min-width: 0; }
}