/**
 * Mobile Plot Designer - Refactored CSS
 * Modern, maintainable stylesheet using ITCSS methodology
 * Mobile-first responsive design with component-based organization
 */

/* ==========================================================================
   1. CONFIGURATION & GLOBALS
   ========================================================================== */

:root {
    /* Base sizing variables - mobile first */
    --base-pot-size: 80px;  /* Start with mobile size */
    --min-touch-target: 44px;
    --recommended-touch-target: 48px;

    /* Spacing variables */
    --grid-gap: 0.75rem;
    --overlay-padding: 0.5rem;

    /* Color system */
    --pot-color: #a87444;
    --pot-color-light: #b08a50;
    --pot-color-dark: #96673b;

    /* Pot color variables for pot selector cards */
    --pot-color-terracotta: #c4a77d;
    --pot-color-grey: #a89a8c;
    --pot-color-white: #faf6f1;
    --pot-color-black: #1f2937;
    --pot-color-green: #22c55e;
    --pot-color-blue: #3b82f6;
    --pot-color-brown: #92400e;
    --pot-color-cream: #fef3c7;
    --pot-color-red: #ef4444;
    --pot-color-yellow: #eab308;
    --pot-color-purple: #a855f7;
    --pot-color-navy_blue: #1e3a8a;

    /* Typography */
    --font-size-xs: 0.625rem;   /* 10px */
    --font-size-sm: 0.75rem;    /* 12px */
    --font-size-base: 0.875rem; /* 14px */
    --font-size-lg: 1rem;       /* 16px */

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-base: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

    /* Transitions */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-Index Scale */
    --z-index-content: 1;
    --z-index-badge: 5;
    --z-index-focused: 10;
    --z-index-modal: 60;
    --z-index-tooltip: 900;
    --z-index-dragging: 1000;
    --z-index-controls: 1002;
}

/* Performance optimizations - apply to frequently animated elements */
.pot-container,
.plant-token,
.garden-label,
.planted-info-card,
.variety-image-container,
.hover-overlay {
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform: translateZ(0); /* Force hardware acceleration */
}

/* ==========================================================================
   2. LAYOUT SYSTEMS
   ========================================================================== */

/* Global Viewport and Body Fixes */
.h-screen {
    height: 100vh;
    height: 100dvh !important; /* Dynamic viewport height for mobile browsers */
}

body {
    overflow: hidden; /* Prevent scroll — plot designer is a fixed viewport app */
}

/* Plot Designer Main Layout */
.plot-designer-content {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* NEW: Main content area styling */
.plot-designer-main-content {
    flex: 1;
    position: relative;
    /* Dynamic height will be set by JavaScript - fallback for safety */
    height: calc(100vh - 160px);
    /* Removed min-height to allow dynamic sizing below 500px */
    overflow: hidden;
}

/* UNIVERSAL CANVAS CONTAINER RULE */
.canvas-container {
    width: 100%;
    height: 100%;
    overflow: auto; /* Allow scrolling if canvas is larger than container */
    cursor: grab;
    position: relative;
}

/* Removed CSS rules - looking for inline styles instead */

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

/* Plot Designer Header */
.plot-designer-header {
    padding: 8px 12px !important;
    flex-wrap: wrap !important;
}

.plot-designer-header h1 {
    font-size: 1.1rem !important;
    margin-bottom: 8px !important;
}

/* Mobile Navigation */
.mobile-nav-buttons {
    width: 100% !important;
    justify-content: space-between !important;
    margin-top: 8px !important;
}

.mobile-nav-buttons a {
    flex: 1 !important;
    margin: 0 4px !important;
    text-align: center !important;
    padding: 10px 8px !important;
    font-size: 0.85rem !important;
}

/* Bed Canvas Container - REMOVED: Now using direct canvas-area background */

/* Garden Labels Grid System - Flexible Layout for Dynamic Pot Sizing */
.garden-labels-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 2.5rem 2rem !important; /* Vertical and horizontal gap */
    align-items: flex-end !important; /* Align pots to the bottom for a natural look */
    justify-content: flex-start !important; /* Align pots to the bottom ground level */
    padding: var(--overlay-padding) !important;
    max-width: 100%;
    margin: 0 auto;
    /* Better scrolling performance */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Status badge styles (emoji lifecycle badge) */
.status-badge .badge-bg {
    fill: var(--color-surface-tint);
    stroke: rgba(0, 0, 0, 0.18);
    stroke-width: 1.5px;
    vector-effect: non-scaling-stroke;
}

@media (prefers-contrast: more) {
    .status-badge .badge-bg { stroke: rgba(0,0,0,.45); }
}

/* Tighter spacing for wide shapes (troughs and bowls) to reduce excessive gaps around large containers */
.garden-label.pot-shape-trough,
.garden-label.pot-shape-bowl {
    margin: 0.75rem 0.5rem !important; /* Keep the reduced margin */
    /* REMOVED: min-height and max-height constraints.
       The container's size is now perfectly controlled by the backend's
       --width-scale and --height-scale properties, ensuring it fits the SVG. */
    /* Force height calculation to work */
    height: calc(var(--base-pot-size) * var(--height-scale)) !important;
    /* justify-content rule removed - now handled universally by base .garden-label */
}

.garden-labels-grid:has(.pot-shape-trough) {
    gap: 1.5rem 1rem !important; /* Reduced gap when troughs are present */
}

/* Bed Layout Container */
.bed-layout-container {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    box-sizing: border-box;
    overflow: visible !important;
}

.bed-container {
    border-width: 3px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.bed-container[data-layout-id] {
    border: 3px solid #B45309 !important;
    background-color: rgba(120, 53, 15, 0.15) !important;
    min-width: 50px !important;
    min-height: 50px !important;
}

/* Canvas Area and Container */\n.canvas-area {\n    position: relative !important;\n    overflow: visible;\n    -webkit-overflow-scrolling: touch;\n    scroll-behavior: smooth;\n    touch-action: pan-x pan-y;\n    background: transparent !important;\n    min-width: 800px;\n    /* Maintain backend-provided dimensions - allow overflow beyond container for panning */\n    min-height: 600px;\n    /* Remove height: 100% to let backend dimensions take precedence */\n    /* Add smooth transition for zooming */\n    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}

/* Ensure canvas-area children inherit panning touch-action.
   No !important here — .plot-canvas and #plot-designer-shell have their own
   touch-action:none !important which must win for drawing/panning on iOS. */
.canvas-area *, .canvas-area *::before, .canvas-area *::after {
    touch-action: inherit;
}

.canvas-container {
    /* FIXED: Don't force 100% width - let canvas-area control its own size */
    width: fit-content;
    /* Use 100% of parent height instead of fit-content to prevent page scrolling */
    height: 100%;
    overflow: hidden !important; /* Hide overflow - panning will handle scrolling */
    overscroll-behavior: contain; /* Prevent iOS rubber-band bounce during pan */
    transform: none !important;
    position: relative !important;
}

.canvas-inner {
    /* FIXED: Don't force 100% of container - let content determine size */
    width: fit-content;
    height: fit-content;
}

/* Beds mode styling - REMOVED background so canvas-area becomes true background */
.canvas-container.mode-beds {
    /* No background - let canvas-area be the background itself */
    background: transparent;
}

/* ==========================================================================
   3. LEVEL OF DETAIL (LOD) STYLING
   ========================================================================== */

/* LOD Transitions - Smooth animations between levels */
.timeline-lens-svg,
.ribbon-renderer {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Yearly LOD - Minimal detail for maximum overview */
.lod-yearly .ribbon-yearly {
    transition: height 0.3s ease, opacity 0.3s ease;
    cursor: default; /* No interaction in yearly view */
}

.lod-yearly .ribbon {
    height: 2px !important;
    rx: 0 !important;
    ry: 0 !important;
    opacity: 0.7 !important;
}

.lod-yearly .event-marker {
    display: none; /* Hide all events in yearly view */
}

.lod-yearly .variety-label {
    display: none; /* Hide labels in yearly view for performance */
}

.lod-yearly .ribbon:hover {
    opacity: 0.8 !important; /* Subtle hover effect */
}

/* Monthly LOD - Medium detail for planning */
.lod-monthly .ribbon-monthly {
    transition: height 0.2s ease, opacity 0.2s ease;
}

.lod-monthly .ribbon {
    height: 8px !important;
    rx: 1px !important;
    ry: 1px !important;
    opacity: 0.85 !important;
}

.lod-monthly .event-marker-monthly {
    transition: r 0.2s ease, opacity 0.2s ease;
}

.lod-monthly .event-marker {
    r: 4px !important;
    stroke-width: 1px !important;
    opacity: 0.8 !important;
}

.lod-monthly .variety-label-monthly {
    font-size: 10px !important;
    opacity: 0.9 !important;
    transition: font-size 0.2s ease, opacity 0.2s ease;
}

.lod-monthly .ribbon:hover {
    opacity: 1.0 !important;
    transform: translateY(-1px);
}

.lod-monthly .event-marker:hover {
    r: 5px !important;
    opacity: 1.0 !important;
}

/* Weekly LOD - Full detail for detailed work */
.lod-weekly .ribbon-weekly {
    transition: height 0.15s ease, opacity 0.15s ease;
}

.lod-weekly .ribbon {
    height: 20px !important;
    rx: 2px !important;
    ry: 2px !important;
    opacity: 1.0 !important;
}

.lod-weekly .event-marker-weekly {
    transition: all 0.15s ease;
    animation: fadeIn 0.3s ease;
}

.lod-weekly .event-marker {
    r: 6px !important;
    stroke-width: 1.5px !important;
    opacity: 1.0 !important;
}

.lod-weekly .variety-label-weekly {
    font-size: 12px !important;
    opacity: 1.0 !important;
    transition: font-size 0.15s ease, opacity 0.15s ease;
}

.lod-weekly .ribbon:hover {
    opacity: 1.0 !important;
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.lod-weekly .event-marker:hover {
    r: 7px !important;
    transform: scale(1.2);
    filter: brightness(1.2);
}

/* Pinch zoom visual feedback */
.is-pinching {
    cursor: zoom-in !important;
    user-select: none;
    -webkit-user-select: none;
}

.is-pinching .timeline-lens-svg {
    transition: none !important; /* Disable transitions during pinch for smooth zooming */
}

/* LOD-specific container styling */
.timeline-content.lod-yearly {
    cursor: grab;
}

.timeline-content.lod-monthly {
    cursor: grab;
}

.timeline-content.lod-weekly {
    cursor: grab;
}

.timeline-content.lod-yearly:active,
.timeline-content.lod-monthly:active,
.timeline-content.lod-weekly:active {
    cursor: grabbing;
}

/* Performance optimizations for yearly view */
.lod-yearly * {
    will-change: transform;
    backface-visibility: hidden;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .timeline-lens-svg,
    .ribbon-renderer,
    .lod-yearly .ribbon-yearly,
    .lod-monthly .ribbon-monthly,
    .lod-weekly .ribbon-weekly,
    .lod-monthly .event-marker-monthly,
    .lod-weekly .event-marker-weekly,
    .lod-monthly .variety-label-monthly,
    .lod-weekly .variety-label-weekly {
        transition: none !important;
        animation: none !important;
    }

    .lod-monthly .ribbon:hover,
    .lod-weekly .ribbon:hover,
    .lod-monthly .event-marker:hover,
    .lod-weekly .event-marker:hover {
        transform: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .lod-yearly .ribbon,
    .lod-monthly .ribbon,
    .lod-weekly .ribbon {
        stroke: #000 !important;
        stroke-width: 1px !important;
    }

    .event-marker {
        stroke: #fff !important;
        stroke-width: 2px !important;
    }
}

/* Small screen adjustments for LOD */
@media (max-width: 768px) {
    .lod-monthly .ribbon {
        height: 6px !important; /* Slightly smaller on mobile */
    }

    .lod-weekly .ribbon {
        height: 16px !important; /* Slightly smaller on mobile */
    }

    .lod-monthly .variety-label-monthly {
        font-size: 9px !important;
    }

    .lod-weekly .variety-label-weekly {
        font-size: 11px !important;
    }
}

/* Animation for smooth LOD transitions */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

/* Apply animations to ribbon elements when LOD changes */
.lod-monthly .ribbon {
    animation: slideUp 0.3s ease-out;
}

.lod-weekly .ribbon {
    animation: fadeIn 0.2s ease-out;
}

/* Intersection Observer viewport-based styling */
.in-viewport {
    z-index: 1; /* Ensure viewport elements are on top */
}

/* Performance optimizations for elements outside viewport */
.ribbon:not(.in-viewport),
.event-marker:not(.in-viewport),
.variety-label:not(.in-viewport) {
    will-change: auto; /* Remove GPU acceleration for off-screen elements */
    transform: translateZ(0); /* Reset GPU acceleration */
}

/* Smooth transitions for elements entering/leaving viewport */
.ribbon {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.event-marker {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.variety-label {
    transition: opacity 0.2s ease;
}

/* ==========================================================================
   4. COMPONENTS
   ========================================================================== */

/* --- Component: Pot Card (Placement Tray) --- */
.pot-card {
    background: var(--color-surface-tint);
    border: 1px solid var(--color-surface-border);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    padding: 8px;
    position: relative;
}

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

.pot-card .pot-shape-icon {
    width: 28px;
    height: 28px;
    display: block;
}

.pot-card .plant-token {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-surface-border);
    border-radius: 4px;
    font-size: 10px;
    line-height: 1;
    padding: 2px 4px;
    margin: 1px;
}

.pot-card .plant-image {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    object-fit: cover;
    margin-right: 2px;
}

.pot-card-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-canvas-text);
    color: var(--color-content-inverse);
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 100;
    margin-bottom: 4px;
}

.pot-card-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--color-canvas-text);
}

.pot-card:hover .pot-card-tooltip {
    opacity: 1;
    visibility: visible;
}

/* --- Component: Plant Pot Placement Dock --- */
.plant-pot-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    pointer-events: none;
    display: flex;
    justify-content: center;
    padding: 0 16px 16px;
}

/* Drop target state - visual feedback when dragging plant over dock */
.plant-pot-dock--drop-target {
    pointer-events: auto;
}

.plant-pot-dock--drop-target .plant-pot-dock__sheet {
    outline: 3px dashed var(--color-green-500, #22c55e);
    outline-offset: -3px;
}

.plant-pot-dock__inner {
    width: min(100%, 1120px);
    pointer-events: auto;
}

.plant-pot-dock__collapsed {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}

.plant-pot-dock__collapsed-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 9999px;
    border: 1px solid rgba(34, 197, 94, 0.45);
    background: rgba(240, 253, 244, 0.85);
    color: var(--color-success);
    font-size: 0.82rem;
    font-weight: 600;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.plant-pot-dock__collapsed-button:hover,
.plant-pot-dock__collapsed-button:focus-visible {
    background: rgba(220, 252, 231, 0.95);
    border-color: rgba(22, 163, 74, 0.65);
    transform: translateY(-1px);
}

.plant-pot-dock__sheet {
    background: color-mix(in srgb, var(--color-surface-tint) 96%, transparent);
    border: 1px solid var(--color-surface-border);
    border-radius: 20px;
    box-shadow: 0 26px 60px rgba(15, 23, 42, 0.25);
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.plant-pot-dock__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.plant-pot-dock__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-content-primary);
}

.plant-pot-dock__subtitle {
    margin: 2px 0 0;
    font-size: 0.82rem;
    color: var(--color-content-secondary);
}

.plant-pot-dock__collapse {
    padding: 6px 12px;
    border-radius: 9999px;
    font-size: 0.75rem;
    border: 1px solid var(--color-surface-border);
    background: color-mix(in srgb, var(--color-surface-tint) 85%, transparent);
    color: var(--color-content-primary);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.plant-pot-dock__collapse:hover,
.plant-pot-dock__collapse:focus-visible {
    background: var(--color-surface-alt);
    border-color: rgba(71, 85, 105, 0.55);
}

.plant-pot-dock__content {
    display: grid;
    gap: 20px;
}

@media (min-width: 768px) {
    .plant-pot-dock__content {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (min-width: 1024px) {
    .plant-pot-dock__content {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }
    .plant-pot-dock__content--shed {
        grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    }
}

@media (max-width: 1023px) {
    .plant-pot-dock__sheet {
        padding: 16px;
    }
}

.plant-pot-dock__shed {
    background: color-mix(in srgb, var(--color-surface-tint) 96%, transparent);
    border: 1px solid var(--color-surface-border);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: min(640px, 80vh);
    min-height: 0;
    overflow: hidden;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-surface-border) 40%, transparent);
}

.plant-pot-dock__shed-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.plant-pot-dock__shed-header h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-content-primary);
}

.plant-pot-dock__shed-header button {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--color-surface-border);
    background: var(--color-surface-alt);
    color: var(--color-content-primary);
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.plant-pot-dock__shed-header button:hover,
.plant-pot-dock__shed-header button:focus-visible {
    background: var(--color-surface-border);
    border-color: rgba(71, 85, 105, 0.5);
}

.plant-pot-dock__shed-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}

.plant-pot-dock__shed-status {
    font-size: 0.75rem;
    color: var(--color-content-secondary);
}

.plant-pot-dock__shed-status--error {
    color: var(--color-danger);
}

.plant-pot-dock__shed-content {
    flex: 1;
    overflow-y: auto;
    border-radius: 12px;
    border: 1px solid var(--color-surface-border);
    background: color-mix(in srgb, var(--color-surface-tint) 60%, transparent);
    padding: 10px;
}

.plant-pot-dock__shed-placeholder {
    font-size: 0.75rem;
    color: var(--color-content-muted);
}

.plant-pot-tray--dock {
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
}

.plant-pot-tray--dock:hover {
    box-shadow: none;
}

.plant-pot-tray--dock .plant-pot-tray__surface {
    gap: 18px;
}

.plant-pot-tray__actions-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.plant-pot-tray__cta--inline {
    padding: 7px 12px;
    font-size: 0.72rem;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-surface-border);
    color: var(--color-content-primary);
}

.plant-pot-tray__cta--inline:hover,
.plant-pot-tray__cta--inline:focus-visible {
    background: var(--color-surface-border);
}

.plant-pot-tray__picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.plant-pot-tray__picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.plant-pot-tray__picker-body {
    flex: 1;
    min-height: 0;
}

@media (max-width: 767px) {
    /* On mobile, show plant picker as a full-sheet overlay inside the dock */
    .plant-pot-dock.plant-pot-dock--expanded .plant-pot-tray__picker {
        position: absolute;
        inset: 0;
        padding: 16px;
        background: rgba(255, 255, 255, 0.98);
        z-index: 25;
    }

    .plant-pot-dock.plant-pot-dock--expanded .plant-pot-tray__picker-body {
        max-height: none;
        overflow-y: auto;
    }
}

@media (max-width: 767px) {
    .plant-pot-dock {
        padding-left: 8px;
        padding-right: 8px;
    }

    .plant-pot-dock__sheet {
        border-radius: 18px 18px 0 0;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
        padding: 16px;
        position: relative;
    }

    .plant-pot-dock__content {
        grid-template-columns: minmax(0, 1fr);
    }

    .plant-pot-dock__shed {
        max-height: 45vh;
    }

    /* When expanded on mobile, use full-height sheet with internal scroll */
    .plant-pot-dock.plant-pot-dock--expanded {
        top: 0;
        bottom: 0;
    }

    .plant-pot-dock.plant-pot-dock--expanded .plant-pot-dock__inner {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .plant-pot-dock.plant-pot-dock--expanded .plant-pot-dock__sheet {
        flex: 1;
        max-height: 100%;
        overflow-y: auto;
    }

    /* Potting shed: overlay the main content when open */
    .plant-pot-dock.plant-pot-dock--expanded.plant-pot-dock--shed-open .plant-pot-dock__shed {
        position: absolute;
        inset: 0;
        max-height: none;
        border-radius: 18px 18px 0 0;
        background: rgba(255, 255, 255, 0.98);
        z-index: 40;
    }

    .plant-pot-dock.plant-pot-dock--expanded.plant-pot-dock--shed-open .plant-pot-dock__shed-body {
        flex: 1;
        min-height: 0;
        max-height: none;
        overflow: hidden;
    }

    .plant-pot-dock.plant-pot-dock--expanded.plant-pot-dock--shed-open .plant-pot-dock__shed-content {
        max-height: none;
        overflow-y: auto;
    }
}


/* --- Component: Plant Pot Placement Tray --- */
.plant-pot-tray {
    position: relative;
    border-radius: 16px;
    border: 1px solid rgba(30, 64, 175, 0.18);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.2);
    padding: 20px 24px 24px;
    padding-bottom: 24px;
    backdrop-filter: blur(14px);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.2s ease, background-color 0.25s ease;
    z-index: 30;
}

