/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /*
     * Design System — the live values are the CSS variables defined below
     * (and mirrored in CLAUDE.md). Key tokens: --primary #337B30,
     * --brand-navy #1F4781, --white-sage #CDDCCA, --app-bg #F8F9FA,
     * --text-primary #3D3D3A.
     */

    /* Brand Colors */
    --primary:     #337B30;
    --primary-rgb: 51, 123, 48;   /* RGB channels for rgba(var(--primary-rgb), alpha) */
    --secondary: #555555;
    --tertiary:  #E3F0AF;
    --neutral:   #FBF6E9;

    /* Dark base (kept for map overlays, Leaflet controls) */
    --dark-base: #191c1b;

    /* App background — shown in gaps around floating panels */
    --app-bg: #F8F9FA;

    /* Surface layers — light theme */
    --surface:                  #f3f4f1;
    --surface-container:        #edeeeb;
    --surface-container-low:    #f3f4f1;
    --surface-container-high:   #e7e8e6;
    --surface-container-highest:#d9dad7;
    --top-bar-bg:               #ffffff;
    --outline-variant:          rgba(51, 123, 48, 0.18);

    /* Border radius scale */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  12px;
    --radius-xl:  16px;
    /* Center modals, species info panel, no-map card — keep one radius */
    --modal-radius: var(--radius-lg);

    /* Derived */
    --primary-hover: #286225;
    --primary-light:    var(--white-sage);  /* alias — same #CDDCCA as --white-sage (single source of truth) */
    --secondary-light:  rgba(93, 185, 150, 0.15);

    /* Brand navy — upload button and accents */
    --brand-navy:       #1F4781;
    --brand-navy-hover: #163a6b;

    /* Dark-green band on panel/modal/popup headers */
    --panel-header-bg:  #064E3B;

    /* Secondary whites */
    --white-sage: #CDDCCA;   /* sage-tinted white — active states, tints */
    --white-pure: #FEFEFE;   /* near-pure white — sidebar, cards */

    /* Semantic tokens */
    /* Match center map toolbar “island” (frosted white) */
    --floating-island-bg:     rgba(255, 255, 255, 0.95);
    --floating-island-border: 1px solid rgba(51, 123, 48, 0.15);
    --sidebar-width:          80px;
    --panel-bg:      var(--tertiary);
    --panel-bg-dark: var(--neutral);
    --card-bg:       var(--neutral);
    --accent-beige:  var(--tertiary);

    /* Text */
    --text-primary:  #3D3D3A;
    --text-muted:    rgba(61, 61, 58, 0.55);
    --text-secondary: var(--secondary);
    --text-on-dark:  var(--neutral);
    --text-on-green: var(--neutral);

    /* Borders & Shadows */
    --border-color: rgba(51, 123, 48, 0.15);
    --border-thick: 1px solid var(--border-color);
    --shadow:    0 1px 3px rgba(28, 28, 25, 0.08), 0 4px 12px rgba(28, 28, 25, 0.06);
    --shadow-lg: 0 2px 8px rgba(28, 28, 25, 0.1), 0 8px 24px rgba(28, 28, 25, 0.08);

    /* Legacy aliases — keeps all existing CSS working without changes */
    --navy-dark:        var(--dark-base);
    --green-primary:    var(--primary);
    --cream-white:      var(--neutral);
    --beige-light:      var(--tertiary);
    --brown-accent:     var(--secondary);
    --green-hover:      var(--primary-hover);
    --green-light:      var(--primary-light);
    --brown-light:      var(--secondary-light);
    --navy-light:       rgba(28, 28, 25, 0.1);
    --deep-green:       var(--primary);
    --green-dark:       var(--dark-base);
    --slate-grey:       var(--secondary);
    --off-cream:        var(--tertiary);
    --cream-light:      var(--tertiary);
    --white:            var(--neutral);
    --off-white:        var(--neutral);
    --primary-green:    var(--primary);
    --primary-dark-green: var(--dark-base);
    --sidebar-green:    var(--dark-base);
    --navy:             var(--dark-base);
    --dark-bg:          var(--dark-base);
    --primary-red:      var(--secondary);
    --accent-yellow:    var(--tertiary);

    /* Sunlight Mode */
    --sunlight-bg: #2C2C2C;
    --sunlight-text: #C2A878;
    --sunlight-panel: #3A3A3A;

    /* Typography — swap any value here to re-theme the platform */
    --font-primary:   'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-secondary: 'Space Grotesk', sans-serif;
    --font-tertiary:  'Inter', sans-serif;
    --font-mono:      'JetBrains Mono', 'SF Mono', 'Fira Code', 'Courier New', monospace;
}

