/* Farm Fire Watch — rules Tailwind's CDN utility classes can't express cleanly. */

/* Metropolis — self-hosted (Chris Simpson, SIL OFL). Not on Google Fonts, so it
   lives here as @font-face + static/fonts/*. Paths are relative to this file
   (static/css/ -> static/fonts/). The whole UI is set in Metropolis 400;
   500/600/700 back the font-medium/semibold/bold utilities.

   These are the TrueType-outline builds iforest.global itself serves (same
   glyphs/metrics as the original release). The original release's files are
   CFF/PostScript-outline, which Windows Chrome/Edge render visibly heavier and
   darker than TrueType at the same weight — the "font looks different from the
   iFOREST site" report. Don't swap these back for a Fontsource/CDN copy without
   checking: those are CFF too. woff2 first (smaller), woff as fallback.
   400/500 woff2 are also <link rel="preload">ed in base.html. */
@font-face {
    font-family: "Metropolis";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/Metropolis-Regular.a9122e41c6bc.woff2") format("woff2"),
         url("../fonts/Metropolis-Regular.fff61cfafc97.woff") format("woff");
}
@font-face {
    font-family: "Metropolis";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/Metropolis-Medium.5a2f90b9e11a.woff2") format("woff2"),
         url("../fonts/Metropolis-Medium.2368fbceb7dd.woff") format("woff");
}
@font-face {
    font-family: "Metropolis";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/Metropolis-SemiBold.55a8f62f8645.woff2") format("woff2"),
         url("../fonts/Metropolis-SemiBold.25b1a1510eb1.woff") format("woff");
}
@font-face {
    font-family: "Metropolis";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/Metropolis-Bold.49e828368848.woff2") format("woff2"),
         url("../fonts/Metropolis-Bold.b7d266a96adc.woff") format("woff");
}

body {
    background-color: #F4F4F4;
}

.dashed-border {
    border: 1px dashed #D1D1D1;
}

.solid-border {
    border: 1px solid #D1D1D1;
}

/* Custom scrollbar rules moved into base.html's own <style> block (a plain
   Django-rendered HTML document isn't cached the way a static .css file with
   no Cache-Control header can be — see the git history here for the caching
   confusion that prompted the move) — search base.html for "Custom scrollbar"
   if you're looking for those rules now. */

/* OpenLayers control skinning — match the flat, square, iFOREST look instead of OL's defaults */
.ol-viewport {
    font-family: "Metropolis", system-ui, sans-serif;
}

/* #map-panel (home.html) has a fixed h-[600px] Tailwind class for its normal, in-page
   size — the Fullscreen API doesn't override that on its own, so without this it would
   stay a 600px-tall box floating in the middle of an otherwise-black fullscreen viewport
   instead of actually filling it. #fullscreen-toggle in map.js requests fullscreen on
   this exact element. */
#map-panel:fullscreen {
    width: 100vw;
    height: 100vh;
}

/* !important throughout: ol.css loads AFTER this stylesheet (home.html's
   extra_head block, injected below base.html's <link> to this file), so at
   equal specificity ol.css's own defaults would otherwise win the cascade
   and silently override these — pin them so load order can't matter. */
.ol-scale-line {
    background: #FFFFFF !important;
    border: 1px solid #D1D1D1 !important;
    border-radius: 0 !important;
    bottom: 32px !important; /* clears the attribution text below it */
    right: 16px !important;
    left: auto !important;
    top: auto !important;
    position: absolute !important;
    padding: 2px 6px !important;
}

/* Home map has no attribution control anymore (map.js, client request), so its
   scale line no longer needs to clear it — sit level with the legend (bottom-3).
   Scoped to #map-panel: the trigger page's map still has attribution. */
#map-panel .ol-scale-line {
    bottom: 12px !important;
    right: 12px !important;
}

.ol-scale-line-inner {
    color: #464741;
    font-size: 10px;
    border-color: #1A1C1C;
}

.ol-attribution {
    font-size: 10px;
    bottom: 4px !important;
    right: 16px !important;
}

.chart-panel {
    min-height: 360px;
}

/* Same "Fullscreen API doesn't resize the box on its own" fix #map-panel:fullscreen
   already needed above — #diurnal-fullscreen-toggle/#weekly-trend-fullscreen-toggle
   (dashboard.js's initChartPanelFullscreen) request fullscreen on these exact
   elements. The chart INSIDE still needs its own JS height update on top of this
   (charts.js's chartsResizeDiurnalForFullscreen/chartsResizeWeeklyTrendForFullscreen)
   — this only grows the surrounding card, ApexCharts doesn't watch its container's
   CSS size the way a plain block element would. */
.chart-panel:fullscreen {
    width: 100vw;
    height: 100vh;
    background: #FFFFFF; /* surface-container-lowest — Fullscreen API's own default
        backdrop is black, which otherwise shows through any (unlikely at 100vw/100vh)
        gap around the card for a frame or two before layout settles. */
}

/* Must match CHART_CANVAS_HEIGHT in charts.js exactly. */
.chart-canvas {
    height: 320px;
}