.plant-pot-tray {
    padding-bottom: 24px;
}

@supports not ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
    .plant-pot-tray {
        background: color-mix(in srgb, var(--color-surface-tint) 96%, transparent);
    }
}

.plant-pot-tray--floating {
    transform-origin: bottom center;
}

.plant-pot-tray:hover {
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.25);
}

.plant-pot-tray__surface {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
    grid-template-areas:
        'plant'
        'pot'
        'actions';
}

.plant-pot-tray__card {
    border-radius: 14px;
    border: 1px solid var(--color-surface-border);
    background: color-mix(in srgb, var(--color-surface-tint) 88%, transparent);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 148px;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.25s ease;
}

.plant-pot-tray__card:focus-within {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
    border-color: rgba(59, 130, 246, 0.45);
}

.plant-pot-tray__card--plant {
    grid-area: plant;
}

.plant-pot-tray__card--pot {
    grid-area: pot;
}

.plant-pot-tray__card-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.plant-pot-tray__heading {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-content-primary);
    margin: 0;
}

.plant-pot-tray__subheading {
    font-size: 0.8rem;
    color: var(--color-content-secondary);
    margin: 0;
}

.plant-pot-tray__card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.plant-pot-tray__placeholder {
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: opacity 0.2s ease;
}

.plant-pot-tray__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: opacity 0.2s ease;
}

.plant-pot-tray__summary {
    display: flex;
    align-items: center;
    gap: 12px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.plant-pot-tray__summary--pot {
    align-items: flex-start;
}

.plant-pot-tray__thumbnail {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--color-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 0 1px var(--color-surface-border);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.plant-pot-tray__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.plant-pot-tray__thumbnail--empty {
    border: 1px dashed rgba(100, 116, 139, 0.45);
    background: var(--color-surface-alt);
}

.plant-pot-tray__thumbnail-fallback {
    font-size: 1.5rem;
    color: var(--color-content-primary);
}

.plant-pot-tray__summary-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.plant-pot-tray__name {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-content-primary);
}

.plant-pot-tray__botanical {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-content-muted);
    font-style: italic;
}

.plant-pot-tray__spacing {
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-content-secondary);
}

.plant-pot-tray__pot-size,
.plant-pot-tray__location {
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-content-secondary);
}

.plant-pot-tray__waiting {
    margin: 0;
    padding: 10px 12px;
    background: rgba(59, 130, 246, 0.12);
    border-left: 3px solid rgba(59, 130, 246, 0.6);
    border-radius: 10px;
    font-size: 0.8rem;
    color: var(--color-info);
    transition: opacity 0.2s ease;
}

.plant-pot-tray__content--pot {
    gap: 18px;
}

.plant-pot-tray__occupancy {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.plant-pot-tray__occupancy-heading {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-content-primary);
}

.plant-pot-tray__occupancy-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.plant-pot-tray__occupancy-item {
    background: color-mix(in srgb, var(--color-surface-tint) 75%, transparent);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: inset 0 0 0 1px var(--color-surface-border);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.plant-pot-tray__occupancy-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.plant-pot-tray__occupancy-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-content-primary);
}

.plant-pot-tray__occupancy-quantity {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-info);
}

.plant-pot-tray__occupancy-warnings {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.plant-pot-tray__occupancy-warning {
    font-size: 0.7rem;
    padding: 4px 6px;
    border-radius: 9999px;
    background: rgba(250, 204, 21, 0.2);
    color: var(--color-warning);
}

.plant-pot-tray__capacity--pot {
    margin-top: 4px;
}

.plant-pot-tray__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.plant-pot-tray__metric {
    background: color-mix(in srgb, var(--color-surface-tint) 65%, transparent);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: inset 0 0 0 1px var(--color-surface-border);
}

.plant-pot-tray__metric-label {
    margin: 0;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-content-muted);
}

.plant-pot-tray__metric-value {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-content-primary);
}

.plant-pot-tray__quantity {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.plant-pot-tray__quantity-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-content-primary);
}

.plant-pot-tray__quantity-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-surface-alt);
    border-radius: 999px;
    padding: 4px;
}

.plant-pot-tray__quantity-button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--color-surface-tint);
    color: var(--color-info);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.plant-pot-tray__quantity-button svg {
    width: 18px;
    height: 18px;
}

.plant-pot-tray__quantity-button:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

.plant-pot-tray__quantity-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

.plant-pot-tray__quantity-button:focus-visible {
    outline: 2px solid rgba(59, 130, 246, 0.6);
    outline-offset: 2px;
}

.plant-pot-tray__quantity-input {
    width: 72px;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-content-primary);
    padding: 6px 4px;
    border-radius: 8px;
}

.plant-pot-tray__quantity-input:focus {
    outline: 2px solid rgba(59, 130, 246, 0.45);
    outline-offset: 2px;
    background: var(--color-surface-tint);
}

.plant-pot-tray__quantity-hint {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-success);
}

.plant-pot-tray__capacity {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(15, 118, 110, 0.08);
    border: 1px solid rgba(13, 148, 136, 0.25);
    transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.plant-pot-tray__capacity-heading {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0f766e;
}

.plant-pot-tray__capacity-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin: 0;
}

.plant-pot-tray__capacity-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.plant-pot-tray__capacity-label {
    margin: 0;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0f766e;
}

.plant-pot-tray__capacity-value {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-content-primary);
}

.plant-pot-tray__warning {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-danger);
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(248, 113, 113, 0.18);
    transition: opacity 0.2s ease;
}

.plant-pot-tray__warning svg {
    width: 18px;
    height: 18px;
}

.plant-pot-tray__card--warning {
    border-color: rgba(248, 113, 113, 0.5);
    box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.25);
}

.plant-pot-tray__skeleton {
    display: flex;
    align-items: center;
    gap: 12px;
}

.plant-pot-tray__skeleton-lines {
    display: grid;
    gap: 6px;
    width: 100%;
}

.plant-pot-tray__skeleton-block {
    display: block;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-surface-alt) 0%, var(--color-surface-border) 50%, var(--color-surface-alt) 100%);
    background-size: 200% 100%;
    animation: plant-pot-tray-shimmer 2s infinite;
}

.plant-pot-tray__skeleton-block--avatar {
    width: 48px;
    height: 48px;
    border-radius: 12px;
}

.plant-pot-tray__skeleton-block--line {
    height: 12px;
}

.plant-pot-tray__skeleton-block--short {
    width: 60%;
}

.plant-pot-tray__empty-state {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--color-content-primary);
    padding: 12px;
    border-radius: 12px;
    background: var(--color-surface-alt);
    transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.plant-pot-tray__empty-title {
    font-weight: 600;
    margin: 0;
}

.plant-pot-tray__empty-copy {
    margin: 0;
    color: var(--color-content-muted);
}

.plant-pot-tray__cta {
    align-self: flex-start;
    border-radius: 999px;
    padding: 6px 14px;
    background: rgba(37, 99, 235, 0.18);
    color: var(--color-info);
    border: none;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.plant-pot-tray__cta[disabled] {
    cursor: not-allowed;
    opacity: 0.55;
}

.plant-pot-tray__cta:hover,
.plant-pot-tray__cta:focus-visible {
    background: rgba(37, 99, 235, 0.28);
    transform: translateY(-1px);
    color: var(--color-info);
}

.plant-pot-tray__cta:focus-visible {
    outline: 3px solid rgba(59, 130, 246, 0.5);
    outline-offset: 2px;
}

.plant-pot-tray__actions {
    grid-area: actions;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 1px solid var(--color-surface-border);
    padding-top: 12px;
    padding-bottom: 4px;
}

.plant-pot-tray__status {
    font-size: 0.8rem;
    color: var(--color-content-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.plant-pot-tray__status--success {
    color: var(--color-success);
}

.plant-pot-tray__status--warning {
    color: var(--color-warning);
}

.plant-pot-tray__status--error {
    color: var(--color-danger);
}

.plant-pot-tray__status--pending {
    color: var(--color-content-primary);
}

.plant-pot-tray__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.plant-pot-tray__button {
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.plant-pot-tray__button:focus-visible {
    outline: 3px solid rgba(59, 130, 246, 0.55);
    outline-offset: 3px;
}

.plant-pot-tray__button--cancel {
    background: rgba(248, 113, 113, 0.14);
    color: var(--color-danger);
    box-shadow: 0 1px 4px rgba(185, 28, 28, 0.12);
}

.plant-pot-tray__button--confirm {
    background: rgba(34, 197, 94, 0.2);
    color: var(--color-success);
    box-shadow: 0 1px 4px rgba(22, 101, 52, 0.16);
}

.plant-pot-tray__button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.plant-pot-tray__button--cancel:not(:disabled):hover,
.plant-pot-tray__button--cancel:not(:disabled):focus-visible {
    background: rgba(248, 113, 113, 0.22);
    color: var(--color-danger);
    box-shadow: 0 4px 12px rgba(248, 113, 113, 0.25);
}

.plant-pot-tray__button--confirm:not(:disabled):hover,
.plant-pot-tray__button--confirm:not(:disabled):focus-visible {
    background: rgba(34, 197, 94, 0.28);
    color: var(--color-success);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.28);
}

@media (prefers-reduced-motion: reduce) {
    .plant-pot-tray,
    .plant-pot-tray__card,
    .plant-pot-tray__placeholder,
    .plant-pot-tray__content,
    .plant-pot-tray__summary,
    .plant-pot-tray__thumbnail,
    .plant-pot-tray__waiting,
    .plant-pot-tray__capacity,
    .plant-pot-tray__warning,
    .plant-pot-tray__empty-state,
    .plant-pot-tray__cta,
    .plant-pot-tray__status,
    .plant-pot-tray__button {
        transition: none !important;
    }

    .plant-pot-tray__skeleton-block {
        animation: none !important;
    }
}

@media (min-width: 768px) {
    .plant-pot-tray__surface {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            'plant pot'
            'actions actions';
    }

    .plant-pot-tray__actions {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* --- Component: Controls Menu Overlay --- */
.controls-menu-overlay {
    z-index: 1150 !important;
}

@media (max-width: 639px) {
    .plant-pot-tray__metrics,
    .plant-pot-tray__capacity-list {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

@keyframes plant-pot-tray-shimmer {
    0% {
        background-position: 200% 0;
    }
    50% {
        background-position: 100% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* --- Component: Garden Label / Pot --- */
.garden-label {
    --base-pot-size: 7.5rem; /* 120px - Base size for a medium pot */
    --width-scale: 1;      /* Default scale factor */
    --height-scale: 1;     /* Default scale factor */

    /* Dynamic sizing based on volume and shape */
    width: calc(var(--base-pot-size) * var(--width-scale));
    height: calc(var(--base-pot-size) * var(--height-scale));

    /* Add constraints to prevent extreme sizes */
    min-width: 5rem;    /* 80px */
    min-height: 5rem;   /* 80px */
    max-width: 40rem;   /* 640px - increased to allow proper trough sizing */
    max-height: 18rem;  /* 288px */

    /* Flexbox properties */
    flex-shrink: 0;

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end; /* THE UNIVERSAL FIX! Aligns all SVGs to bottom */
    border-radius: 12px;
    cursor: pointer;
    transition: all var(--transition-base);
    overflow: hidden;
    transform: translateZ(0);
    touch-action: manipulation;
}

/* Garden Label Interactive States */
.garden-label:hover,
.garden-label:active {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    filter: drop-shadow(0 0 12px rgba(251, 146, 60, 0.4));
}

.garden-label:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 1px;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4), 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 10;
}

.garden-label:focus-visible {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4), 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* Enhanced hover state */
.garden-label-lifted {
    transform: translateY(-4px) scale(1.03) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.12) !important;
    transition: transform var(--transition-base), box-shadow var(--transition-base) !important;
    z-index: 10;
}

/* Ensure the SVG inside the pot scales correctly */
.pot-svg-background, .pot-svg-container, .svg-template-wrapper, .pot-svg-container svg, .svg-template-wrapper svg {
    width: 100%;
    height: 100%;
}

/* --- Component: Pot SVG System --- */
.pot-svg-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* === Modern Terracotta SVG Styling System === */

/* Modern Terracotta shape-specific containers with enhanced effects */
.modern-terracotta-tapered,
.modern-terracotta-round,
.modern-terracotta-square,
.modern-terracotta-rectangle,
.modern-terracotta-trough,
.modern-terracotta-default {
    /* Base container for Modern Terracotta aesthetic */
    position: relative;
    width: 100%;
    height: 100%;
    /* Support for CSS custom properties from template */
    --pot-color: var(--pot-color, #a87444);
    --pot-color-light: var(--pot-color-light, #b08a50);
    --pot-color-dark: var(--pot-color-dark, #96673b);
}

/* Enhanced lighting effects for Modern Terracotta shapes */
.modern-terracotta-tapered svg,
.modern-terracotta-round svg,
.modern-terracotta-square svg {
    /* Requirement 5.1: Subtle lighting effects (2-3% lighter rim, 2-3% darker bottom) */
    filter:
        drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12))
        drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08));
    transition: filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Requirement 5.2: Fine grain/noise texture support via CSS filters */
.modern-terracotta-tapered svg [filter*="grainTexture"],
.modern-terracotta-round svg [filter*="grainTexture"],
.modern-terracotta-square svg [filter*="grainTexture"] {
    /* Low-opacity texture for natural material simulation */
    opacity: 0.95;
    mix-blend-mode: overlay;
}

/* Requirement 5.3: Soft inner shadow at rim support */
.modern-terracotta-tapered svg [filter*="innerRimShadow"],
.modern-terracotta-round svg [filter*="innerRimShadow"],
.modern-terracotta-square svg [filter*="innerRimShadow"] {
    /* Enhanced shadow rendering for depth */
    filter-quality: high;
}

/* Requirement 5.4: Faint side highlight for curved appearance */
.modern-terracotta-tapered svg linearGradient[id*="sideHighlight"],
.modern-terracotta-round svg linearGradient[id*="sideHighlight"],
.modern-terracotta-square svg linearGradient[id*="sideHighlight"] {
    /* Wide, low-opacity white highlight support */
    stop-opacity: 0.1;
}

/* SVG container for Modern Terracotta effects */
.pot-svg-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* Scale to fill the garden-label container */
    width: 100%;
    height: 100%;
    /* Remove max constraints to allow large containers */
    min-width: 70px;
    min-height: 70px;
    --pot-color: var(--pot-color, #a87444);
    --pot-color-light: var(--pot-color-light, #b08a50);
    --pot-color-dark: var(--pot-color-dark, #96673b);
}

.pot-svg-container svg {
    width: 100%;
    height: 100%;
    object-fit: fill;
    /* Enhanced rendering for Modern Terracotta effects */
    shape-rendering: geometricPrecision;
    image-rendering: optimizeQuality;
    /* Subtle drop shadow for grounding effect */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
    transition: filter var(--transition-slow);
    /* Consistent baseline rendering */
    transform-origin: center center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Enhanced SVG rendering on hover for lift effect */
.garden-label:hover .pot-svg-container svg {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.16)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08));
}

/* Enhanced focus states for SVGs */
.garden-label:focus .pot-svg-container svg {
    outline: none;
    filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.3)) drop-shadow(0 0 0 2px #3b82f6);
}

/* Proportional sizing utilities for different pot volumes */
.pot-svg-container.volume-tiny {
    max-width: 80px;
    max-height: 80px;
}

.pot-svg-container.volume-small {
    max-width: 100px;
    max-height: 100px;
}

.pot-svg-container.volume-medium {
    max-width: 120px;
    max-height: 120px;
}

.pot-svg-container.volume-large {
    max-width: 140px;
    max-height: 140px;
}

.pot-svg-container.volume-extra-large {
    max-width: 160px;
    max-height: 160px;
}

/* Responsive scaling for proportional relationships */
.pot-svg-container[data-volume] {
    /* Maintain aspect ratio and proportional scaling */
    aspect-ratio: 1;
    width: calc(var(--base-pot-size) * var(--volume-scale, 1));
    height: calc(var(--base-pot-size) * var(--volume-scale, 1));
    min-width: calc(var(--base-pot-size) * var(--volume-scale, 1));
    min-height: calc(var(--base-pot-size) * var(--volume-scale, 1));
}

/* Volume scale variables for different pot sizes */
.pot-svg-container[data-volume="tiny"] { --volume-scale: 0.8; }
.pot-svg-container[data-volume="small"] { --volume-scale: 1.0; }
.pot-svg-container[data-volume="medium"] { --volume-scale: 1.2; }
.pot-svg-container[data-volume="large"] { --volume-scale: 1.4; }
.pot-svg-container[data-volume="extra-large"] { --volume-scale: 1.6; }

/* Advanced proportional sizing with adaptive scaling */
.pot-svg-container[data-volume-liters] {
    /* Dynamic scaling based on actual liter values */
    --calculated-scale: clamp(0.7, calc(var(--volume-liters, 5) / 10), 2.0);
    min-width: calc(var(--base-pot-size) * var(--calculated-scale));
    min-height: calc(var(--base-pot-size) * var(--calculated-scale));
}

/* Override volume constraints for shapes that need dynamic aspect ratios */
.pot-shape-trough .pot-svg-container[data-volume],
.pot-shape-bowl .pot-svg-container[data-volume],
.pot-shape-trough .pot-svg-container,
.pot-shape-bowl .pot-svg-container,
.pot-shape-trough .pot-svg-container.volume-tiny,
.pot-shape-trough .pot-svg-container.volume-small,
.pot-shape-trough .pot-svg-container.volume-medium,
.pot-shape-trough .pot-svg-container.volume-large,
.pot-shape-trough .pot-svg-container.volume-extra-large,
.pot-shape-bowl .pot-svg-container.volume-tiny,
.pot-shape-bowl .pot-svg-container.volume-small,
.pot-shape-bowl .pot-svg-container.volume-medium,
.pot-shape-bowl .pot-svg-container.volume-large,
.pot-shape-bowl .pot-svg-container.volume-extra-large {
    /* Remove volume-based size constraints for troughs and bowls */
    max-width: none !important;
    max-height: none !important;
    /* Use dynamic width/height from parent .garden-label */
    width: 100% !important;
    height: 100% !important;
    /* Remove fixed aspect ratio to allow proper trough/bowl proportions */
    aspect-ratio: unset !important;
}

/* Ensure SVG elements inside troughs and bowls also scale properly */
.pot-shape-trough .pot-svg-container svg,
.pot-shape-bowl .pot-svg-container svg,
.pot-shape-trough .pot-svg-container.volume-tiny svg,
.pot-shape-trough .pot-svg-container.volume-small svg,
.pot-shape-trough .pot-svg-container.volume-medium svg,
.pot-shape-trough .pot-svg-container.volume-large svg,
.pot-shape-trough .pot-svg-container.volume-extra-large svg,
.pot-shape-bowl .pot-svg-container.volume-tiny svg,
.pot-shape-bowl .pot-svg-container.volume-small svg,
.pot-shape-bowl .pot-svg-container.volume-medium svg,
.pot-shape-bowl .pot-svg-container.volume-large svg,
.pot-shape-bowl .pot-svg-container.volume-extra-large svg {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
}

/* SVG lighting effects support */
.pot-svg-container svg linearGradient,
.pot-svg-container svg radialGradient {
    /* Ensure gradients render smoothly */
    vector-effect: non-scaling-stroke;
}

/* Texture rendering optimization */
.pot-svg-container svg [filter*="grainTexture"] {
    /* Optimize texture rendering for performance */
    will-change: filter;
}

/* Ensure Modern Terracotta gradients render consistently across all pot types */
.pot-svg-container svg linearGradient[id*="modernTerracotta"],
.pot-svg-container svg radialGradient[id*="rimLighting"],
.pot-svg-container svg linearGradient[id*="sideHighlight"] {
    /* Prevent gradient banding and ensure smooth color transitions */
    color-interpolation: sRGB;
    color-interpolation-filters: sRGB;
}

/* Texture pattern consistency across all pot shapes */
.pot-svg-container svg filter[id*="grainTexture"],
.pot-svg-container svg filter[id*="innerRimShadow"] {
    /* Optimize filter rendering across different pot shapes */
    color-interpolation-filters: sRGB;
    primitiveUnits: userSpaceOnUse;
}

/* Consistent shadow grounding for all pot types */
.pot-svg-container svg ellipse[fill="#000"][opacity] {
    /* Base shadow consistency */
    filter: blur(1px);
    transform-origin: center;
}

/* Enhanced Modern Terracotta color scheme support */
.pot-svg-container[data-pot-color] svg {
    /* Support for dynamic color injection while maintaining lighting effects */
    --pot-color: attr(data-pot-color);
    --rim-highlight: color-mix(in srgb, var(--pot-color, #a87444) 97%, white 3%);
    --bottom-shadow: color-mix(in srgb, var(--pot-color, #a87444) 97%, black 3%);
}

/* --- Component: Pot Labels and Slots --- */
.pot-label {
    font-weight: 500;
    letter-spacing: 0.01em;
    dominant-baseline: hanging;
}



/* --- Component: Information Overlay --- */
.information-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* --- Component: Planted Info Overlay (image + stage only) --- */
.planted-info-card {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    /* Remove white background - overlay directly on pot */
    background: none;
    border-radius: 0;
    padding: 4px 6px 6px 6px;
    box-shadow: none;
    border: none;
    /* Compact overlay for image + stage only */
    max-width: 65px;
    min-width: 55px;
    min-height: auto;
    text-align: center;
    transition: all var(--transition-slow);
    pointer-events: auto;
    box-sizing: border-box;
    touch-action: manipulation;
}

.garden-label:hover .planted-info-card {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* --- Component: Variety Image --- */
.variety-image-container {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 5px auto;
    border: 2px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, #fdf8f3, #e8ddd3);
    position: relative;
    flex-shrink: 0;
    /* Stronger glow since image is now primary identifier */
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9));
}

/* Multiple plants container for troughs */
.multiple-plants-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

/* Horizontal layout for multiple plant images - works on all screen sizes */
.multiple-plants-container .variety-images-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    margin-bottom: 3px;
    gap: 1px;
    min-height: 28px; /* Ensure space is reserved for images */
}

.multiple-plants-container .variety-image-container {
    display: inline-block;
    margin: 2px; /* Override the auto margins that interfere with flex layout */
}


/* Extra small variant for pots with many plants */
.multiple-plants-container .variety-image-container.extra-small {
    width: 18px !important;
    height: 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.9);
}

/* Mini lifecycle badges for individual plants in multi-plant containers */
.mini-lifecycle-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.9);
}

.mini-lifecycle-badge .lifecycle-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: currentColor;
}

/* Mini lifecycle stage colors */
.mini-lifecycle-badge.lifecycle-sprouting { background-color: #10b981; }
.mini-lifecycle-badge.lifecycle-growing { background-color: #059669; }
.mini-lifecycle-badge.lifecycle-flowering { background-color: #be185d; }
.mini-lifecycle-badge.lifecycle-fruiting { background-color: #f59e0b; }
.mini-lifecycle-badge.lifecycle-harvesting { background-color: #ea580c; }
.mini-lifecycle-badge.lifecycle-mature { background-color: #8b5cf6; }
.mini-lifecycle-badge.lifecycle-dormant { background-color: var(--color-content-muted); }

/* Plant summary for multi-plant containers */
.plant-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 9px;
    font-weight: 600;
    color: var(--color-content-primary);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.8);
    padding: 1px 4px;
    border-radius: 4px;
    text-align: center;
}

.plant-count {
    color: #059669;
}

.capacity-remaining {
    color: var(--color-content-muted);
    font-size: 8px;
    margin-top: 1px;
}

/* Capacity remaining indicator for single plants with multi-capacity */
.capacity-remaining-single {
    font-size: 8px;
    font-weight: 500;
    color: var(--color-content-muted);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.8);
    padding: 1px 3px;
    border-radius: 3px;
    text-align: center;
    margin-top: 2px;
}

/* Multiple capacity display for empty pots */
.multiple-capacity-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}


.plus-symbol-small {
    font-size: 1.2rem;
    font-weight: 300;
    min-width: 16px;
    min-height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plus-text-small {
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    font-size: 1rem;
    font-weight: 200;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.garden-label:hover .plus-text-small {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(0, 0, 0, 0.15);
}

.capacity-overflow {
    font-size: 8px;
    font-weight: 500;
    color: var(--color-content-muted);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.8);
    padding: 1px 4px;
    border-radius: 4px;
}

.overflow-text {
    color: var(--color-content-secondary);
}

.capacity-label {
    font-size: 8px;
    font-weight: 500;
    color: var(--color-content-secondary);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.85);
    padding: 1px 4px;
    border-radius: 4px;
    text-align: center;
}

/* Single capacity display for single-plant pots */
.single-capacity-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.variety-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    transition: transform var(--transition-slow);
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.variety-image-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    font-size: 20px;
    font-weight: 600;
    border-radius: 50%;
}

/* --- Component: Variety Name --- */
.variety-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-content-primary);
    line-height: 1.1;
    margin-bottom: 2px;
    text-align: center;
    word-wrap: break-word;
    hyphens: auto;
    /* Strong text shadow + subtle background for readability on pot */
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9), 0 0 6px rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.85);
    padding: 1px 3px;
    border-radius: 4px;
    min-height: 22px;
    max-width: 75px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* --- Component: Lifecycle Badge --- */
.lifecycle-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 5px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 500;
    text-align: center;
    text-transform: capitalize;
    letter-spacing: 0.025em;
    min-height: 12px;
    background-color: var(--color-surface-tint);
    color: var(--color-content-primary);
    border: 1px solid var(--color-surface-border);
    transition: all var(--transition-base);
}