body {
    font-family: var(--font-primary);
    background: var(--app-bg);
    color: var(--text-primary);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Standalone pages (gallery, marketplace) need normal document scroll */
body.page-standalone {
    overflow: auto;
    min-height: 100vh;
    background: var(--surface);
}

h1, h2, h3, h4 {
    font-family: var(--font-primary);
}

/* Monospace for numbers and technical data */
.monospace,
.stat-value,
.detail-item .value,
.coordinate,
.chemical-amount {
    font-family: var(--font-tertiary);
    font-weight: 500;
}

.app-container {
    display: flex;
    height: 100vh;
    width: 100vw;
    background: var(--app-bg);
    padding: 12px;
    gap: 12px;
    box-sizing: border-box;
}

/* Sidebar Styles */
.sidebar {
    width: var(--sidebar-width);
    background: #FEFEFE;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0 0 16px;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(28, 28, 25, 0.08);
    z-index: 1002;
    pointer-events: auto;
    flex-shrink: 0;
    overflow: hidden;
    height: fit-content;
    align-self: flex-start;
}

.sidebar-logo {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 8px;
    padding: 16px 8px 8px;
}

.sidebar-logo-img {
    height: auto;
    max-height: 52px;
    width: auto;
    max-width: 52px;
    object-fit: contain;
}

.sidebar-logo-divider {
    width: calc(100% - 24px);
    height: 1px;
    background: rgba(51, 123, 48, 0.15);
    margin: 0 12px 8px;
    flex-shrink: 0;
}

.sidebar-header {
    margin-bottom: 40px;
}

.user-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--green-primary), var(--navy-dark));
    background-image: url('./img/David_headshot.jpg');
    background-size: cover;
    background-position: center;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.username {
    font-size: 11px;
    color: var(--text-on-dark);
    font-weight: 500;
}

.sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 8px;
    align-items: center;
}

.nav-btn,
.settings-btn {
    background: transparent;
    border: none;
    color: rgba(61, 61, 58, 0.52);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
    border-radius: var(--radius-md);
    transition: background 0.15s, color 0.15s;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    width: 100%;
    aspect-ratio: 1;
    pointer-events: auto;
    position: relative;
    z-index: 10;
    font-family: var(--font-primary);
    text-align: center;
}

.nav-btn:hover,
.settings-btn:hover {
    background: rgba(51, 123, 48, 0.08);
    color: var(--text-primary);
}

.nav-btn.active {
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    box-shadow: none;
    border: none;
}

.nav-btn.active .icon {
    color: #fff;
}

.nav-btn.auth-active {
    color: var(--primary);
}
.nav-btn.auth-active .icon {
    color: var(--primary);
}

.nav-btn .icon,
.settings-btn .icon {
    font-size: 23px;
    width: 24px;
    min-width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: inherit;
}

.nav-btn .icon svg,
.settings-btn .icon svg {
    display: block;
    width: 22px;
    height: 22px;
}

.nav-btn .icon .material-symbols-outlined {
    font-size: 22px !important;
}

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

/* Main Content Area */
.main-content {
    flex: 1;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(28, 28, 25, 0.10);
}

/* Map Styles */
#map {
    width: 100%;
    height: 100%;
    z-index: 1;
    background: #0d1a2a;  /* dark fallback before Leaflet initialises */
}

/* Leaflet customization */
.leaflet-container {
    font-family: inherit;
    pointer-events: auto;
    background: #0d1a2a;  /* dark navy when no orthophoto layer is loaded */
}

/* ─── Map Control Pill (bottom-right) ──────────────────────────────────── */

/* Reposition the entire Leaflet top-left container to bottom-right */
.leaflet-top.leaflet-left {
    top: auto;
    bottom: 24px;
    left: auto;
    right: 24px;
    z-index: 1003;
    /* Light glass card */
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--primary-rgb), 0.18) !important;
    border-radius: var(--radius-md);
    padding: 6px;
    gap: 4px;
    box-shadow: 0 4px 16px rgba(28, 28, 25, 0.12);
}

/* Push up when floating progress widget is visible. JS (_syncZoomOffsetForWidget
   in upload.js) overrides `bottom` inline with the widget's actual rendered
   height so the controls track expand/collapse precisely. This rule is the
   fallback for the brief window before JS runs. */
.leaflet-top.leaflet-left.zoom-widget-offset {
    bottom: 110px;
}

/* Override Leaflet's a:last-child rule — match design radius */
.leaflet-top.leaflet-left .leaflet-bar a:last-child {
    border-radius: var(--radius-sm) !important;
}
.leaflet-top.leaflet-left .leaflet-bar a:first-child {
    border-radius: var(--radius-sm) !important;
}
/* Remove the default border-bottom line on Leaflet bar items */
.leaflet-top.leaflet-left .leaflet-bar a {
    border-bottom: none !important;
}
/* Remove margin that Leaflet adds to controls inside the container */
.leaflet-top.leaflet-left .leaflet-control {
    margin: 0 !important;
}

