/* =============================================================
 * HiiForest /app/ — Nordic skin overlay
 *
 * Selective overrides bringing the GIS workbench in line with the
 * landing page's forest-green / dark-glass aesthetic.
 *
 * Strategy:
 *   - DOES NOT touch Leaflet map or layer controls (need contrast).
 *   - Re-skins: sidebar, panel chrome, buttons, modals, tooltips.
 *   - Consumes vars from /shared/design-tokens.css.
 *
 * Load LAST so it wins specificity ties against /app/css/style.css.
 * ============================================================= */

/* ---- 1. Body & global typography ---------------------------------------- */
body, html {
    background: var(--hii-bg-deepest) !important;
    font-family: var(--hii-font-sans) !important;
    color: var(--hii-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---- 2. Left vertical sidebar (project switcher / tool icons) ---------- */
#sylva-sidebar {
    background: var(--hii-bg-panel) !important;
    border-right: 1px solid var(--hii-border-soft);
    box-shadow: var(--hii-shadow-sm);
}

.sylva-btn {
    color: var(--hii-text-soft) !important;
    transition: color var(--hii-dur) var(--hii-ease),
                background var(--hii-dur) var(--hii-ease);
}
.sylva-btn:hover,
.sylva-btn.active {
    color: #fff !important;
    background: var(--hii-primary) !important;  /* was info-blue, now brand green */
}

.sylva-tooltip {
    background: rgba(10, 14, 18, 0.92) !important;
    color: var(--hii-text);
    border: 1px solid var(--hii-border);
    border-radius: var(--hii-radius-sm);
    backdrop-filter: blur(6px);
}

/* ---- 3. L / W / R floating panels ------------------------------------- */
/* These selectors are intentionally loose — they target whatever .panel-style
 * boxes the app renders, regardless of which engine creates them. */
.panel,
.gis-panel,
.volume-panel,
.weather-panel,
.report-panel,
.sylva-floating-panel,
[class*="-panel"] {
    background: var(--hii-bg-glass) !important;
    border: 1px solid var(--hii-border) !important;
    border-radius: var(--hii-radius) !important;
    box-shadow: var(--hii-shadow) !important;
    backdrop-filter: blur(10px);
    color: var(--hii-text);
}

.panel h3, .panel h4,
.gis-panel h3, .gis-panel h4,
[class*="-panel"] h3,
[class*="-panel"] h4 {
    color: var(--hii-primary) !important;
    border-bottom: 1px solid var(--hii-border);
    padding-bottom: 6px;
}

/* ---- 4. Buttons (primary / secondary / ghost) -------------------------- */
button.primary,
.btn-primary,
button.sylva-primary,
.sylva-btn-primary {
    background: linear-gradient(135deg, var(--hii-primary) 0%, var(--hii-primary-dk) 100%) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--hii-radius-sm) !important;
    padding: 8px 16px;
    font-weight: 600;
    cursor: pointer;
    transition: filter var(--hii-dur) var(--hii-ease),
                transform var(--hii-dur-fast) var(--hii-ease);
}
button.primary:hover,
.btn-primary:hover,
button.sylva-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

button.secondary,
.btn-secondary {
    background: transparent !important;
    color: var(--hii-primary) !important;
    border: 1px solid var(--hii-primary) !important;
    border-radius: var(--hii-radius-sm) !important;
    padding: 7px 15px;
}
button.secondary:hover,
.btn-secondary:hover {
    background: var(--hii-primary-soft) !important;
}

/* ---- 5. Modals --------------------------------------------------------- */
.modal,
.sylva-modal,
[class*="-modal"] {
    background: var(--hii-bg-glass) !important;
    color: var(--hii-text);
    border: 1px solid var(--hii-border) !important;
    border-radius: var(--hii-radius-lg) !important;
    box-shadow: var(--hii-shadow-lg) !important;
}

.modal-backdrop {
    background: rgba(10, 14, 18, 0.75);
    backdrop-filter: blur(4px);
}

/* ---- 6. Leaflet popups (semi-transparent dark) ------------------------ */
.leaflet-popup-content-wrapper {
    background: rgba(30, 39, 46, 0.96) !important;
    color: var(--hii-text) !important;
    border-radius: var(--hii-radius) !important;
    border: 1px solid var(--hii-border) !important;
    box-shadow: var(--hii-shadow) !important;
}
.leaflet-popup-tip {
    background: rgba(30, 39, 46, 0.96) !important;
}
.leaflet-popup-content h4,
.leaflet-popup-content h3 {
    /* leave per-popup brand color intact (we set risk colors per layer);
       just make sure default <h4> in a popup with no color is readable */
    color: inherit;
}
.leaflet-popup-content a { color: var(--hii-primary); }
.leaflet-popup-close-button { color: var(--hii-text-soft) !important; }

/* ---- 7. Leaflet layer-control (right side accordion) ------------------ */
.leaflet-control-layers {
    background: var(--hii-bg-glass) !important;
    color: var(--hii-text) !important;
    border: 1px solid var(--hii-border) !important;
    border-radius: var(--hii-radius) !important;
    backdrop-filter: blur(10px);
}
.leaflet-control-layers-expanded label { color: var(--hii-text); }

/* ---- 8. Scrollbars (subtle, brand-tinted) ----------------------------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(46, 204, 113, 0.35);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--hii-primary); }

/* ---- 9. Subtle brand accent strip at top of #map (optional, brand cue) - */
#map::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--hii-primary) 30%,
        var(--hii-primary) 70%,
        transparent 100%);
    z-index: 500;
    pointer-events: none;
    opacity: 0.6;
}