/* Lifecycle stage colors */
.lifecycle-badge.lifecycle-sprouting {
    background-color: rgba(220, 252, 231, 0.95);
    color: #065f46;
    border-color: var(--color-success);
}

.lifecycle-badge.lifecycle-growing {
    background-color: rgba(209, 250, 229, 0.95);
    color: #047857;
    border-color: #059669;
}

.lifecycle-badge.lifecycle-flowering {
    background-color: #fce7f3;
    color: #be185d;
    border-color: #fbcfe8;
}

.lifecycle-badge.lifecycle-fruiting {
    background-color: rgba(254, 243, 199, 0.95);
    color: var(--color-warning);
    border-color: #f59e0b;
}

.lifecycle-badge.lifecycle-harvesting {
    background-color: rgba(255, 237, 213, 0.95);
    color: #9a3412;
    border-color: #ea580c;
}

.lifecycle-badge.lifecycle-mature {
    background-color: #f3e8ff;
    color: #7c2d12;
    border-color: #e9d5ff;
}

.lifecycle-badge.lifecycle-dormant {
    background-color: #f1f5f9;
    color: var(--color-content-secondary);
    border-color: var(--color-surface-border);
}

/* --- Component: Empty Pot Call-to-Action --- */
.empty-pot-cta {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 3;
    pointer-events: auto;
}

.plus-symbol {
    font-size: 2rem;
    font-weight: 300;
    min-width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    margin-bottom: 8px;
}

.plus-text {
    color: rgba(255, 255, 255, 0.9);
    /* Strong white text with dark shadow for contrast against pot */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 1px 4px rgba(0, 0, 0, 0.6);
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.5));
    transition: all var(--transition-slow);
    padding: 8px;
    font-size: 2.5rem;
    font-weight: 100;
    /* Subtle semi-transparent background circle */
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.garden-label:hover .plus-text {
    color: rgba(255, 255, 255, 1);
    background: rgba(0, 0, 0, 0.2);
    transform: scale(1.1);
}

.capacity-text {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-content-secondary);
    background: rgba(255, 255, 255, 0.95);
    padding: 2px 6px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    display: inline-block;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    box-shadow: var(--shadow-sm), 0 0 0 1px rgba(255, 255, 255, 0.6);
}

/* Universal pot capacity display for ALL pots */
.universal-pot-capacity {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 2;
    pointer-events: none;
}

.universal-capacity-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-content-secondary);
    background: rgba(255, 255, 255, 0.9);
    padding: 2px 5px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: inline-block;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* --- Component: Stack Badge --- */
.stack-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 4;
}

.stack-badge-circle {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: var(--shadow-base), 0 0 0 1px rgba(0, 0, 0, 0.1);
    transition: all var(--transition-base);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    position: relative;
}

.stack-badge-circle:hover {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.stack-badge-circle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--min-touch-target);
    height: var(--min-touch-target);
    border-radius: 50%;
}

.stack-count {
    font-size: var(--font-size-xs);
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Stacked pot visual effect */
.garden-label[x-data*='is_stacked']:before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: 3px;
    bottom: 3px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    z-index: -1;
}

.garden-label[x-data*='is_stacked']:after {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: 6px;
    bottom: 6px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    z-index: -2;
}

/* --- Component: Plant Tokens --- */
.plant-token {
    position: absolute;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50%;
    border: 2px solid #ffffff;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: var(--shadow-base), 0 0 0 1px rgba(0, 0, 0, 0.05);
    transition: all var(--transition-slow);
    z-index: 3;
    overflow: hidden;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.plant-token:active {
    transform: scale(0.9);
    transition-duration: 0.1s;
}

.plant-token .variety-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.plant-token .variety-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

/* Ghost tokens for live allocation */
.plant-token.token-ghost {
    opacity: 0.6;
    border: 2px dashed #1976d2;
    background: linear-gradient(135deg, #64b5f6, #42a5f5) !important;
    transform: scale(0.95);
    width: 36px !important;
    height: 36px !important;
    cursor: pointer;
    touch-action: manipulation;
    animation: ghost-pulse 2s ease-in-out infinite;
}

.plant-token.token-ghost:active {
    transform: scale(0.85);
    opacity: 0.5;
    transition-duration: 0.1s;
}

/* Ghost token text animation */
.plant-token.token-ghost .token-text {
    animation: ghost-shimmer 1.5s ease-in-out infinite;
}

/* Ghost token quantity indicator animation */
.plant-token.token-ghost .absolute {
    background: #1976d2 !important;
    border-color: #64b5f6 !important;
    animation: quantity-pulse 1s ease-in-out infinite;
}

/* Overlapping token arrangement */
.plant-token:nth-child(1) { z-index: 3; }
.plant-token:nth-child(2) {
    z-index: 2;
    transform: translateX(8px) translateY(4px);
}
.plant-token:nth-child(3) {
    z-index: 1;
    transform: translateX(-8px) translateY(4px);
}

/* Token overflow indicator (+N badge) */
.token-overflow-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    z-index: 5;
}

/* --- Component: Annual Placement --- */
/* Removed min sizing to allow natural content-based sizing on desktop */
.annual-placement {
    border-width: 4px !important;
    font-size: 1.2rem !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    touch-action: manipulation;
    transition: all var(--transition-base);
}

.annual-placement:hover {
    transform: none !important;
    box-shadow: none !important;
}

.annual-placement:active {
    transform: scale(0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.1s ease;
}

.annual-placement:focus-visible {
    outline: 3px solid #3b82f6 !important;
    outline-offset: 2px !important;
}

.placement-label {
    font-weight: 600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7) !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 4px !important;
    padding: 2px 4px !important;
}

/* --- Component: Contextual Toolbar --- */
.contextual-toolbar {
    /* Show by default (for desktop), will be hidden on mobile via media query */
}

.contextual-toolbar[aria-hidden="false"] { display: block !important; }

/* --- Component: Pot Detail Panel (HTMX) --- */
.pot-detail-container {
    position: fixed;
    top: 80px;
    right: 12px;
    z-index: 50;
    max-width: 320px;
    width: 100%;
}
.pot-detail-container.hidden { display: none; }

.pot-detail-panel {
    background: var(--color-surface-tint);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,.12);
    padding: 16px;
    font-size: 14px;
}
.pot-detail-header h3 {
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 600;
}
.pot-detail-size {
    font-size: 12px;
    color: var(--color-content-muted);
}
.pot-detail-plant {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px;
    border-radius: 8px;
    background: var(--color-surface-alt, #f9fafb);
    border: 1px solid var(--color-surface-border, #e5e7eb);
}
.pot-plant-thumb {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 6px;
}
.pot-plant-name {
    flex: 1;
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pot-detail-empty {
    margin-top: 12px;
    text-align: center;
    color: var(--color-content-muted);
}
.pot-detail-empty p { margin: 0 0 8px; }
.pot-detail-actions {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-surface-border, #e5e7eb);
}

@media (max-width: 767.98px) {
    .pot-detail-container {
        top: auto;
        bottom: 12px;
        right: 12px;
        left: 12px;
        max-width: none;
    }
}

/* --- Component: Manipulation Controls --- */
.manipulation-controls-bar {
    position: fixed !important;
    top: 120px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    border-radius: 0 0 12px 12px !important;
    padding: 8px 12px !important;
    z-index: 1002 !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(8px) !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    display: none; /* Hidden by default, Alpine.js x-show will handle visibility */
}

/* Alpine.js will add [style*="display"] when x-show is true */
.manipulation-controls-bar[style*="display: block"],
.manipulation-controls-bar[style*="display:block"] {
    display: block !important;
}

/* Mobile manipulation tray for existing placements */
.manipulation-tray-mobile-existing {
    /* Visibility handled by Alpine x-show and x-cloak */
}

.manipulation-button {
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    font-size: 0.9rem !important;
    touch-action: manipulation;
}

/* --- Component: Plant Selection --- */
/* ==========================================================================
   MOBILE RESPONSIVE STYLES - Comprehensive fixes for sidebars and toolbars
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. DESIGN DOCK - Hide by default, slide in as overlay when opened */
    #design-dock {
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        width: 90vw !important;
        max-width: 320px !important;
        z-index: 1100;
    }

    /* Show design dock when visible (controlled by Alpine.js) */
    #design-dock:not([style*="display: none"]) {
        transform: translateX(0);
    }

    /* Add semi-transparent backdrop for design dock */
    #design-dock::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: -1;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }

    #design-dock:not([style*="display: none"])::before {
        opacity: 1;
        pointer-events: auto;
    }

    /* 2. CONTROLS MENU OVERLAY - Convert to bottom drawer */
    .controls-menu-overlay {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 40vh !important;
        max-height: 40vh !important;
        width: 100vw !important;
        max-width: none !important;
        border-radius: 16px 16px 0 0 !important;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15) !important;
        overflow-y: auto !important;
        z-index: 1150 !important;
    }

    /* 3. CONTEXTUAL TOOLBAR - Position at bottom */
    .contextual-toolbar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100vw !important;
        border-radius: 16px 16px 0 0 !important;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
        z-index: 1000 !important;
        padding: 0 !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(8px) !important;
    }

    /* 5. MANIPULATION CONTROLS - Bottom positioning */
    .manipulation-controls-bar {
        top: auto !important;
        bottom: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        z-index: 1001 !important;
    }

    /* 6. TIMELINE - More compact on mobile */
    .timeline {
        padding: 8px 8px 4px 8px !important;
    }

    .timeline-date-display {
        font-size: 0.85rem !important;
        padding: 6px 12px !important;
        min-height: 36px !important;
        gap: 8px !important;
    }

    /* 7. CANVAS ADJUSTMENTS - Maximize available space */
    .plot-canvas-wrap {
        padding-bottom: 0 !important;
    }

    /* Ensure canvas doesn't get covered by bottom toolbars */
    .canvas-area {
        padding-bottom: 80px;
    }

    /* 8. Z-INDEX HIERARCHY - Proper layering on mobile */
    .timeline { z-index: 10 !important; }
    .canvas-area { z-index: 1 !important; }
    .contextual-toolbar { z-index: 1000 !important; }
    .manipulation-controls-bar { z-index: 1001 !important; }
    .plant-pot-dock { z-index: 1100 !important; }
    .controls-menu-overlay { z-index: 1150 !important; }
    #design-dock { z-index: 1100 !important; }
    /* Plant tray must appear above placement dock */
    .plant-tray--mobile { z-index: 1200 !important; }

    /* 8. TOUCH-FRIENDLY ADJUSTMENTS */
    /* Increase touch targets for mobile - scoped to main content, not nav */
    main button, main a, main .clickable {
        min-height: 44px;
        min-width: 44px;
    }

    /* Exception for toggle switches - they have their own touch-friendly sizing */
    main button.toggle-switch,
    main .toggle-switch {
        min-height: auto;
        min-width: auto;
    }

    /* Better spacing for mobile interactions */
    .pd-card__header,
    .pd-section__header {
        padding: 16px 12px !important;
    }

    /* Scrollable sections with better UX */
    .pd-sections {
        max-height: 50vh !important;
        -webkit-overflow-scrolling: touch;
    }
}

.plant-selection-item {
    min-height: 56px !important;
    padding: 12px !important;
    font-size: 0.95rem !important;
    touch-action: manipulation;
}

.plant-selection-item:active {
    background-color: rgba(0, 0, 0, 0.05);
    transform: scale(0.98);
}

/* --- Component: Color Picker --- */
.color-picker-popover {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 40vh;
    overflow-y: auto;
}

.color-option {
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 4px !important;
    border-width: 3px !important;
    touch-action: manipulation;
}

/* --- Component: Quantity Controls --- */
.quantity-controls {
    flex-direction: column !important;
    gap: 12px !important;
}

.quantity-adjust-button {
    min-width: 48px !important;
    min-height: 48px !important;
    font-size: 1.2rem !important;
    touch-action: manipulation;
}

.quantity-stepper-button {
    min-width: 48px !important;
    min-height: 48px !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    font-size: 1.25rem !important;
    font-weight: bold;
    border: 2px solid var(--color-surface-border);
    background: var(--color-surface-tint);
    border-radius: 8px;
    transition: all var(--transition-base);
}

.quantity-stepper-button:active {
    transform: scale(0.95);
    background: var(--color-surface-alt);
    border-color: var(--color-content-faint);
}

/* --- Component: Filter and Modal Buttons --- */
.filter-button {
    min-width: 48px !important;
    min-height: 48px !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    padding: 12px 16px !important;
    margin: 4px !important;
    border-radius: 8px;
    font-weight: 600;
    transition: all var(--transition-base);
}

.filter-button:active {
    transform: scale(0.95);
    background-color: rgba(59, 130, 246, 0.1);
}

.modal-close-button {
    min-width: 48px !important;
    min-height: 48px !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    border-radius: 50%;
    transition: all var(--transition-base);
}

.modal-close-button:active {
    transform: scale(0.9);
    background-color: rgba(0, 0, 0, 0.1);
}

.assign-confirm-button {
    min-width: 44px !important;
    min-height: 44px !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    border-radius: 8px;
    padding: 12px 16px;
    font-weight: 600;
    transition: all var(--transition-base);
}