/* Strip Leaflet's default bar styling from the zoom control */
.leaflet-control-zoom {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* Zoom + and − buttons */
.leaflet-control-zoom-in,
.leaflet-control-zoom-out,
.leaflet-bar a.leaflet-control-zoom-in,
.leaflet-bar a.leaflet-control-zoom-out {
    width: 36px !important;
    height: 36px !important;
    line-height: 1 !important;
    border-radius: var(--radius-sm) !important;
    color: rgba(28, 28, 25, 0.6) !important;
    background: transparent !important;
    border: none !important;
    border-bottom: none !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-indent: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    text-decoration: none !important;
}

.leaflet-control-zoom-in:hover,
.leaflet-control-zoom-out:hover,
.leaflet-bar a.leaflet-control-zoom-in:hover,
.leaflet-bar a.leaflet-control-zoom-out:hover {
    background: rgba(31, 71, 129, 0.10) !important;
    color: var(--brand-navy) !important;
    border-radius: var(--radius-sm) !important;
}

.leaflet-control-zoom-in {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    box-shadow: none !important;
}

/* Wrapper spacing — pushes the Z18 block away from the buttons above */
.zoom-display-wrapper {
    margin-top: 18px !important;
}

/* Zoom level indicator */
.leaflet-zoom-display,
.leaflet-bar .leaflet-zoom-display {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 36px !important;
    padding: 10px 0 6px !important;
    font-size: 10px;
    font-family: var(--font-mono);
    font-weight: 700;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    color: rgba(28, 28, 25, 0.35);
    cursor: default;
    user-select: none;
    letter-spacing: 0.05em;
}

/* Layers + location + zoom — shared hover (same bg, radius, transition) */
.leaflet-control-layers-toggle-btn {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--radius-sm) !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    color: rgba(28, 28, 25, 0.6);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    box-shadow: none;
    margin-bottom: 0;
}

.leaflet-control-layers-toggle-btn:hover {
    background: rgba(31, 71, 129, 0.10) !important;
    color: var(--brand-navy) !important;
    border-radius: var(--radius-sm) !important;
}

.leaflet-control-layers-toggle-btn svg {
    display: block;
}

/* Location button (custom Leaflet control, matches zoom/layers buttons) */
.leaflet-control-location-btn {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--radius-sm) !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    color: rgba(28, 28, 25, 0.6);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    box-shadow: none;
}

.leaflet-control-location-btn:hover {
    background: rgba(31, 71, 129, 0.10) !important;
    color: var(--brand-navy) !important;
    border-radius: var(--radius-sm) !important;
}

/* Ensure Leaflet panes don't block UI */
.leaflet-pane {
    z-index: auto !important;
}

.leaflet-map-pane {
    z-index: 1 !important;
}

/* The rule above forces every pane to z-index:auto so stacking follows DOM order.
   But Leaflet core ALSO pins z-index on the renderer ELEMENTS — `.leaflet-map-pane
   canvas { z-index:100 }` and `svg { z-index:200 }` — which aren't `.leaflet-pane`,
   so they survive and collapse into one stacking context. That let the overlay/edit
   SVG (z 200) paint over markerPane handles whose per-marker z-index fell below 200
   (Geoman vertex dots use no zIndexOffset; top-of-screen labeling dots land near 200)
   — i.e. the Edit/Labeling tool vertices intermittently vanished. Restoring an
   explicit z-index makes markerPane a stacking unit again, lifting ALL its handles
   above the renderer elements; tooltipPane stays above markers. Both remain inside
   .leaflet-map-pane (z-index:1), so they can't cover app UI. */
.leaflet-marker-pane {
    z-index: 600 !important;
}
.leaflet-tooltip-pane {
    z-index: 650 !important;
}

/* ─── Floating Map Toolbar ───────────────────────────────────────────────── */
.map-toolbar {
    position: absolute;
    top: 16px;
    right: 16px;
    left: auto;
    transform: none;
    z-index: 1050;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--floating-island-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: var(--floating-island-border);
    border-radius: var(--radius-lg);
    padding: 8px 12px;
    box-shadow: 0 2px 12px rgba(28, 28, 25, 0.12);
    pointer-events: auto;
    white-space: nowrap;
}

.map-toolbar-sep {
    width: 1px;
    height: 16px;
    background: rgba(51, 123, 48, 0.2);
    flex-shrink: 0;
}

.map-toolbar-icon-btn {
    background: transparent;
    border: 1px solid rgba(51, 123, 48, 0.25);
    border-radius: var(--radius-sm);
    padding: 0;
    width: 28px;
    height: 28px;
    cursor: pointer;
    color: #3D3D3A;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.map-toolbar-icon-btn:hover {
    background: rgba(31, 71, 129, 0.10);
    border-color: rgba(31, 71, 129, 0.40);
    color: var(--brand-navy);
}

.map-toolbar-icon-btn--danger:hover {
    background: rgba(220, 53, 69, 0.08);
    border-color: rgba(220, 53, 69, 0.35);
    color: #dc3545;
}

.map-toolbar-upload-btn {
    background: var(--brand-navy);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0;
    width: 28px;
    height: 28px;
    font-size: 18px;
    font-weight: 400;
    font-family: var(--font-primary);
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: 0;
    text-transform: none;
    transition: background 0.15s;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.map-toolbar-upload-btn:hover {
    background: var(--brand-navy-hover);
}

/* Admin-only UI — hidden by default; revealed when isAdminUser() adds `is-admin` to <body>. */
.admin-only { display: none; }
body.is-admin .admin-only { display: revert; }