.assign-confirm-button:active {
    transform: scale(0.97);
    filter: brightness(0.95);
}

/* --- Component: Drag and Drop States --- */
.pot-container.dragging {
    opacity: 0.8;
    transform: scale(1.05);
    z-index: var(--z-index-dragging);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.pot-container.drop-target {
    background-color: rgba(59, 130, 246, 0.1);
    border: 2px dashed #3b82f6;
    animation: dropTargetPulse 1s ease-in-out infinite;
}

/* --- Component: Stack Drag States (Task 18) --- */
.stacked-pot-item {
    cursor: grab;
    transition: all var(--transition-base);
}

.stacked-pot-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.stacked-pot-item.stack-dragging {
    opacity: 0.7;
    transform: scale(1.05);
    z-index: var(--z-index-dragging);
    box-shadow: 0 8px 24px rgba(244, 63, 94, 0.3);
    cursor: grabbing;
}

.stacked-pot-item.stack-mousedown {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Canvas unstack drop zone visual feedback */
.canvas-area.unstack-drop-zone-active {
    background-color: rgba(244, 63, 94, 0.05);
    border: 2px dashed #f43f5e;
    animation: unstackDropPulse 1.2s ease-in-out infinite;
}

.canvas-area.unstack-drop-zone-active::before {
    content: "Drop here to unstack pot";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(244, 63, 94, 0.9);
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* --- Component: Haptic Feedback Simulation --- */
.pot-container.haptic-light:active {
    animation: hapticLight 0.1s ease-out;
}

.pot-container.haptic-medium:active {
    animation: hapticMedium 0.15s ease-out;
}

.pot-container.haptic-heavy:active {
    animation: hapticHeavy 0.2s ease-out;
}

/* --- Component: Allocation Overlay --- */
.allocation-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(59, 130, 246, 0.1);
    border: 2px dashed #3b82f6;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    cursor: pointer;
    transition: all var(--transition-base);
}

.allocation-overlay:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: var(--color-info);
}

.allocation-indicator {
    font-size: 32px;
    color: var(--color-link);
    font-weight: 300;
}

/* --- Component: Bed Container --- */
/* Baseline bed container styles - removed min sizing to allow natural content-based sizing on desktop */

/* --- Component: Timeline --- */
.timeline-container {
    padding: 15px 10px;
    background: linear-gradient(135deg, var(--color-surface-tint) 0%, var(--color-surface) 100%);
    border-bottom: 2px solid var(--color-surface-border);
    backdrop-filter: blur(8px);
}

.timeline-container input[type="range"] {
    height: 44px !important;
    width: 100% !important;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    touch-action: pan-x;
}

.timeline-container input[type="range"]::-webkit-slider-track {
    height: 8px;
    background: var(--color-surface-border);
    border-radius: 4px;
}

.timeline-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50%;
    background: #10b981;
    border: 4px solid #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    touch-action: manipulation;
}

.timeline-container input[type="range"]::-moz-range-thumb {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50%;
    background: #10b981;
    border: 4px solid #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    border: none;
}

/* Timeline date display - rendered in header */
.timeline-date-display {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 9999px;
    border: 1px solid rgba(16, 185, 129, 0.18);
    box-shadow: var(--timeline-shadow, 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.06));
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-content-primary);
    min-height: 40px;
    backdrop-filter: blur(6px);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.timeline-date-display:not(.is-inline-editing):hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(15, 118, 110, 0.18);
}

.timeline-date-display.is-inline-editing {
    gap: 8px;
    transform: none;
}

.timeline-date-display .inline-date {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}

.timeline-header-date-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
}

/* Timeline months container */
.timeline-months-container {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 10px 0;
}

.timeline-month-marker {
    scroll-snap-align: center;
    min-width: 60px;
    flex-shrink: 0;
}

.timeline-nav-button {
    flex-shrink: 0 !important;
    transition: all var(--transition-base);
    font-weight: 600 !important;
    color: var(--color-content-secondary) !important;
    box-shadow: var(--shadow-sm) !important;
    min-width: 48px !important;
    min-height: 48px !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.timeline-nav-button:active {
    transform: scale(0.9);
    background: var(--color-surface-alt) !important;
    border-color: var(--color-content-secondary) !important;
}

/* --- Component: Mode Toggle --- */
.mode-toggle-button {
    min-width: 48px !important;
    min-height: 48px !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    border-radius: 8px;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.mode-toggle-button:active {
    transform: scale(0.95);
    filter: brightness(0.9);
}

.mode-toggle-button.active {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* --- Component: Layout Mode Toggles --- */
.layout-mode-toggle {
    display: none !important; /* Hidden on mobile */
}

.md\:hidden button[class*="border-green-300"],
.md\:hidden button[class*="border-orange-300"] {
    min-width: 54px !important;
    padding: 6px 4px !important;
    font-size: 0.7rem !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
}

.md\:hidden .flex.space-x-2 {
    flex-wrap: wrap !important;
    gap: 4px !important;
}

/* --- Component: Detailed Pot Tooltip System --- */
.pot-tooltip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-canvas-text);
    color: var(--color-content-inverse);
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: var(--z-index-tooltip);
    min-width: 200px;
    max-width: 280px;
    font-size: var(--font-size-sm);
    line-height: 1.4;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);

    /* Hidden by default */
    opacity: 0;
    pointer-events: none;
    transition: all var(--transition-slow);
    transform: translate(-50%, -50%) scale(0.9);
}

.garden-label:hover .pot-tooltip {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}


.tooltip-image {
    margin-bottom: 8px;
    text-align: center;
}

.tooltip-pot-photo {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.tooltip-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tooltip-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--color-content-inverse);
}

.tooltip-detail {
    font-size: 11px;
    color: var(--color-content-inverse);
    line-height: 1.3;
}

.tooltip-plants {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.tooltip-plants-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-content-inverse);
    margin-bottom: 4px;
}

.tooltip-plant-item {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}

.tooltip-plant-image {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

.tooltip-plant-name {
    font-size: var(--font-size-xs);
    color: var(--color-content-inverse);
    line-height: 1.3;
}

/* --- Component: Simple Hover Overlay System --- */
.hover-overlay {
    position: fixed;
    top: auto;
    bottom: 16px;
    left: 16px;
    right: 16px;
    transform: none;
    margin-top: 0;
    background: rgba(31, 41, 55, 0.95);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: var(--font-size-sm);
    white-space: nowrap;
    z-index: 10;
    pointer-events: none;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(8px);
}

.hover-overlay::before {
    display: none; /* Remove arrow on mobile */
}

/* --- Component: Pot Hover Effects --- */
.pot-hovered {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1);
    z-index: 20;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.pot-hovered .pot-svg-container {
    filter: brightness(1.1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    transition: filter 0.2s ease-out;
}

/* Enhanced hover for positioned pots */
[data-pot-id].pot-hovered {
    transform: scale(1.05);
    filter: brightness(1.1) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
    z-index: 20;
    transition: transform 0.2s ease-out, filter 0.2s ease-out, z-index 0s;
}

/* Prevent hover effects on dragged items */
.pot-hovered.dragging {
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
}

/* --- SVG Floating Pot: Drop Target Highlight --- */
g[data-kind="floating-pot"].pot-drop-target [data-kind="pot-shape"] {
    filter: drop-shadow(0 0 6px rgba(58, 140, 75, 0.7));
}
g[data-kind="floating-pot"].pot-drop-target [data-kind="hit-area"] {
    stroke: #3A8C4B;
    stroke-width: 2;
    stroke-dasharray: 4,2;
    rx: 4;
    ry: 4;
    vector-effect: non-scaling-stroke;
}

/* ==========================================================================
   4. INLINED STYLES
   ========================================================================== */

body.desktop-plot-designer-mode main .max-w-7xl {
    max-width: none;
}

body.desktop-plot-designer-mode main {
    padding: 0;
    margin: 0;
}
.h-screen {
    height: 100vh;
    height: 100dvh;
}
.cursor-grab {
    cursor: grab !important;
}
.cursor-grabbing {
    cursor: grabbing !important;
}
.cursor-crosshair {
    cursor: crosshair !important;
}
.cursor-move {
    cursor: move !important;
}

.timeline-slider {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    outline: none;
    z-index: 1;
    position: relative;
}

.timeline-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 28px;
    width: 8px;
    border-radius: 4px;
    background: #dc2626 !important;
    cursor: pointer;
    border: 2px solid #ffffff !important;
    transition: all 0.2s ease;
    position: relative;
    box-shadow: none !important;
    z-index: 2;
}

.timeline-slider::-webkit-slider-thumb:hover {
    height: 32px;
    width: 10px;
    background: #b91c1c !important;
}

.timeline-slider::-moz-range-thumb {
    -moz-appearance: none;
    height: 28px;
    width: 8px;
    border-radius: 4px;
    background: #dc2626 !important;
    cursor: pointer;
    border: 2px solid #ffffff !important;
    box-shadow: none !important;
    z-index: 2;
}

.timeline-slider::-ms-thumb {
    height: 28px;
    width: 8px;
    border-radius: 4px;
    background: #dc2626 !important;
    border: 2px solid #ffffff !important;
    box-shadow: none !important;
}

@media (pointer: coarse) {
    .timeline-slider {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
    }

    .timeline-slider::-webkit-slider-thumb {
        -webkit-appearance: none !important;
        appearance: none !important;
        height: 32px !important;
        width: 10px !important;
        border-radius: 5px !important;
        background: #dc2626 !important;
        border: 2px solid #ffffff !important;
        box-shadow: none !important;
    }

    .timeline-slider::-webkit-slider-thumb:active {
        background: #dc2626 !important;
    }

    [data-marker] .w-3 {
        width: 16px !important;
        height: 16px !important;
    }

    [data-marker] .w-4 {
        width: 20px !important;
        height: 20px !important;
        font-size: 11px !important;
    }

    [data-marker] .tooltip {
        font-size: 14px !important;
        padding: 12px 16px !important;
    }
}

@media screen and (max-width: 768px) {
    .timeline-slider::-webkit-slider-thumb {
        -webkit-appearance: none !important;
        height: 32px !important;
        width: 10px !important;
        background: #dc2626 !important;
        border: 2px solid #ffffff !important;
        border-radius: 5px !important;
        box-shadow: none !important;
    }
}

.timeline-slider::-webkit-slider-track {
    height: 10px;
    border-radius: 5px;
    border: 1px solid var(--color-surface-border);
}

.timeline-slider::-moz-range-track {
    height: 10px;
    border-radius: 5px;
    border: 1px solid var(--color-surface-border);
}

.tooltip {
    z-index: 1500 !important;
}

.timeline-month:hover .tooltip {
    pointer-events: auto;
}

/* Enhanced Event Markers */
.event-marker {
    z-index: 50;
    transition: all 0.2s ease;
    pointer-events: auto;
    position: relative;
}

.event-marker:hover {
    z-index: 60;
}

/* Event marker pulse animation for recent events */
@keyframes event-pulse {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.4;
    }
    100% {
        transform: scale(1);
        opacity: 0.7;
    }
}

.event-marker .animate-ping {
    animation: event-pulse 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Enhanced tooltips with better positioning and styling */
.event-marker .group-hover\:opacity-100 {
    transition-delay: 0.3s;
}

/* Smooth scaling animation for event dots */
.event-marker .group-hover\:scale-125 {
    transform-origin: center;
}

/* Better shadow for event markers */
.event-marker .shadow-lg {
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

.event-marker:hover .shadow-xl {
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.2));
}

/* Event marker glow effect */
.event-marker > div:first-child {
    position: relative;
}

.event-marker > div:first-child::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: inherit;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: -1;
}

.event-marker:hover > div:first-child::before {
    opacity: 0.3;
}

.canvas-container.drawing-mode {
    cursor: crosshair !important;
}

.rectangle-preview {
    position: absolute;
    border: 2px dashed #22c55e;
    background: rgba(34, 197, 94, 0.1);
    pointer-events: none;
    z-index: 100;
    border-radius: 4px;
    animation: drawingPulse 1.5s ease-in-out infinite;
}

@keyframes drawingPulse {
    0%, 100% {
        border-opacity: 1;
        background-color: rgba(34, 197, 94, 0.1);
    }
    50% {
        border-opacity: 0.6;
        background-color: rgba(34, 197, 94, 0.2);
    }
}

.canvas-container[data-drawing-plant]::before {
    content: "Click and drag to draw rectangle for " attr(data-drawing-plant);
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(34, 197, 94, 0.9);
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    z-index: 200;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.canvas-container.beds-mode {
    /* Removed green background for cleaner appearance */
}

.canvas-container.beds-mode[data-drawing-plant] {
    cursor: crosshair !important;
}

.canvas-container.pots-mode {
    background: #fff7ed; /* Light orange background for pots */
}

.canvas-container.pots-mode::after {
    content: "🪴 Pot allocation mode - Click on containers to assign plants";
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(234, 88, 12, 0.9);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    z-index: 200;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.unified-canvas-wrapper {
    transition: all 0.3s ease-in-out;
    position: relative;
}

.unified-canvas-wrapper.loading {
    opacity: 0.6;
    pointer-events: none;
}

.unified-canvas-wrapper.loading::after {
    content: "Switching modes...";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(59, 130, 246, 0.95);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: pulse 1.5s ease-in-out infinite;
}

.unified-canvas-wrapper.mode-switching {
    transition: transform 0.2s ease-in-out;
}

.canvas-container.mode-beds {
    /* REMOVED: Background removed so canvas-area is the true background */
    background: transparent;
}

.beds-canvas-content {
    width: 100%;
    height: 100%;
}

.pots-canvas-content {
    width: 100%;
    height: 100%;
    overflow: visible;
    position: relative;
}

.pot-item-wrapper {
    transition: all 0.2s ease;
    cursor: grab;
}

.pot-item-wrapper:hover {
    transform: scale(1.02);
    z-index: 10;
}

/* Pot repositioning drag styles */
.pot-item-wrapper.pot-dragging-reposition {
    transform: scale(1.05);
    z-index: 1000;
    transition: none;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    cursor: grabbing;
}

.pot-item-wrapper.pot-dragging-reposition .pot-component {
    opacity: 0.9;
}

.pots-canvas-container {
    min-height: 600px;
    background: transparent;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

.mode-canvas-wrapper {
    transition: all 0.3s ease-in-out;
}

.mode-canvas-wrapper.loading {
    opacity: 0.6;
    pointer-events: none;
}

.mode-canvas-wrapper.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-surface-alt);
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 1000;
}

/* Layout: timeline then canvas fills the rest of the viewport (header removed) */
/* Ensure the timeline row (in base.html/plot_designer.html structure) isn't fighting layout */
.plot-page-grid {
  /* Subtract the top nav bar (h-16 = 4rem) + safe-area-top (notch/status bar padding on nav) */
  height: calc(100dvh - 4rem - var(--safe-area-top, 0px));
  display: grid;
  /* Rows: Timeline (auto), Canvas (1fr - fills rest) */
  grid-template-rows: auto 1fr;
  overflow: hidden;
}

/* Quick Sketch mode: no timeline row, canvas fills all remaining space */
.plot-page-grid--no-timeline {
  /* Rows: Canvas (1fr - fills rest) */
  grid-template-rows: 1fr;
}

/* View mode: no header, no timeline */
.plot-page-grid--view-mode {
  grid-template-rows: 1fr;  /* Canvas only */
}

/* Let the canvas row shrink; prevent children from forcing extra height */
.plot-page-grid > .plot-canvas-wrap {
  min-height: 0;
  min-width: 0; /* Critical: Prevent width propagation */
  overflow: hidden;                  /* keep overlays inside */
  contain: layout; /* Isolate canvas layout from timeline */
}

.timeline-toggle-handle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  background: var(--color-surface-tint);
  color: var(--color-content-primary);
  border: 1px solid var(--color-surface-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
  z-index: 40;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
  pointer-events: auto;
}

.timeline-toggle-handle.is-collapsed {
  width: 1.5rem;
  height: 1.5rem;
}

.timeline-toggle-handle.is-expanded {
  width: 1.5rem;
  height: 1.5rem;
}

.timeline-toggle-handle:hover {
  background: var(--color-surface-tint);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}

.timeline-toggle-handle:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.35);
  outline-offset: 2px;
}

.timeline-toggle-handle svg {
  pointer-events: none;
}

.timeline-toggle-handle.is-expanded {
  top: 0;
  transform: translate(-50%, -50%);
}

.timeline-toggle-handle.is-collapsed {
  top: 0;
  transform: translate(-50%, -50%);
}

/* Mobile: smaller toggle button */
@media (max-width: 640px) {
  .timeline-toggle-handle.is-collapsed,
  .timeline-toggle-handle.is-expanded {
    width: 1.5rem;  /* 24px - better size on mobile */
    height: 1.5rem;
    min-width: 1.5rem;  /* override global 44px min-width */
    min-height: 1.5rem;  /* override global 44px min-height */
  }
}

/* Canvas interaction styles for drawing and panning modes */
.plot-canvas {
    touch-action: none !important;
}
.plot-canvas g[tabindex]:focus {
    outline: none;
}
.plot-canvas.cursor-draw {
    cursor: crosshair;
}
.plot-canvas.cursor-pan  {
    cursor: grab;
}
.plot-canvas.cursor-panning {
    cursor: grabbing;
}

/* Fill the canvas row */
#plot-designer-shell { height: 100%; }
#plot-designer-shell > svg { width: 100%; height: 100%; display: block; }

/* Smooth zooming for the world group */
\n/* Smooth zooming transition */
#world.zooming {
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: 0 0;
}

/* Drawing mode cursor hint */
.pd-draw-cursor {
    cursor: crosshair !important;
}

.pd-draw-cursor * {
    cursor: crosshair !important;
}

/* Make ghost placements non-interactive when drawing mode is active */
/* This allows clicking through ghosts to place new plants */
.pd-draw-cursor .placement--ghost,
.pd-draw-cursor [data-ghost="1"] {
    pointer-events: none !important;
}

/* Prevent browser panning/zoom gestures from stealing pointer streams */
#plot, #plot svg, #plot-designer-shell, #plot-designer-shell svg {
    touch-action: none;
}

/* Alpine.js x-cloak directive */
[x-cloak] { display: none !important; }

/* Pot Toolbar Styles */
.pd-card {
    background: var(--color-surface-tint);
    border: 1px solid var(--color-surface-border);
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    min-width: 350px;
    max-width: 400px;
}

/* Desktop zoom controls - vertical layout */
.canvas-navigation-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.zoom-controls {
    display: flex;
    flex-direction: column;
    padding: 8px;
    align-items: center;
}

/* Desktop: make dividers horizontal in vertical layout */
.zoom-controls .w-px {
    width: 100% !important;
    height: 1px !important;
}

/* Mobile: make pot toolbar more compact and position at top-right */
@media (max-width: 768px) {
    /* Zoom controls: horizontal, top-right corner */
    .canvas-navigation-controls {
        position: fixed !important;
        top: 12px !important;
        right: 12px !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        z-index: 100 !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 0 !important;
        width: auto !important;
    }
    
    /* Hide everything except zoom controls on mobile */
    .canvas-navigation-controls > *:not(.zoom-controls) {
        display: none !important;
    }
    
    .zoom-controls {
        display: flex !important;
        flex-direction: row !important;
        padding: 4px !important;
        align-items: center !important;
        width: auto !important;
    }
    
    /* Hide grid settings and dividers on mobile for compact view */
    .zoom-controls [x-data*="gridSettingsMenu"]:not(.mobile-settings),
    .zoom-controls > div.border-t:last-child,
    .zoom-controls > .w-px:not(.mobile-settings .w-px) {
        display: none !important;
    }

    /* Show mobile settings button */
    .zoom-controls .mobile-settings {
        display: flex !important;
    }

    .zoom-controls .mobile-settings .w-px {
        display: block !important;
    }
    
    /* Make zoom buttons touch-friendly */
    .zoom-controls button {
        width: 44px !important;
        height: 44px !important;
        flex-shrink: 0 !important;
    }
    
    .zoom-controls svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    /* Make zoom percentage display readable */
    .zoom-controls > div:not([x-data]):not(.w-px) {
        min-width: 50px !important;
        font-size: 12px !important;
        padding: 4px 6px !important;
        flex-shrink: 0 !important;
    }
    
    /* Grid settings menu - center on mobile */
    [role="menu"][id*="grid-menu"] {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: calc(100vw - 32px) !important;
        max-height: calc(100vh - 100px) !important;
        overflow-y: auto !important;
    }
    
    .pd-card {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        max-width: calc(100% - 80px) !important; /* Leave space for chat widget */
        min-width: auto !important;
        margin: 0 auto !important;
        border-radius: 12px 12px 0 0 !important;
        max-height: 30vh;
        height: auto !important;
        overflow-y: auto;
        z-index: 1600 !important; /* Above chat widget */
    }
    
    .pd-card__header {
        padding: 8px 12px 6px 12px !important;
    }
    
    .pd-card__header .flex-1 {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }
    
    .pd-card .pd-thumb {
        width: 32px !important;
        height: 32px !important;
    }
    
    .pd-card .pd-title {
        font-size: 14px !important;
        margin: 0 !important;
    }
    
    .pd-card .pd-subtitle {
        font-size: 11px !important;
        margin: 0 !important;
    }
    
    .pd-card .pd-help {
        font-size: 11px !important;
        margin: 0 !important;
    }
    
    .pd-card .space-y-4 {
        gap: 0.5rem !important;
    }
    
    .pd-card .px-4 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    .pd-card .pb-5 {
        padding-bottom: 6px !important;
    }
    
    .pd-card .py-2 {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
    
    .pd-card .p-4 {
        padding: 6px !important;
    }
}

.pd-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px 16px 12px 16px;
    border-bottom: 1px solid var(--color-surface-alt);
}

.pd-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-content-primary);
    margin: 0;
    line-height: 1.25;
}

.pd-subtitle {
    font-size: 13px;
    color: var(--color-content-muted);
    margin: 4px 0 0 0;
    line-height: 1.4;
}

.pd-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-surface-border);
    border-radius: 6px;
    background: var(--color-surface-tint);
    color: var(--color-content-muted);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pd-icon-btn:hover {
    background: var(--color-surface);
    color: var(--color-content-secondary);
}

.pd-row {
    display: flex;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-surface-alt);
}

.pd-stat {
    flex: 1;
    text-align: center;
}

.pd-stat__value {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-content-primary);
    line-height: 1.2;
}

.pd-stat__label {
    font-size: 11px;
    color: var(--color-content-muted);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin-top: 2px;
}

.pd-sections {
    max-height: 300px;
    overflow-y: auto;
}

.pd-section {
    border-bottom: 1px solid var(--color-surface-alt);
}

.pd-section:last-child {
    border-bottom: none;
}

.pd-section__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 8px 16px;
}

.pd-section__body {
    padding: 0 16px 12px 16px;
}

.pd-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 4px;
    text-transform: capitalize;
}

.pd-chip--ok {
    background: #dcfce7;
    color: var(--color-success);
}

.pd-chip--muted {
    background: var(--color-surface-alt);
    color: var(--color-content-muted);
}

.pd-thumb {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: var(--color-surface-alt);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-content-muted);
    flex-shrink: 0;
}

.pd-btn {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 4px;
    border: 1px solid;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.pd-btn--primary {
    background: #2563eb;
    border-color: var(--color-link);
    color: white;
}

.pd-btn--primary:hover {
    background: #1d4ed8;
    border-color: var(--color-info);
}

.pd-btn--ghost {
    background: var(--color-surface-tint);
    border-color: var(--color-surface-border);
    color: var(--color-content-secondary);
}

.pd-btn--ghost:hover {
    background: var(--color-surface);
    border-color: var(--color-content-faint);
}

.pd-btn--danger {
    background: white;
    border-color: #fca5a5;
    color: var(--color-danger);
}

.pd-btn--danger:hover {
    background: #fef2f2;
    border-color: #f87171;
}

/* Hard hide for the floating manipulation panel when aria-hidden is true */
.manipulation-controls[aria-hidden="true"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Visual cues for pot planting UX improvements */
.pots-plant-pending g[data-kind="pot"] {
  cursor: copy;
}

.pots-plant-pending g[data-kind="pot"] path,
.pots-plant-pending g[data-kind="pot"] rect,
.pots-plant-pending g[data-kind="pot"] ellipse {
  stroke: #16a34a !important;
  stroke-width: 0.4 !important;
  stroke-dasharray: 1.2 0.6;
}

/* --- Scenic Backdrops (edit mode) --- */
.pd-ghost-rect { fill: rgba(59,130,246,.08); stroke: rgba(59,130,246,.8); stroke-dasharray: 4 3; }

/* Backdrop handles are now dynamically created like textures - no CSS needed */

/* Backdrops inert unless edit mode is active */
#plot-designer-shell .backdrops-layer { pointer-events: all; }

/* Fade/Hide pots during edit */
#plot-designer-shell .pots-layer { transition: opacity .2s ease; }
#plot-designer-shell.edit-hide-pots .pots-layer,
#plot-designer-shell.edit-hide-pots #pots { opacity: 0; pointer-events: none; }
#plot-designer-shell.edit-fade-pots .pots-layer,
#plot-designer-shell.edit-fade-pots #pots { opacity: .25; pointer-events: none; }

/* Background never intercepts */
#plot-designer-shell svg #background rect { pointer-events: none; }

/* Decor layers (textures & fixtures) are clickable by default */
.textures-layer,
.fixtures-layer { pointer-events: auto; }

/* When a new texture/fixture is armed for placement, let clicks pass through
   existing decor so drawing happens on the canvas/bed instead of toggling
   selection on existing items. */
svg.decor-armed .textures-layer,
svg.decor-armed .fixtures-layer {
  pointer-events: none;
}

/* ==========================================================================
   LAYOUT MODE GATING - Only beds interactive in Layout (Beds) mode
   ========================================================================== */

/* When editing bed layout, decor & placements are inert */
svg.layout-edit-active .textures-layer,
svg.layout-edit-active .fixtures-layer,
svg.layout-edit-active .backdrops-layer,
svg.layout-edit-active #placements {
  pointer-events: none;
}

/* Beds remain interactive during layout editing */
svg.layout-edit-active #beds {
  pointer-events: all;
}

/* Bed overflow badge styling */
g[data-kind="bed"] .overflow-badge {
  fill: #b45309;
  font-size: 12px;
  pointer-events: none;
  opacity: 0.9;
}

g[data-kind="bed"].has-overflow rect {
  /* Optional subtle hint */
  filter: drop-shadow(0 0 2px rgba(180, 83, 9, 0.25));
}

/* Decor selection styling */
g[data-kind="texture"].is-selected :is(rect, ellipse),
g[data-kind="fixture"].is-selected :is(rect, path, ellipse) {
  stroke: #2563eb;
  stroke-width: 0.6;
  stroke-dasharray: 3 2;
}

/* Optional: crosshair cursor when armed for draw */
svg.decor-edit-active.cursor-crosshair { cursor: crosshair; }

/* Decor tabs */
.pd-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-surface-border);
  margin-bottom: 8px;
}

.pd-tab {
  padding: 6px 12px;
  font-size: 12px;
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}

.pd-tab:hover {
  background: var(--color-surface-alt);
}

.pd-tab.active {
  border-bottom-color: #8b5cf6;
  color: #8b5cf6;
  font-weight: 500;
}

.pd-tab-content {
  min-height: 200px;
}

.pd-scene-actions {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  justify-content: center;
}

/* Floating Scenes palette (dockable) */
.pd-floating-panel {
  position: absolute;
  top: 72px; /* sit below your top chrome; adjust if your chrome is taller */
  left: 12px;  /* default: dock LEFT */
  width: 320px;
  max-height: 70vh;
  overflow: auto;
  background: var(--color-surface-tint);
  border: 1px solid var(--color-surface-border);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  padding: 10px;
  z-index: 50; /* above other toolbars but below modals if any */
}

.pd-floating-panel.dock-right {
  left: auto; right: 12px;
}

/* Compact header */
.pd-panel-header { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; margin-bottom:8px; }
.pd-panel-actions { display:flex; align-items:center; gap:6px; }
.pd-panel-empty { font-size: 12px; color: var(--color-content-muted); padding: 8px; }

.pd-scenes-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.pd-scene-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 8px; border: 1px solid var(--color-surface-border); border-radius: 6px;
  background: var(--color-surface-alt); cursor: pointer;
}
.pd-scene-card img { width: 100%; height: 80px; object-fit: cover; border-radius: 4px; }
.pd-scene-title { font-size: 12px; text-align: center; color: var(--color-content-primary); }

/* ==========================================================================
   Permanent Plant Marker Styling
   ========================================================================== */

/* Permanent plant indicator styling */
.occupancy-permanent-indicator {
  animation: fadeIn 0.3s ease-in-out;
}

.occupancy-permanent-indicator circle {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
  transition: all 0.2s ease-in-out;
}

.occupancy-permanent-indicator path {
  transition: all 0.2s ease-in-out;
}

/* Enhanced visibility on hover for pots containing permanent plants */
.g[data-kind="pot"]:hover .occupancy-permanent-indicator circle {
  filter: drop-shadow(0 2px 4px rgba(16, 185, 129, 0.3));
  transform: scale(1.1);
}

.g[data-kind="pot"]:hover .occupancy-permanent-indicator path {
  transform: scale(1.05);
}

/* Permanent plant marker border enhancement */
/* Green border for permanent plants with images */
.g[data-layer="plant-markers"] circle[stroke="#10b981"] {
  filter: drop-shadow(0 1px 3px rgba(16, 185, 129, 0.2));
  transition: all 0.2s ease-in-out;
}

/* Subtle pulse animation for permanent-only pots */
.occupancy-permanent-indicator[opacity="1"] {
  animation: permanentPulse 3s ease-in-out infinite;
}

@keyframes permanentPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

/* Enhanced permanent marker fallback styling */
/* When permanent plants don't have images and use colored circles */
.g[data-layer="plant-markers"] circle[fill-opacity="0.95"] {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

/* Text styling for permanent plant markers */
.g[data-layer="plant-markers"] text[font-weight="700"][fill^="#"] {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Tools Toolbar - Photoshop-style tool panel
   ========================================================================== */

/* Base toolbar styles */
.tools-toolbar {
  --toolbar-bg: var(--color-surface-tint);
  --toolbar-border: var(--color-surface-border);
  --toolbar-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  --btn-size: 44px;
  --btn-hover-bg: var(--color-surface-alt);
  --btn-active-bg: #dcfce7;
  --btn-active-border: #22c55e;
  --icon-size: 20px;
  --transition-duration: 200ms;
  z-index: 30;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .tools-toolbar,
  .tools-toolbar * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Desktop: Vertical toolbar on left */
.tools-toolbar--desktop {
  display: flex;
  position: absolute;
  top: 20px;
  left: 20px;
  flex-direction: column;
  background: var(--toolbar-bg);
  border: 1px solid var(--toolbar-border);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 8px;
}

.tools-toolbar--desktop .tools-toolbar__inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease,
              margin 0.3s ease;
}

/* Desktop toolbar header */
.tools-toolbar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--color-surface-border);
  min-height: 28px;
}

.tools-toolbar__header-text {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-content-faint);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Collapse toggle button */
.tools-toolbar__collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-content-faint);
  transition: color 0.2s ease;
}

.tools-toolbar__collapse-btn:hover {
  color: var(--color-content-muted);
}

.tools-toolbar__collapse-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Arrow points up by default (collapse), rotates to point down when collapsed (expand) */
.tools-toolbar__collapse-icon.is-collapsed {
  transform: rotate(180deg);
}

/* Desktop toolbar buttons - larger with labels */
.tools-toolbar--desktop .tools-toolbar__btn {
  width: auto;
  height: auto;
  padding: 10px 14px;
  gap: 10px;
  border-radius: 10px;
  justify-content: flex-start;
}

.tools-toolbar--desktop .tools-toolbar__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* Desktop toolbar labels */
.tools-toolbar__label {
  display: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-content-secondary);
  white-space: nowrap;
}

.tools-toolbar--desktop .tools-toolbar__label {
  display: block;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.2s ease;
}

.tools-toolbar--desktop .tools-toolbar__btn:hover .tools-toolbar__label {
  color: var(--color-content-primary);
}

.tools-toolbar--desktop .tools-toolbar__btn.is-active .tools-toolbar__label {
  color: var(--color-success);
}

/* Desktop collapsed state - hide all tools, keep only Add header */
.tools-toolbar--desktop.is-collapsed .tools-toolbar__header {
  border-bottom: none;
  margin-bottom: 0;
}

.tools-toolbar--desktop.is-collapsed .tools-toolbar__inner {
  height: 0;
  opacity: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* Desktop toolbar entrance animation */
.tools-toolbar--desktop {
  animation: toolbarSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

/* Desktop button stagger animation */
.tools-toolbar--desktop .tools-toolbar__btn {
  animation: buttonFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-fill-mode: both;
}

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

/* Smooth transitions for collapse/expand */
.tools-toolbar--desktop,
.tools-toolbar--desktop .tools-toolbar__btn,
.tools-toolbar--desktop .tools-toolbar__label,
.tools-toolbar--desktop .tools-toolbar__icon {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile: FAB style bottom right with speed dial */
.tools-toolbar--mobile {
  position: fixed;
  bottom: calc(20px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
  right: 16px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* When expanded, FAB must sit above zoom controls (z-index: 100) */
.tools-toolbar--mobile:has(.is-expanded) {
  z-index: 110;
}

/* Visibility handled by parent wrapper Tailwind classes (hidden md:flex / md:hidden) */

/* Backdrop overlay */
.tools-toolbar__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: -1;
}

/* Speed dial menu */
.tools-toolbar__speeddial {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
  align-items: flex-end;
  max-height: calc(100dvh - 200px);
}

/* Speed dial buttons */
.tools-toolbar__speeddial-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--toolbar-bg);
  border: 1px solid var(--toolbar-border);
  border-radius: 28px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  min-height: 56px;
  /* Staggered animation */
  animation: speedDialItemIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--stagger-delay, 0ms);
  opacity: 0;
  transform: translateY(20px) scale(0.9);
}

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

.tools-toolbar__speeddial-btn:hover,
.tools-toolbar__speeddial-btn:active {
  background: var(--color-surface);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.tools-toolbar__speeddial-btn.is-active {
  background: #dcfce7;
  border-color: #22c55e;
}

/* Speed dial icon */
.tools-toolbar__speeddial-icon {
  display: block;
  width: 28px;
  height: 28px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

/* Speed dial icon backgrounds - same as toolbar icons */
.tools-toolbar__speeddial-icon[data-tool="plants"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b8c5a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22V12'/%3E%3Cpath d='M12 12s0-4-4-7c-4-3-6-1-6-1s0 4 4 7c2.5 1.5 6 1 6 1z'/%3E%3Cpath d='M12 12s0-5 4-8c4-3 6-1 6-1s0 4-4 7c-2.5 1.5-6 2-6 2z'/%3E%3C/svg%3E");
}

.tools-toolbar__speeddial-icon[data-tool="beds"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b7355' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3C/svg%3E");
}

.tools-toolbar__speeddial-icon[data-tool="fixtures"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c6992' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22V2'/%3E%3Cpath d='M4 2c3 0 5 2 9 2s7-2 7-2v10c-3 0-5 2-9 2s-7-2-7-2'/%3E%3C/svg%3E");
}

.tools-toolbar__speeddial-icon[data-tool="textures"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b07d56' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='1'/%3E%3Cpath d='M7 3L3 7'/%3E%3Cpath d='M12 3L3 12'/%3E%3Cpath d='M17 3L3 17'/%3E%3Cpath d='M21 4L4 21'/%3E%3Cpath d='M21 9L9 21'/%3E%3Cpath d='M21 14L14 21'/%3E%3Cpath d='M21 19L19 21'/%3E%3C/svg%3E");
}

.tools-toolbar__speeddial-icon[data-tool="labels"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2H2v10l9.29 9.29a1 1 0 001.42 0l8.58-8.58a1 1 0 000-1.42L12 2z'/%3E%3Ccircle cx='7' cy='7' r='2'/%3E%3C/svg%3E");
}

.tools-toolbar__speeddial-icon[data-tool="paths"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236366F1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l4-4 4 4 4-4 4 4'/%3E%3Ccircle cx='3' cy='17' r='1.5'/%3E%3Ccircle cx='21' cy='17' r='1.5'/%3E%3C/svg%3E");
}

.tools-toolbar__speeddial-icon[data-tool="walls"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B7355' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20V8l4-4h10l4 4v12'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M7 8v12'/%3E%3Cpath d='M12 4v8'/%3E%3Cpath d='M17 8v12'/%3E%3C/svg%3E");
}

.tools-toolbar__speeddial-icon[data-tool="backdrops"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23607d8b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8' cy='8' r='2'/%3E%3Cpath d='M21 15l-5-5-11 11'/%3E%3C/svg%3E");
}

.tools-toolbar__speeddial-icon[data-tool="pots"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2703a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14'/%3E%3Cpath d='M6 8l1 12a2 2 0 002 2h6a2 2 0 002-2l1-12'/%3E%3Cpath d='M4 4h16v4H4z'/%3E%3C/svg%3E");
}

.tools-toolbar__speeddial-icon[data-tool="satellite"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a90a4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 000 20'/%3E%3Cpath d='M12 2a14.5 14.5 0 010 20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E");
}

/* Speed dial label */
.tools-toolbar__speeddial-label {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-content-secondary);
  white-space: nowrap;
}

/* Tool buttons */
.tools-toolbar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-size);
  height: var(--btn-size);
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: background var(--transition-duration) ease, box-shadow var(--transition-duration) ease;
  position: relative;
}

.tools-toolbar__btn:hover {
  background: var(--btn-hover-bg);
}

.tools-toolbar__btn:active {
  opacity: 0.9;
}

.tools-toolbar__btn.is-active {
  background: var(--btn-active-bg);
  box-shadow: inset 0 0 0 2px var(--btn-active-border);
}

.tools-toolbar__btn:focus-visible {
  outline: 2px solid #22c55e;
  outline-offset: 2px;
}

/* Tool icons - CSS-based for cross-browser compatibility */
.tools-toolbar__icon {
  display: block;
  width: var(--icon-size);
  height: var(--icon-size);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform var(--transition-duration) ease, opacity var(--transition-duration) ease;
  opacity: 0.85;
}

.tools-toolbar__btn:hover .tools-toolbar__icon {
  opacity: 1;
}

.tools-toolbar__btn.is-active .tools-toolbar__icon {
  opacity: 1;
}

/* Plants icon: seedling - muted green */
.tools-toolbar__icon[data-tool="plants"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b8c5a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22V12'/%3E%3Cpath d='M12 12s0-4-4-7c-4-3-6-1-6-1s0 4 4 7c2.5 1.5 6 1 6 1z'/%3E%3Cpath d='M12 12s0-5 4-8c4-3 6-1 6-1s0 4-4 7c-2.5 1.5-6 2-6 2z'/%3E%3C/svg%3E");
}

/* Beds icon: simple rectangle - muted brown/earth */
.tools-toolbar__icon[data-tool="beds"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b7355' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3C/svg%3E");
}

/* Fixtures icon: flag/marker - muted purple */
.tools-toolbar__icon[data-tool="fixtures"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c6992' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22V2'/%3E%3Cpath d='M4 2c3 0 5 2 9 2s7-2 7-2v10c-3 0-5 2-9 2s-7-2-7-2'/%3E%3C/svg%3E");
}

/* Textures icon: hatched square - muted orange/terracotta */
.tools-toolbar__icon[data-tool="textures"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b07d56' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='1'/%3E%3Cpath d='M7 3L3 7'/%3E%3Cpath d='M12 3L3 12'/%3E%3Cpath d='M17 3L3 17'/%3E%3Cpath d='M21 4L4 21'/%3E%3Cpath d='M21 9L9 21'/%3E%3Cpath d='M21 14L14 21'/%3E%3Cpath d='M21 19L19 21'/%3E%3C/svg%3E");
}

/* Labels icon: tag - muted gray */
.tools-toolbar__icon[data-tool="labels"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2H2v10l9.29 9.29a1 1 0 001.42 0l8.58-8.58a1 1 0 000-1.42L12 2z'/%3E%3Ccircle cx='7' cy='7' r='2'/%3E%3C/svg%3E");
}

/* Paths icon: polyline path - muted indigo */
.tools-toolbar__icon[data-tool="paths"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236366F1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l4-4 4 4 4-4 4 4'/%3E%3Ccircle cx='3' cy='17' r='1.5'/%3E%3Ccircle cx='21' cy='17' r='1.5'/%3E%3C/svg%3E");
}

/* Walls icon: brick wall - muted brown */
.tools-toolbar__icon[data-tool="walls"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B7355' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20V8l4-4h10l4 4v12'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M7 8v12'/%3E%3Cpath d='M12 4v8'/%3E%3Cpath d='M17 8v12'/%3E%3C/svg%3E");
}

/* Backdrops icon: landscape with sun - muted blue/slate */
.tools-toolbar__icon[data-tool="backdrops"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23607d8b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8' cy='8' r='2'/%3E%3Cpath d='M21 15l-5-5-11 11'/%3E%3C/svg%3E");
}

/* Pots icon: terracotta pot shape - warm terracotta */
.tools-toolbar__icon[data-tool="pots"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2703a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14'/%3E%3Cpath d='M6 8l1 12a2 2 0 002 2h6a2 2 0 002-2l1-12'/%3E%3Cpath d='M4 4h16v4H4z'/%3E%3C/svg%3E");
}

/* Satellite icon: globe - teal/blue */
.tools-toolbar__icon[data-tool="satellite"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a90a4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 000 20'/%3E%3Cpath d='M12 2a14.5 14.5 0 010 20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E");
}

/* Separator between primary and secondary tools */
.tools-toolbar__separator {
  height: 1px;
  background: var(--surface-border, #e5e0db);
  margin: 6px 8px;
}

.tools-toolbar__speeddial-separator {
  height: 1px;
  background: var(--surface-border, #e5e0db);
  margin: 4px 0;
}

/* Onboarding hints below toolbar buttons */
.tools-toolbar__onboarding {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: 10px;
  color: var(--text-secondary, #5c5249);
  text-align: left;
  padding: 6px 8px;
  line-height: 1.3;
  background: var(--surface-tint, #f5f0eb);
  border-radius: 6px;
  margin-top: 6px;
}

.tools-toolbar__onboarding-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text-muted, #8c7e74);
  margin-top: 1px;
}

.tools-toolbar__onboarding-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tools-toolbar__hint {
  display: block;
  font-size: 10px;
  color: var(--text-secondary, #5c5249);
  text-align: center;
  padding: 3px 6px;
  margin: 2px 0;
  line-height: 1.3;
  background: var(--surface-tint, #f5f0eb);
  border-radius: 4px;
}

.tools-toolbar__speeddial-hint {
  display: block;
  font-size: 10px;
  color: var(--text-muted, #8c7e74);
  padding: 0 0 2px;
  line-height: 1.3;
}

.tools-toolbar__speeddial-onboarding {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: 11px;
  color: var(--text-secondary, #5c5249);
  text-align: left;
  padding: 6px 10px;
  line-height: 1.3;
  background: var(--surface-tint, #f5f0eb);
  border-radius: 8px;
  margin-bottom: 6px;
}

/* Collapse button (mobile) */
.tools-toolbar__btn--collapse {
  width: 32px;
  height: 32px;
  margin-left: 4px;
  color: var(--color-content-muted);
}

.tools-toolbar__btn--collapse:hover {
  color: var(--color-content-secondary);
  background: #fee2e2;
}

/* FAB (mobile) */
.tools-toolbar__fab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: white;
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
  cursor: pointer;
  transition: all var(--transition-duration) cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.tools-toolbar__fab:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(34, 197, 94, 0.5);
}

.tools-toolbar__fab:active {
  transform: scale(0.95);
}

.tools-toolbar__fab.is-expanded {
  background: linear-gradient(135deg, #6b5d52 0%, #5c4f44 100%);
  box-shadow: 0 4px 12px rgba(107, 114, 128, 0.4);
}

/* FAB icons */
.tools-toolbar__fab-icon {
  width: 28px;
  height: 28px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
}

.tools-toolbar__fab-icon.is-hidden {
  opacity: 0;
  transform: rotate(135deg) scale(0.5);
}

.tools-toolbar__fab-icon:not(.is-hidden) {
  opacity: 1;
  transform: rotate(0) scale(1);
}

/* FAB pulse animation on first load */
.tools-toolbar__fab {
  animation: fabPulse 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fabPulse {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Mode transition animation */
.tools-toolbar.is-transitioning .tools-toolbar__inner {
  opacity: 0.5;
  pointer-events: none;
}

.tools-toolbar.is-transitioning .tools-toolbar__btn {
  animation: toolFadeSwitch 300ms ease-out;
}

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

/* ==========================================================================
   Beds Flyout - Drag-to-create bed shapes
   ========================================================================== */

/* Button wrapper for flyout positioning */
.tools-toolbar__btn-wrapper {
  position: relative;
}

/* Desktop Flyout */
.beds-flyout--desktop {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-surface-tint);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--color-surface-border);
  padding: 12px;
  min-width: 180px;
  z-index: 50;
}

/* Mobile Flyout - standalone (deprecated, kept for reference) */
.beds-flyout--mobile {
  position: absolute;
  bottom: calc(100% + 16px);
  right: 0;
  background: var(--color-surface-tint);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--color-surface-border);
  padding: 16px;
  min-width: 200px;
  z-index: 50;
}

/* Mobile Flyout - inline with speed dial */
.beds-flyout--mobile-inline {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-surface-tint);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--color-surface-border);
  padding: 8px;
  z-index: 50;
}

.beds-flyout__shapes--inline {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.beds-flyout__shape--compact {
  padding: 8px 12px;
}

.beds-flyout__shape--compact .beds-flyout__shape-preview {
  width: 36px;
  height: 24px;
}

.beds-flyout__shape--compact .beds-flyout__shape-preview--circle {
  width: 32px;
  height: 32px;
}

.beds-flyout__shape--compact .beds-flyout__shape-preview--polygon {
  width: 32px;
  height: 32px;
}

.beds-flyout__shape--compact .beds-flyout__shape-label {
  font-size: 10px;
}

/* Mobile Beds Flyout - Full-width bottom bar */
.beds-flyout-bar {
  display: none;
}

@media (max-width: 767px) {
  .tools-toolbar--mobile.is-flyout-bar-mode {
    bottom: 0;
    right: 0;
    left: 0;
    align-items: stretch;
  }

  .beds-flyout-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-surface-tint);
    border-top: 1px solid var(--color-surface-border);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
    padding: 12px 16px calc(12px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
    z-index: 110;
  }

  .beds-flyout--mobile-inline {
    display: none !important;
  }
}

.beds-flyout-bar__shapes {
  display: flex;
  gap: 12px;
  flex: 1;
  justify-content: center;
}

.beds-flyout-bar__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  background: var(--color-surface-alt);
  color: var(--color-content-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
  margin-left: auto;
}

.beds-flyout-bar__shape {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 2px solid var(--color-surface-border);
  background: var(--color-surface-alt);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transition: all 0.2s ease;
}

.beds-flyout-bar__shape:active {
  cursor: grabbing;
  transform: scale(0.95);
  border-color: #8b7355;
}

.beds-flyout-bar__label {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-content-secondary);
  white-space: nowrap;
}

.beds-flyout-bar__close:active {
  background: var(--color-surface-border);
  color: var(--color-content-secondary);
}

/* Speed dial item wrapper for flyout positioning */
.tools-toolbar__speeddial-item {
  position: relative;
  display: flex;
  align-items: center;
}

/* Flyout Header */
.beds-flyout__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-surface-alt);
}

.beds-flyout__title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-content-muted);
}

.beds-flyout__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: var(--color-content-faint);
  transition: all 0.15s ease;
}

.beds-flyout__close:hover {
  background: var(--color-surface-alt);
  color: var(--color-content-secondary);
}

/* Shapes Grid */
.beds-flyout__shapes {
  display: flex;
  gap: 12px;
}

.beds-flyout__shape {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 2px solid var(--color-surface-border);
  background: var(--color-surface-alt);
  cursor: grab;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.beds-flyout__shape:hover {
  border-color: #8b7355;
  background: #fef7ed;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 115, 85, 0.2);
}

.beds-flyout__shape:active {
  cursor: grabbing;
  transform: scale(0.95);
}

/* Shape Previews */
.beds-flyout__shape-preview {
  width: 48px;
  height: 40px;
  background: #d4c4a8;
  border: 2px solid #8b7355;
  transition: all 0.2s ease;
}

.beds-flyout__shape-preview--rect {
  border-radius: 4px;
}

.beds-flyout__shape-preview--circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.beds-flyout__shape-preview--polygon {
  width: 40px;
  height: 40px;
  background: #d4c4a8;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(50% 0%, 95% 35%, 80% 95%, 20% 95%, 5% 35%);
}

.beds-flyout__shape:hover .beds-flyout__shape-preview {
  background: #c4b498;
  border-color: #6b5a45;
}

.beds-flyout__shape:hover .beds-flyout__shape-preview--polygon {
  background: #c4b498;
}

.beds-flyout__shape-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-content-secondary);
  white-space: nowrap;
}

.beds-flyout__badge {
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
  background: var(--color-accent, #5a8a5a);
  padding: 1px 4px;
  border-radius: 3px;
  white-space: nowrap;
  line-height: 1.4;
  margin-top: -4px;
}

/* Ghost Element for Dragging */
.beds-flyout__ghost {
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  opacity: 0.8;
  background: #d4c4a8;
  border: 2px dashed #8b7355;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.beds-flyout__ghost--rect {
  /* Width/height set dynamically based on zoom */
  border-radius: 4px;
}

.beds-flyout__ghost--circle {
  /* Width/height set dynamically based on zoom */
  border-radius: 50%;
}

.beds-flyout__ghost--touch,
.beds-flyout__ghost--pointer {
  transform: translate(-50%, -50%);
  animation: ghostPulse 0.3s ease-out;
}

@keyframes ghostPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
}

/* Canvas Drop Target State */
#plot-designer-shell.bed-drop-target {
  outline: 3px dashed #8b7355;
  outline-offset: -3px;
  background: rgba(139, 115, 85, 0.05);
}

#plot-designer-shell.bed-drop-target::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(139, 115, 85, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

/* Body state during drag */
body.is-dragging-bed {
  cursor: grabbing !important;
}

body.is-dragging-bed * {
  cursor: grabbing !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .beds-flyout__shape,
  .beds-flyout__ghost {
    transition: none;
    animation: none;
  }
}

/* ==========================================================================
   Tool Tray - Shared panel for fixtures, textures, backdrops
   ========================================================================== */

/* Desktop: Side panel */
.tool-tray--desktop {
  position: absolute;
  left: calc(var(--toolbar-width, 140px) + 28px);
  top: 20px;
  width: 280px;
  max-height: calc(100vh - 120px);
  background: var(--color-surface-tint);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid #e8ddd3;
  z-index: 40;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Mobile: Bottom sheet */
.tool-tray--mobile {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
}

.tool-tray__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: auto;
}

.tool-tray__sheet {
  position: relative;
  background: var(--color-surface-tint);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.2);
  min-height: 120px;
  max-height: 45vh;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  overflow: hidden;
  padding-bottom: var(--safe-area-bottom);
}

/* Drag handle for mobile sheet - compact, inline with header */
.tool-tray__handle {
  display: none;
}

.tool-tray__handle-bar {
  width: 40px;
  height: 4px;
  background: var(--color-surface-border);
  border-radius: 2px;
}

/* Header */
.tool-tray__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-surface-alt);
  flex-shrink: 0;
}

/* Mobile: very compact header with inline handle */
.tool-tray--mobile .tool-tray__header {
  padding: 4px 10px 0;
  gap: 4px;
  position: relative;
  border-bottom: none;
  min-height: auto;
}

/* Remove old pseudo-element handle - we use a real element now */
.tool-tray--mobile .tool-tray__header::before {
  display: none;
}

/* Drag handle for resizing - centered at top */
.tool-tray__drag-handle {
  display: none;
}

.tool-tray--mobile .tool-tray__drag-handle {
  display: block;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 5px;
  background: var(--color-surface-border);
  border-radius: 3px;
  cursor: grab;
  touch-action: none;
  z-index: 1;
}

.tool-tray--mobile .tool-tray__drag-handle:active {
  cursor: grabbing;
  background: #a89a8c;
}

.tool-tray--mobile .tool-tray__header {
  position: relative;
  cursor: grab;
  touch-action: none;
  padding-top: 20px; /* Space for the drag handle */
}

.tool-tray--mobile .tool-tray__header:active {
  cursor: grabbing;
}

.tool-tray__header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.tool-tray--mobile .tool-tray__title {
  font-size: 12px;
}

/* Expanded state for mobile tray */
.tool-tray--mobile.is-expanded .tool-tray__sheet {
  max-height: calc(100vh - 80px);
}

.tool-tray--mobile.is-expanded .tool-tray__content {
  overflow-y: auto;
  overflow-x: hidden;
  touch-action: pan-y;
  padding: 12px;
}

.tool-tray--mobile.is-expanded .tool-tray__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  flex-wrap: wrap;
  min-width: auto;
  gap: 12px;
  width: 100%;
}

.tool-tray--mobile.is-expanded .tool-tray__item {
  width: auto;
  min-width: 0;
}

.tool-tray--mobile.is-expanded .tool-tray__item-preview {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
}

.tool-tray--mobile .tool-tray__close {
  width: 18px;
  height: 18px;
  padding: 2px;
}

/* Mobile: content sized to fit horizontal row of items */
.tool-tray--mobile .tool-tray__content {
  flex: 1;
  padding: 0 10px 4px;
  display: flex;
  align-items: flex-start;
  touch-action: pan-x; /* Enable horizontal scrolling */
}

.tool-tray--mobile .tool-tray__sheet {
  padding-bottom: 60px;
}

/* Expand sheet height for grouped/categorized content */
.tool-tray--mobile.tool-tray--grouped-mode .tool-tray__sheet {
  max-height: 65vh;
}

.tool-tray--mobile.tool-tray--grouped-mode.is-expanded .tool-tray__sheet {
  max-height: calc(100vh - 80px);
}

.tool-tray__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-content-secondary);
}

.tool-tray__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--color-content-faint);
  transition: all 0.15s ease;
}

.tool-tray__close:hover {
  background: var(--color-surface-tint);
  color: var(--color-content-secondary);
}

/* Content area */
.tool-tray__content {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  -webkit-overflow-scrolling: touch;
}

/* Grid layout */
.tool-tray__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.tool-tray--desktop .tool-tray__grid {
  grid-template-columns: repeat(3, 1fr);
}

/* Mobile: horizontal scrolling grid */
.tool-tray--mobile .tool-tray__content {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  /* padding set in earlier rule */
}

.tool-tray--mobile .tool-tray__grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  min-width: max-content;
  align-items: flex-start;
}

.tool-tray--mobile .tool-tray__item {
  flex-shrink: 0;
  width: auto;
  padding: 2px;
  background: transparent;
  touch-action: pan-x; /* Allow horizontal scroll, long-press triggers drag */
}

.tool-tray--mobile .tool-tray__item-preview {
  width: 68px;
  height: 68px;
}

.tool-tray--mobile .tool-tray__item-label {
  font-size: 9px;
  margin-top: 2px;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Individual items */
.tool-tray__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: 10px;
  border: 2px solid transparent;
  background: var(--color-surface);
  cursor: grab;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.tool-tray__item:hover {
  border-color: var(--color-surface-border);
  background: var(--color-surface-tint);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.tool-tray__item:active {
  transform: scale(0.95);
  cursor: grabbing;
}

/* Item preview */
.tool-tray__item-preview {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: var(--color-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tool-tray__item-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.tool-tray__item-placeholder {
  font-size: 24px;
}

.tool-tray__item-label {
  font-size: 10px;
  color: var(--color-content-muted);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-tray__item-desc {
  font-size: 9px;
  color: var(--color-content-muted);
  text-align: center;
  margin-top: -2px;
}

.tool-tray__item--add {
  cursor: pointer;
  opacity: 0.7;
}

.tool-tray__item--add:hover {
  opacity: 1;
}

.tool-tray__item-preview--add {
  border: 2px dashed #c4b5a5;
  background: transparent;
}

.tool-tray__add-icon {
  font-size: 24px;
  color: var(--color-content-muted);
  line-height: 1;
}

.tool-tray__item-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 8px;
  font-weight: 600;
  color: #fff;
  background: #5b8c5a;
  border-radius: 8px;
  padding: 1px 4px;
  line-height: 1.2;
  min-width: 16px;
  text-align: center;
}

/* Empty state */
.tool-tray__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  gap: 12px;
}

.tool-tray__empty-text {
  font-size: 14px;
  color: var(--color-content-faint);
}

.tool-tray__refresh-btn {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-content-secondary);
  background: var(--color-surface-alt);
  border-radius: 8px;
  transition: all 0.15s ease;
}

.tool-tray__refresh-btn:hover {
  background: var(--color-surface-border);
  color: var(--color-content-primary);
}

/* Ghost element for dragging - canvas-like preview */
.tool-tray__ghost {
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  /* Size set dynamically via JS based on zoom */
}

/* Canvas preview: transparent bg, just the image with drop shadow */
.tool-tray__ghost--canvas-preview {
  background: transparent !important;
  border: none;
  border-radius: 0;
  padding: 0;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

.tool-tray__ghost-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  border-radius: 0;
  display: block;
}

.tool-tray__ghost--emoji {
  font-size: 36px;
  background: var(--color-surface);
  border: 2px solid var(--color-surface-border);
}

.tool-tray__ghost--touch,
.tool-tray__ghost--pointer {
  transform: translate(-50%, -50%);
  animation: trayGhostLift 0.2s ease-out;
}

@keyframes trayGhostLift {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.9;
  }
}

/* Canvas drop target state for tray items */
#plot-designer-shell.tray-drop-target {
  outline: 3px dashed #6366f1;
  outline-offset: -3px;
  background: rgba(99, 102, 241, 0.05);
}

/* Body state during tray drag */
body.is-dragging-tray-item {
  cursor: grabbing !important;
}

body.is-dragging-tray-item * {
  cursor: grabbing !important;
}

/* Reduced motion for tool tray */
@media (prefers-reduced-motion: reduce) {
  .tool-tray__item,
  .tool-tray__ghost,
  .tool-tray__sheet {
    transition: none;
    animation: none;
  }
}

/* Tool tray grouped layout (fixture categories) */
.tool-tray__grouped {
  display: flex;
  flex-direction: column;
}

.tool-tray__group {
  border-bottom: 1px solid var(--color-surface-alt, #f3f4f6);
}

.tool-tray__group:last-child {
  border-bottom: none;
}

.tool-tray__group-header {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: var(--color-surface, #fff);
  border: none;
  border-bottom: 1px solid var(--color-surface-border, #e5e7eb);
  cursor: pointer;
  text-align: left;
  transition: background-color 0.15s ease;
}

.tool-tray__group-header:hover {
  background: var(--color-surface-alt, #f9fafb);
}

.tool-tray__group-header.is-expanded {
  background: var(--color-surface-alt, #f9fafb);
}

.tool-tray__group-chevron {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  color: var(--color-content-muted, #6b7280);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.tool-tray__group-chevron.rotate-90 {
  transform: rotate(90deg);
}

.tool-tray__group-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-content-primary, #1f2937);
  flex: 1;
}

.tool-tray__group-count {
  font-size: 0.75rem;
  color: var(--color-content-muted, #6b7280);
  margin-left: 0.5rem;
}

.tool-tray__group-content {
  overflow: hidden;
  padding: 8px;
}

.tool-tray__group-content .tool-tray__grid {
  gap: 6px;
}

/* Mobile grouped layout: override horizontal scroll to vertical */
.tool-tray--mobile .tool-tray__content--grouped {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  flex-direction: column;
  align-items: stretch;
}

.tool-tray--mobile .tool-tray__content--grouped .tool-tray__grouped {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.tool-tray--mobile .tool-tray__group-content .tool-tray__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  flex-wrap: wrap;
  min-width: unset;
}

.tool-tray--mobile .tool-tray__content--grouped .tool-tray__item {
  touch-action: pan-y; /* Allow vertical scroll in grouped mode */
}

/* Mobile responsive adjustments */
@media (max-width: 767px) {
  .tools-toolbar--mobile {
    bottom: calc(20px + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
    right: 12px;
  }

  .tools-toolbar__speeddial-btn {
    padding: 10px 14px;
    min-height: 48px;
  }

  .tools-toolbar__speeddial-icon {
    width: 24px;
    height: 24px;
  }

  .tools-toolbar__speeddial-label {
    font-size: 14px;
  }
}

/* ==========================================================================
   PLANT TRAY - Plant selection for drag-and-drop placement
   ========================================================================== */

/* Desktop: Side panel */
.plant-tray--desktop {
  position: fixed;
  left: calc(var(--toolbar-width, 140px) + 28px);
  top: 20px;
  width: 260px;
  max-height: calc(100vh - 140px);
  background: var(--color-surface-tint);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Mobile: Bottom sheet */
.plant-tray--mobile {
	  position: fixed;
	  inset: 0;
	  z-index: 1200;
	  display: flex;
	  flex-direction: column;
	  justify-content: flex-end;
	  pointer-events: none;
}

.plant-tray__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: auto;
}

/* Sheet: on desktop it's a passthrough; on mobile it's the bottom sheet panel */
.plant-tray--desktop .plant-tray__sheet {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

.plant-tray--mobile .plant-tray__sheet {
  position: relative;
  background: var(--color-surface-tint);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  max-height: 45vh;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  overflow: visible;
  padding-bottom: var(--safe-area-bottom);
}

.plant-tray--mobile .plant-tray__sheet.is-expanded {
  max-height: calc(100vh - 80px);
  z-index: 10001;
}

/* Header */
.plant-tray__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-surface-border);
  flex-shrink: 0;
}

.plant-tray--mobile .plant-tray__header {
  padding: 8px 12px;
  position: relative;
  cursor: grab;
  touch-action: none;
  padding-top: 24px;
}

.plant-tray__drag-handle {
  display: none;
}

.plant-tray--mobile .plant-tray__drag-handle {
  display: block;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 4px;
  background: var(--color-surface-border);
  border-radius: 2px;
  cursor: grab;
  touch-action: none;
  /* Expand touch target with pseudo-element */
}

.plant-tray--mobile .plant-tray__drag-handle::before {
  content: '';
  position: absolute;
  top: -16px;
  left: -20px;
  right: -20px;
  bottom: -12px;
  /* Invisible expanded touch target */
}

/* Reduce touch target when expanded to avoid overlapping with tabs below */
.plant-tray__sheet.is-expanded .plant-tray__drag-handle::before {
  bottom: -4px;
}

.plant-tray__header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}

.plant-tray__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-content-secondary);
}

.plant-tray--mobile .plant-tray__title {
  font-size: 13px;
}


.plant-tray__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--color-content-faint);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.plant-tray--mobile .plant-tray__close {
  position: absolute;
  top: 0px;
  right: 8px;
  z-index: 10;
  min-height: auto;
  min-width: auto;
  height: 28px;
  width: 28px;
}

.plant-tray__close:hover {
  background: var(--color-surface-alt);
  color: var(--color-content-secondary);
}

/* Search */
.plant-tray__search {
  position: relative;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-surface-alt);
}

.plant-tray__search-input {
  width: 100%;
  padding: 8px 12px;
  padding-right: 32px;
  font-size: 13px;
  border: 1px solid var(--color-surface-border);
  border-radius: 8px;
  background: var(--color-surface);
  transition: border-color 0.15s, background 0.15s;
}

.plant-tray__search-input:focus {
  outline: none;
  border-color: var(--color-success);
  background: var(--color-surface);
}

.plant-tray__search-input--small {
  padding: 6px 10px;
  font-size: 12px;
}

.plant-tray__search--collapsed {
  padding: 6px 12px;
  border-bottom: 1px solid var(--color-surface-border);
}

.plant-tray__search-clear {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-content-faint);
  background: none;
  border: none;
  cursor: pointer;
}

/* Filter chips */
.plant-tray__filter-chips {
  display: flex;
  padding: 4px 12px;
  gap: 6px;
  flex-shrink: 0;
}

.plant-tray__filter-chip {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid var(--color-surface-border);
  background: transparent;
  color: var(--color-content-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.plant-tray__filter-chip:hover {
  background: var(--color-surface-alt);
}

.plant-tray__filter-chip.is-active {
  background: #e8f2e5;
  color: var(--color-brand);
  border-color: #d4e8d0;
}

.dark .plant-tray__filter-chip.is-active {
  background: rgba(13, 39, 20, 0.3);
  color: #86d99a;
  border-color: rgba(22, 72, 37, 0.5);
}

/* Perennial badge for catalog items */
.plant-tray__perennial-badge {
  font-size: 9px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
  background: #e0e7ff;
  color: #4338ca;
  white-space: nowrap;
}

.dark .plant-tray__perennial-badge {
  background: rgba(67, 56, 202, 0.2);
  color: #a5b4fc;
}

/* Expanded controls for mobile */
.plant-tray__expanded-controls {
  flex-shrink: 0;
}

/* Content */
.plant-tray__content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px;
  min-height: 200px; /* Prevent collapse during loading */
}

.plant-tray--mobile .plant-tray__content {
  padding: 8px;
  min-height: 120px;
}

.plant-tray--mobile.is-expanded .plant-tray__content {
  min-height: 300px;
}

/* Grid */
.plant-tray__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.plant-tray--desktop .plant-tray__grid {
  grid-template-columns: repeat(2, 1fr);
}

.plant-tray__grid--horizontal {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

.plant-tray__grid--horizontal .plant-tray__item {
  flex-shrink: 0;
  width: auto;
  max-width: 80px;
}

.plant-tray--mobile .plant-tray__grid--horizontal .plant-tray__item-label {
  max-width: 68px;
  white-space: normal;
  word-break: break-word;
}

.plant-tray--mobile .plant-tray__grid--horizontal .plant-tray__item {
  touch-action: pan-x; /* Match tool tray: allow horizontal scrolling while still enabling long-press drag */
}

.plant-tray--mobile .plant-tray__grid--horizontal .plant-tray__item {
  padding: 6px;
  align-items: flex-start;
  text-align: left;
}

/* Items */
.plant-tray__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  border-radius: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-surface-border);
  cursor: grab;
  transition: all 0.15s ease;
  touch-action: pan-y; /* Allow vertical scroll, long-press triggers drag */
  user-select: none;
}

.plant-tray--desktop .plant-tray__item {
  touch-action: none; /* Desktop uses pointer events */
}

.plant-tray__item:hover {
  border-color: var(--color-success);
  background: #ecfdf5;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dark .plant-tray__item:hover {
  background: rgba(13, 39, 20, 0.2);
}

.plant-tray__item:active {
  transform: scale(0.95);
  cursor: grabbing;
}

.plant-tray__item.is-dimmed {
  opacity: 0.6;
}

/* Placed plants are greyed out */
.plant-tray__item.is-placed {
  opacity: 0.5;
}

.plant-tray__item.is-placed:hover {
  opacity: 0.7;
}

/* Filter toggle for hide placed checkbox */
.plant-tray__filter-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  margin-bottom: 8px;
  font-size: 11px;
  color: var(--color-text-secondary);
  cursor: pointer;
  user-select: none;
}

.plant-tray__filter-toggle input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: #10b981;
  cursor: pointer;
}

/* Permanent section wrapper */
.plant-tray__permanent-section {
  display: flex;
  flex-direction: column;
}

.plant-tray__item--variety {
  padding: 6px;
  margin-left: 12px;
}

.plant-tray__item--add {
  cursor: pointer;
  border-style: dashed;
  border-color: var(--color-surface-border);
  background: transparent;
}

.plant-tray__item--add:hover {
  border-color: var(--color-success);
  background: #ecfdf5;
}

.dark .plant-tray__item--add:hover {
  background: rgba(13, 39, 20, 0.2);
}

.plant-tray__item--add:active {
  transform: scale(0.98);
  cursor: pointer;
}

.plant-tray__item-preview--add {
  background: var(--color-surface-border);
  color: var(--color-text-secondary);
  font-weight: 600;
}

.plant-tray__item--add:hover .plant-tray__item-preview--add {
  background: #10b981;
  color: white;
}

/* Item preview (image container) */
.plant-tray__item-preview {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-surface-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.plant-tray__item-preview--small {
  width: 40px;
  height: 40px;
  border-radius: 6px;
}

.plant-tray--mobile .plant-tray__grid--horizontal .plant-tray__item-preview {
  width: 56px;
  height: 56px;
}

/* ── List item rows (planned plants + search results) ── */
.plant-tray__list-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: 6px;
  cursor: grab;
  transition: background 0.15s ease;
  min-height: 44px;
  touch-action: pan-y;
}

.plant-tray--desktop .plant-tray__list-item {
  touch-action: none;
}

.plant-tray__list-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

.dark .plant-tray__list-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.plant-tray__list-item.is-placed {
  opacity: 0.5;
}

.plant-tray__list-item-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-surface-alt, #f0ede8);
}

.plant-tray__list-item-icon .plant-tray__item-image {
  width: 36px;
  height: 36px;
  object-fit: cover;
}

.plant-tray__list-item-icon .plant-tray__item-placeholder {
  width: 36px;
  height: 36px;
}

.plant-tray__list-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.plant-tray__list-item-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-content-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plant-tray__list-item-detail {
  font-size: 0.6875rem;
  color: var(--color-content-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plant-tray__item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plant-tray__item-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--color-surface-alt);
}

/* Item label */
.plant-tray__item-label {
  font-size: 10px;
  color: var(--color-content-secondary);
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

/* Item badges */
.plant-tray__item-badge {
  font-size: 9px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 10px;
  margin-top: 2px;
}

.plant-tray__item-badge--available {
  background: #d1fae5;
  color: #047857;
}

.dark .plant-tray__item-badge--available {
  background: rgba(6, 78, 59, 0.3);
  color: #6ee7b7;
}

.plant-tray__item-badge--flex {
  background: #dbeafe;
  color: var(--color-info);
}

.dark .plant-tray__item-badge--flex {
  background: rgba(30, 58, 138, 0.3);
  color: #93c5fd;
}

.plant-tray__item-badge--done {
  background: var(--color-surface-border);
  color: var(--color-content-muted);
}

.plant-tray__item-badge--over {
  background: #fee2e2;
  color: var(--color-danger);
}

.dark .plant-tray__item-badge--over {
  background: rgba(127, 29, 29, 0.3);
  color: #fca5a5;
}

.plant-tray__item-badge--permanent {
  background: #e0e7ff;
  color: #4338ca;
}

.dark .plant-tray__item-badge--permanent {
  background: rgba(67, 56, 202, 0.2);
  color: #a5b4fc;
}

.plant-tray__item-badge--in-season {
  background: #d1fae5;
  color: #047857;
}

.dark .plant-tray__item-badge--in-season {
  background: rgba(6, 78, 59, 0.3);
  color: #6ee7b7;
}

.plant-tray__item-badge--not-in-season {
  background: #fef3c7;
  color: var(--color-warning);
}

.dark .plant-tray__item-badge--not-in-season {
  background: rgba(120, 53, 15, 0.3);
  color: #fbbf24;
}

/* Item window display */
.plant-tray__item-window {
  font-size: 9px;
  color: var(--color-content-muted);
  margin-top: 2px;
  text-align: center;
}

.plant-tray__item-status {
  font-size: 10px;
  color: var(--color-content-secondary);
  margin-top: 2px;
  line-height: 1.2;
}

.plant-tray__item-status--now {
  color: #047857;
  font-weight: 600;
}

.plant-tray__item-status--later {
  color: var(--color-warning);
  font-weight: 600;
}

.plant-tray--mobile .plant-tray__grid--horizontal .plant-tray__item-label,
.plant-tray--mobile .plant-tray__grid--horizontal .plant-tray__item-window,
.plant-tray--mobile .plant-tray__grid--horizontal .plant-tray__item-status {
  text-align: left;
}

.plant-tray__item-window--tiny {
  font-size: 9px;
  color: var(--color-content-muted);
}

.plant-tray__item-window--good {
  color: #047857;
  font-weight: 600;
}

.plant-tray__item-window--bad {
  color: var(--color-danger);
  font-weight: 600;
}

.plant-tray__item--dimmed {
  opacity: 0.55;
}

/* Library type grouping */
.plant-tray__library {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0; /* Allow flex shrinking for scroll */
}

.plant-tray__library-type {
  border: 1px solid var(--color-surface-border);
  border-radius: 10px;
  overflow: hidden;
}

.plant-tray__library-type-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--color-surface);
  cursor: grab;
  transition: background 0.15s;
  touch-action: pan-y; /* Allow vertical scroll on mobile */
}

.plant-tray--desktop .plant-tray__library-type-header {
  touch-action: none;
}

.plant-tray__library-type-header:hover {
  background: #ecfdf5;
}

.dark .plant-tray__library-type-header:hover {
  background: rgba(13, 39, 20, 0.2);
}

.plant-tray__library-type-header.is-dimmed {
  opacity: 0.7;
}

.plant-tray__library-type-info {
  flex: 1;
  min-width: 0;
}

.plant-tray__library-type-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-content-secondary);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.plant-tray__library-type-badge {
  display: block;
  font-size: 10px;
  color: var(--color-content-muted);
  margin-top: 1px;
}

.plant-tray__library-type-window {
  display: block;
  font-size: 10px;
  margin-top: 2px;
  font-weight: 500;
}

.plant-tray__library-type-window--in-season {
  color: #047857;
}

.plant-tray__library-type-window--out-season {
  color: var(--color-danger);
}

.plant-tray__library-expand-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-content-faint);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
}

.plant-tray__library-expand-btn:hover {
  background: var(--color-surface-border);
  color: var(--color-content-secondary);
}

.plant-tray__library-varieties {
  padding: 8px;
  background: var(--color-surface-tint);
  border-top: 1px solid var(--color-surface-alt);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

/* Empty and loading states */
.plant-tray__empty,
.plant-tray__loading,
.plant-tray__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  gap: 8px;
}

.plant-tray__empty-text,
.plant-tray__loading-text {
  font-size: 13px;
  color: var(--color-content-faint);
}

.plant-tray__empty-hint {
  font-size: 12px;
  color: var(--color-content-muted);
  margin-top: 6px;
}

/* Welcoming empty state for new users in My Plants */
.plant-tray__empty-welcome {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
  padding: 8px 12px;
}

.plant-tray__empty-hint {
  font-size: 12px;
  color: var(--color-content-faint);
  line-height: 1.4;
}

.plant-tray__empty-hint strong {
  color: var(--color-green-500, #3A8C4B);
  font-weight: 600;
}

/* Make empty state span full grid width */
.plant-tray__grid .plant-tray__empty {
  grid-column: 1 / -1;
}

.plant-tray__library .plant-tray__empty {
  width: 100%;
}

/* Empty state in horizontal scroll layout */
.plant-tray__grid--horizontal .plant-tray__empty {
  flex: 1;
  min-width: 100%;
  padding: 16px;
}

.plant-tray__error-text {
  font-size: 13px;
  color: var(--color-danger);
}

.plant-tray__retry-btn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-content-secondary);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-surface-border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.plant-tray__retry-btn:hover {
  background: var(--color-surface-border);
}

/* Ghost element for dragging */
.plant-tray__ghost {
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%);
  animation: plantGhostLift 0.15s ease-out;
}

@keyframes plantGhostLift {
  from {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.plant-tray__ghost-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.plant-tray__ghost--emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  background: var(--color-surface);
  border: 2px solid var(--color-surface-border);
}

.plant-tray__ghost--touch {
  animation: plantGhostLift 0.2s ease-out;
}

/* Drop target styles */
.plant-drop-target {
  outline: 3px dashed #10b981 !important;
  outline-offset: -3px;
  background-color: rgba(16, 185, 129, 0.05) !important;
}

/* Seasonal plant drag: highlight beds */
.seasonal-drag-active #beds [data-bed-shape-highlight] {
  display: block !important;
  stroke: none !important;
  animation: bed-highlight-pulse 1.5s ease-in-out infinite;
}

@keyframes bed-highlight-pulse {
  0%, 100% { fill: color-mix(in srgb, var(--color-info) 15%, transparent); }
  50% { fill: color-mix(in srgb, var(--color-info) 35%, transparent); }
}

/* Body state while dragging */
body.is-dragging-plant * {
  cursor: grabbing !important;
}

/* Expanded content wrapper */
.plant-tray__expanded-content {
  max-height: calc(100vh - 280px);
  overflow-y: auto;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .plant-tray__item,
  .plant-tray__ghost,
  .plant-tray__sheet {
    transition: none;
    animation: none;
  }
}


/* Group Accordion Header */
.plant-tray__group-header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 6px 12px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--color-surface-border);
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s ease;
}

.plant-tray__group-header:hover {
    background: var(--color-surface-alt);
}

.plant-tray__group-header.is-expanded {
    background: transparent;
}

.plant-tray__group-chevron {
    width: 12px;
    height: 12px;
    margin-right: 6px;
    color: var(--color-content-muted);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.plant-tray__group-chevron.rotate-90 {
    transform: rotate(90deg);
}

.plant-tray__group-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-content-secondary);
    flex: 1;
}

.plant-tray__group-count {
    font-size: 11px;
    color: var(--color-content-muted);
    margin-left: 4px;
}

/* Groups container */
.plant-tray__groups {
    display: flex;
    flex-direction: column;
}

.plant-tray__group {
    border-bottom: 1px solid var(--color-surface-alt);
}

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

/* Group Content (collapsible) */
.plant-tray__group-content {
    overflow: hidden;
}

/* Subgroup (nested within group) */
.plant-tray__subgroup {
    border-top: 1px solid var(--color-surface-border);
}

.plant-tray__subgroup:first-child {
    border-top: none;
}

.plant-tray__subgroup-header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.375rem 0.75rem 0.375rem 1.5rem;
    background: var(--color-surface);
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s ease;
}

.plant-tray__subgroup-header:hover {
    background: var(--color-surface-alt);
}

.plant-tray__subgroup-header.is-expanded {
    background: var(--color-surface-alt);
}

.plant-tray__subgroup-chevron {
    width: 0.875rem;
    height: 0.875rem;
    margin-right: 0.375rem;
    color: var(--color-gray-400, #8b7d73);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.plant-tray__subgroup-chevron.rotate-90 {
    transform: rotate(90deg);
}

.plant-tray__subgroup-label {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--color-gray-600, #5a4e44);
    flex: 1;
}

.plant-tray__subgroup-count {
    font-size: 0.6875rem;
    color: var(--color-gray-400, #8b7d73);
    margin-left: 0.375rem;
}

.plant-tray__subgroup-content {
    overflow: hidden;
    padding-left: 0.5rem;
}

/* Mobile Group Filter Dropdown */
.plant-tray__group-filter {
    display: flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-surface-border);
    border-radius: 0.375rem;
    cursor: pointer;
    color: var(--color-content-primary);
}

.plant-tray__group-filter:hover {
    background: var(--color-surface-border);
}

.plant-tray__group-filter-wrapper {
    position: relative;
    flex-shrink: 0;
}

.plant-tray__group-filter-chevron {
    width: 0.75rem;
    height: 0.75rem;
    margin-left: 0.25rem;
}

/* Group Filter Dropdown Menu - opens upward on mobile collapsed */
.plant-tray__group-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    z-index: 50;
    min-width: 10rem;
    background: var(--color-surface-tint);
    border: 1px solid var(--color-surface-border);
    border-radius: 0.5rem;
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
    padding: 0.25rem 0;
    margin-bottom: 0.25rem;
}

.plant-tray__group-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--color-content-primary);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.plant-tray__group-dropdown-item:hover {
    background: var(--color-surface);
}

.plant-tray__group-dropdown-item.is-selected {
    background: var(--color-primary-50, #eff6ff);
    color: var(--color-primary-700, #1d4ed8);
}

.plant-tray__group-dropdown-item-count {
    font-size: 0.75rem;
    color: var(--color-gray-500, #6b5d52);
}

.plant-tray__group-dropdown-divider {
    height: 1px;
    background: var(--color-surface-border);
    margin: 0.25rem 0;
}

/* ── Plant tray section dividers ── */
.plant-tray__section-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem 0.25rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted, #8b7e6a);
}

.plant-tray__section-label--divider {
    border-top: 1px solid var(--color-surface-border, #e5e3db);
    margin-top: 0.5rem;
    padding-top: 0.75rem;
}

.plant-tray__section-label--collapsible {
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
}

.plant-tray__section-label--collapsible .plant-tray__group-chevron {
    width: 10px;
    height: 10px;
}

/* ── Plant tray status badges ── */
.plant-tray__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.375rem;
    border-radius: 9999px;
    font-size: 0.5625rem;
    font-weight: 600;
    white-space: nowrap;
}

.plant-tray__badge--unplaced {
    background: #fef3c7;
    color: var(--color-warning);
}

.dark .plant-tray__badge--unplaced {
    background: rgba(120, 53, 15, 0.3);
    color: #fbbf24;
}

.plant-tray__badge--placed {
    background: #e8f2e5;
    color: var(--color-brand);
}

.dark .plant-tray__badge--placed {
    background: rgba(13, 39, 20, 0.4);
    color: #86d99a;
}

.plant-tray__badge--left {
    background: #fef3c7;
    color: var(--color-warning);
}

.dark .plant-tray__badge--left {
    background: rgba(120, 53, 15, 0.3);
    color: #fbbf24;
}

.plant-tray__item--placed {
    opacity: 0.5;
}

/* ── Mobile placement bar ── */
.plant-tray__placement-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1002;
    animation: placementBarSlideUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-top: 2px solid var(--color-brand-700, #164825);
    background: var(--color-surface-tint, #fcfbf8);
    padding: 0.5rem 0.75rem;
    padding-bottom: calc(0.5rem + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
    touch-action: none;
    pointer-events: auto;
}

@keyframes placementBarSlideUp {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.plant-tray__placement-bar-hint {
    font-size: 0.6875rem;
    color: var(--color-content-secondary);
    text-align: center;
    letter-spacing: 0.02em;
}

.plant-tray__placement-bar-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.plant-tray__placement-bar-plant {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-surface-alt);
    border-radius: 0.5rem;
    border: 2px solid var(--color-brand-700, #164825);
    flex: 1;
    min-height: 48px;
}

.plant-tray__placement-bar-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    background: var(--color-surface, #faf8f4);
    border: 1px solid var(--color-surface-border, #e5e3db);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    animation: placementIconPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}

@keyframes placementIconPop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.plant-tray__placement-bar-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.plant-tray__placement-bar-info {
    flex: 1;
    min-width: 0;
}

.plant-tray__placement-bar-name {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--color-content-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plant-tray__placement-bar-detail {
    font-size: 0.625rem;
    color: var(--color-content-muted);
}

.plant-tray__placement-bar-cancel {
    width: 2rem;
    height: 2rem;
    background: color-mix(in srgb, var(--color-danger) 15%, var(--color-surface));
    color: var(--color-danger);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--color-danger) 30%, var(--color-surface));
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
}

/* ── Onboarding hint overlay ── */
.plant-tray__onboarding-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 0.75rem;
    padding: 0.375rem 0.875rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    pointer-events: none;
    z-index: 50;
    white-space: nowrap;
}

/* In-season indicator for search results */
.plant-tray__in-season-dot {
    color: #3A8C4B;
    font-size: 0.5rem;
    vertical-align: middle;
    margin: 0 0.15rem;
}

/* Permanent catalog add affordance */
.plant-tray__catalog-add-icon {
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-brand-500, #3A8C4B);
    font-size: 1rem;
    font-weight: 700;
}


/* ==========================================================================
   TOUCH DRAG VISUAL FEEDBACK
   ========================================================================== */

/* Touch drag visual feedback - lift effect (drop-shadow only; CSS transform on
   bed-body would override the SVG transform attribute that positions it, causing
   an offset during drag) */
.bed--dragging {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

/* ==========================================================================
   PLACEMENT QUICK ACTION ANIMATIONS
   Smooth transitions for snap and row/column operations
   ========================================================================== */

/* Base transition for placement content group (handles position/transform changes) */
g[data-kind="placement"].placement-animating > g[data-kind="placement-content"] {
    transition: transform 0.2s ease-out;
}

/* Faster transition specifically for snap operations */
g[data-kind="placement"].placement-snapping > g[data-kind="placement-content"] {
    transition: transform 0.15s ease-out;
}

/* Transition for placement body rect (handles size changes for row/col operations) */
g[data-kind="placement"].placement-animating g[data-kind="placement-body"] > rect {
    transition: width 0.2s ease-out, height 0.2s ease-out, x 0.2s ease-out, y 0.2s ease-out;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    g[data-kind="placement"].placement-animating > g[data-kind="placement-content"],
    g[data-kind="placement"].placement-snapping > g[data-kind="placement-content"],
    g[data-kind="placement"].placement-animating g[data-kind="placement-body"] > rect {
        transition: none;
    }
}

/* Shake animation for "can't do" feedback on mobile */
@keyframes placement-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

g[data-kind="placement"].placement-shake {
    animation: placement-shake 0.3s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    g[data-kind="placement"].placement-shake {
        animation: none;
        opacity: 0.7;
    }
}

/* ==========================================================================
   DRAG HINT ANIMATIONS
   ========================================================================== */

/* Horizontal bounce animation for desktop arrow */
@keyframes dragHintArrowBounce {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(6px);
  }
}

/* Subtle pulse animation for mobile finger icon */
@keyframes dragHintFingerPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

/* Drag hint container - shared styles */
.drag-hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  background-color: var(--color-surface-tint, #fcfbf8);
  border: 1px solid var(--color-surface-border, #e5e3db);
  font-size: 0.75rem;
  color: var(--color-content-secondary); /* gray-600 */
}

.drag-hint__text {
  white-space: nowrap;
}

/* Desktop arrow icon */
.drag-hint__arrow {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  animation: dragHintArrowBounce 1s ease-in-out infinite;
}

/* Mobile finger icon */
.drag-hint__finger {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  animation: dragHintFingerPulse 1.5s ease-in-out infinite;
}

/* Beds flyout drag hint positioning */
.beds-flyout__drag-hint {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-surface-border, #e5e3db);
}


/* Reduced motion support for accessibility */
@media (prefers-reduced-motion: reduce) {
  .drag-hint__arrow,
  .drag-hint__finger {
    animation: none;
  }
}

/* Resize hint glow effect for first-time users */
.resize-hint-glow {
  animation: hint-pulse 1.5s ease-in-out infinite;
}

@keyframes hint-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
  }
}

/* Accessibility: Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .resize-hint-glow {
    animation: none;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3);
  }
}

/* ==========================================================================
   EXPORT PANEL
   Dropdown panel for export/print options
   ========================================================================== */

.plot-export-panel {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 50;
    min-width: 16rem;
    max-width: 20rem;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-surface-border, #e5e3db);
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    padding: 0.75rem;
}

.plot-export-panel__options {
    display: flex;
    flex-direction: column;
}

.plot-export-panel__option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.plot-export-panel__option:hover {
    color: var(--color-primary-700, #1d4ed8);
}

.plot-export-panel__checkbox {
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    border: 1px solid var(--color-surface-border, #d1d5db);
    accent-color: var(--color-primary-600, #2563eb);
    cursor: pointer;
}

.plot-export-panel__select {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    border: 1px solid var(--color-surface-border, #d1d5db);
    border-radius: 0.375rem;
    background: var(--color-surface, #fff);
    cursor: pointer;
}

.plot-export-panel__select:focus {
    outline: none;
    border-color: var(--color-primary-500, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.plot-export-panel__error {
    margin-top: 0.75rem;
    padding: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-danger);
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 0.375rem;
}

.plot-export-panel__actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-surface-border, #e5e3db);
}

.plot-export-panel__button {
    flex: 1;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    border: 1px solid var(--color-surface-border, #d1d5db);
    border-radius: 0.375rem;
    background: var(--color-surface, #fff);
    color: var(--color-gray-700, #374151);
    cursor: pointer;
    transition: all 0.15s ease;
}

.plot-export-panel__button:hover:not(:disabled) {
    background: var(--color-gray-50, #f9fafb);
    border-color: var(--color-gray-400, #9ca3af);
}

.plot-export-panel__button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.plot-export-panel__button--accent {
    background: var(--color-primary-600, #059669);
    border-color: var(--color-primary-600, #059669);
    color: #fff;
}

.plot-export-panel__button--accent:hover:not(:disabled) {
    background: var(--color-primary-700, #047857);
    border-color: var(--color-primary-700, #047857);
}

/* ─────────────────────────────────────────────────────────
   Satellite background: icon visibility enhancements
   Only active when SVG has .has-satellite (satellite layer visible)
   ───────────────────────────────────────────────────────── */

/* 1. Satellite/aerial brightness dimming removed — users control opacity via element settings */

/* 2. Landing pad removed — was a white circle behind glyphs for satellite contrast,
   but looked like a spacing ring on permanent plants. Hit area kept in botanical mode only. */

/* 3. Dark outline + white glow on plant icons over satellite — DISABLED (perf) */
/* svg.has-satellite .stage-icon {
    filter:
        drop-shadow(0 0 1.5px rgba(0,0,0,0.7))
        drop-shadow(0 0 3px rgba(255,255,255,0.6))
        drop-shadow(0 0 1px rgba(255,255,255,0.4));
} */

/* ==========================================================================
   Pot Inventory Panel — flyout content for the Pots tool
   ========================================================================== */

.pot-inventory-panel {
  min-width: 200px;
}

.pot-inventory-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--color-surface-alt);
  margin-bottom: 4px;
}

.pot-inventory-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-content-muted);
}

.pot-inventory-hint {
  font-size: 11px;
  color: var(--color-content-muted);
}

.pot-inventory-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 260px;
  overflow-y: auto;
}

.pot-inventory-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: grab;
  transition: background 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
}

.pot-inventory-row:hover {
  background: var(--color-surface-alt);
}

.pot-inventory-row:focus-visible {
  outline: 2px solid var(--color-brand-500, #3A8C4B);
  outline-offset: -2px;
  background: var(--color-surface-alt);
}

.pot-inventory-row:active {
  cursor: grabbing;
  background: #fef7ed;
}

.pot-inventory-preview {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-surface-alt);
}

.pot-inventory-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pot-inventory-svg {
  width: 100%;
  height: 100%;
}

.pot-inventory-preview svg {
  width: 100%;
  height: 100%;
}

.pot-inventory-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.pot-inventory-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-content-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pot-inventory-size {
  font-size: 11px;
  color: var(--color-content-muted);
}

.pot-inventory-count {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  color: var(--color-content-muted);
  flex-shrink: 0;
  margin-left: auto;
}

.pot-count-placed {
  font-weight: 600;
  color: #5b8c5a;
}

.pot-count-sep {
  color: var(--color-content-faint);
}

.pot-count-total {
  color: var(--color-content-muted);
}

.pot-inventory-add {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  margin-top: 4px;
  border-top: 1px solid var(--color-surface-alt);
  cursor: pointer;
  border-radius: 0 0 8px 8px;
  transition: background 0.15s ease;
}

.pot-inventory-add:hover {
  background: var(--color-surface-alt);
}

.pot-inventory-add:focus-visible {
  outline: 2px solid var(--color-brand-500, #3A8C4B);
  outline-offset: -2px;
  background: var(--color-surface-alt);
}

.pot-add-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--color-surface-alt);
  color: var(--color-content-muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

.pot-add-label {
  font-size: 12px;
  color: var(--color-content-muted);
}

.pot-inventory-manage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 10px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
}

.pot-inventory-manage:hover {
  background: var(--color-surface-alt);
}

.pot-manage-label {
  font-size: 11px;
  color: var(--color-content-muted);
}

.pot-manage-icon {
  color: var(--color-content-muted);
}

/* ── Coaching Overlay ─────────────────────────────────────── */

.coaching-overlay {
    position: fixed;
    z-index: 45;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.coaching-overlay.is-visible {
    opacity: 1;
}

.coaching-overlay--empty-canvas {
    inset: 0;
    position: absolute;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.coaching-overlay--plant-armed {
    left: 50%;
    transform: translateX(-50%);
    top: 80px;
}

@media (max-width: 767px) {
    .coaching-overlay--plant-armed {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        transform: none;
        background: var(--color-surface-overlay);
        pointer-events: auto;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding-bottom: 160px;
    }
}

.coaching-overlay--confirm {
    inset: 0;
    pointer-events: auto;
    background: var(--color-surface-overlay);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 80px;
    z-index: 45;
}

.coaching-overlay--view-mode {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-overlay);
    pointer-events: auto;
}

.coaching-overlay__card {
    background: var(--color-surface-tint);
    border: 1px solid var(--color-surface-border);
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.06);
    padding: 16px 20px;
    max-width: 300px;
    text-align: center;
    pointer-events: auto;
}

.coaching-overlay__card--prominent {
    background: var(--color-brand-light, #e8f2e5);
    border-color: var(--color-brand, #164825);
}

.coaching-overlay__card--celebration {
    max-width: 340px;
    padding: 24px 28px;
    border-color: var(--color-brand, #164825);
}

.coaching-overlay__card--celebration .coaching-overlay__title {
    font-size: 20px;
    margin-bottom: 8px;
}

.coaching-overlay__card--celebration .coaching-overlay__text {
    font-size: 14px;
}

.coaching-overlay__view-btn {
    display: inline-block;
    margin-top: 12px;
    padding: 8px 20px;
    background: var(--color-brand, #164825);
    color: white;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.15s ease;
}

.coaching-overlay__view-btn:hover {
    background: var(--color-brand-600, #1a5a2e);
}

.coaching-overlay__card--welcome {
    border-color: var(--color-brand, #164825);
    padding: 20px 24px 16px;
}

.coaching-overlay__welcome-img {
    width: 120px;
    height: auto;
    margin: 0 auto 10px;
}

.coaching-overlay__card--prominent .coaching-overlay__title,
.coaching-overlay__card--prominent .coaching-overlay__text {
    color: var(--color-brand, #164825);
}

.coaching-overlay__icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    color: var(--color-content-faint);
}

.coaching-overlay__title {
    font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    font-size: var(--font-size-lg, 16px);
    font-weight: 600;
    color: var(--color-content-primary);
    margin-bottom: 6px;
}

.coaching-overlay__text {
    font-size: var(--font-size-sm, 12px);
    color: var(--color-content-secondary);
    line-height: 1.5;
}

.coaching-overlay__guide-text {
    margin-top: 8px;
    font-size: 11px;
    color: var(--color-content-muted);
}

.coaching-overlay__guide-link {
    color: var(--color-brand-600, #4f7942);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.coaching-overlay__guide-link:hover {
    color: var(--color-brand-700, #3d5e33);
}

.coaching-overlay__arrow {
    display: inline-block;
    color: var(--color-content-muted);
    margin-top: 8px;
    animation: coachingArrowBounce 1.2s ease-in-out infinite;
}

.coaching-overlay__arrow--up {
    transform: rotate(180deg);
}

.coaching-overlay__arrow--right {
    animation: coachingArrowBounceRight 1.2s ease-in-out infinite;
}

.coaching-overlay__caret {
    position: absolute;
    top: -6px;
    right: 20px;
    width: 12px;
    height: 12px;
    background: var(--color-surface-tint);
    border-left: 1px solid var(--color-surface-border);
    border-top: 1px solid var(--color-surface-border);
    transform: rotate(45deg);
}

.coaching-overlay__view-ring {
    box-shadow: 0 0 0 3px var(--color-brand-light, #e8f2e5), 0 0 8px rgba(22, 72, 37, 0.2);
    border-radius: 8px;
}

@keyframes coachingArrowBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

@keyframes coachingArrowBounceRight {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(6px); }
}

@keyframes coachingArrowBounceLeft {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-6px); }
}

@media (prefers-reduced-motion: reduce) {
    .coaching-overlay {
        transition: opacity 0.01ms !important;
    }
    .coaching-overlay__arrow {
        animation: none !important;
    }
}

/* ─── Polygon Draw Bar ─── */
.polygon-draw-bar {
    position: fixed;
    bottom: 5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-surface, #fff);
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-surface-border, #e5e7eb);
}

.polygon-draw-bar__hint {
    font-size: 0.8125rem;
    color: var(--color-content-secondary, #6b7280);
    white-space: nowrap;
}

.polygon-draw-bar__actions {
    display: flex;
    gap: 0.375rem;
}

.polygon-draw-bar__btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 0.25rem;
    border: 1px solid var(--color-surface-border, #d1d5db);
    cursor: pointer;
    white-space: nowrap;
}

.polygon-draw-bar__btn--secondary {
    background: var(--color-surface, #fff);
    color: var(--color-content-primary, #374151);
}

.polygon-draw-bar__btn--secondary:hover {
    background: var(--color-surface-alt, #f3f4f6);
}

.polygon-draw-bar__btn--primary {
    background: var(--color-brand, #16a34a);
    color: #fff;
    border-color: var(--color-brand, #16a34a);
}

.polygon-draw-bar__btn--primary:hover {
    background: var(--color-brand-hover, #15803d);
}

.polygon-draw-bar__btn--primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Polygon vertex editing handles */
.polygon-vertex-handles [data-vertex-idx],
.polygon-vertex-handles [data-midpoint-after] {
    touch-action: none;
}

/* Mobile: compact bar pinned to bottom */
@media (max-width: 767px) {
    .polygon-draw-bar {
        bottom: 1rem;
        left: 0.75rem;
        right: 0.75rem;
        transform: none;
        flex-direction: column;
        gap: 0.375rem;
        padding: 0.5rem 0.75rem;
        border-radius: 0.75rem;
    }

    .polygon-draw-bar__hint {
        font-size: 0.6875rem;
        white-space: normal;
        text-align: center;
    }

    .polygon-draw-bar__actions {
        width: 100%;
        justify-content: center;
        gap: 0.5rem;
    }

    .polygon-draw-bar__btn {
        flex: 1;
        padding: 0.5rem 0.25rem;
        font-size: 0.75rem;
        text-align: center;
    }
}