/* Shared light/dark theme variables and toggle-button styling for the
   Query, Results, and Live Flights pages. Light mode is the default
   (no data-theme attribute, or data-theme="light"); dark mode activates
   under [data-theme="dark"], set on <html> by theme.js. */

:root {
    /* Lets native controls (date picker, scrollbars, etc.) follow the
       active theme too, without having to restyle each one by hand. */
    color-scheme: light;
    --bg: #f0f8ff;
    --text: #333;
    --header-bg: #004f7c;
    --header-text: #ffffff;
    --border: #ddd;
    --row-alt-bg: #f2f2f2;
    --row-hover-bg: #ddd;
    --mil-bg: #cce5ff;
    --gov-bg: #d9f2d9;
    --civ-bg: #fdf0c4;
    --eastern-bg: #f7cccc;
    --subtitle-text: #666;
    --link-text: #004f7c;
    /* Toggle button icon: a plain dark blue moon in light mode. */
    --icon-color: #0d3450;
    /* Small status-line text colors (e.g. Live Flights' QNH altitude
       correction line) - success/warning, kept legible against --bg in
       both themes. */
    --success-text: #1e7d34;
    --warning-text: #b3541e;
    /* Squawk alarm (7500/7600/7700) cell - deliberately a much more
       saturated, "stop sign" red than the soft --eastern-bg row tint above,
       so it still pops on an already eastern-red row (a flagged Russian
       aircraft squawking an emergency code, for instance). Applied only to
       the Squawk cell itself, never the whole row. -dim is the blink
       animation's other phase - a dark red rather than fading to nothing,
       so the cell stays legible at every point in the cycle. */
    --squawk-alarm-bg: #d90000;
    --squawk-alarm-bg-dim: #7a0000;
    --squawk-alarm-text: #ffffff;
    /* Live Flights "watch filter" row color (see liveflights.html) - an
       ad-hoc, client-side-only highlight for a plane typed into the watch
       filter, never written to ALERT_DB. Deliberately a hue none of the
       four watchlist colors above use, so a watched plane always stands
       out, including when it's ALSO a real mil/gov/civ/eastern entry (this
       color takes over from that one while the filter is active). */
    --temp-watch-bg: #e6d6f7;
}

[data-theme="dark"] {
    color-scheme: dark;
    --bg: #15191d;
    --text: #d7dee4;
    --header-bg: #0d3450;
    --header-text: #eaf2f8;
    --border: #3a4148;
    --row-alt-bg: #1d2227;
    --row-hover-bg: #2b333a;
    --mil-bg: #163a5c;
    --gov-bg: #17402a;
    --civ-bg: #4a3d14;
    --eastern-bg: #5c1f1f;
    --subtitle-text: #9aa4ad;
    --link-text: #6cb6e8;
    /* Toggle button icon: a plain white/light sun in dark mode. */
    --icon-color: #eef1f4;
    --success-text: #5fbf7a;
    --warning-text: #e0954f;
    /* Same "stop sign" red as light mode (see :root) - an alarm color
       deliberately doesn't get muted for dark mode the way the other
       row-background colors do, since it needs to keep reading as urgent
       against --eastern-bg's dark maroon too. */
    --squawk-alarm-bg: #e30000;
    --squawk-alarm-bg-dim: #5c0000;
    --squawk-alarm-text: #ffffff;
    --temp-watch-bg: #3d2a52;
}

/* Simple, flat box (not a bright/filled circle) that blends with the page
   and just outlines the icon in the theme's own color. */
.theme-toggle {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1000;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--icon-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.theme-toggle:hover {
    border-color: var(--icon-color);
}

.theme-toggle svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* Small text-label nav buttons that sit next to the theme toggle (top-left
   corner) - same flat box look, just auto-width to fit a short label
   instead of an icon. Stack further buttons by adding --nav-N (1, 2, ...)
   as a left-offset multiplier if more than one is ever needed. */
.nav-button {
    position: fixed;
    top: 10px;
    left: 44px;
    z-index: 1000;
    height: 28px;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--icon-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    font-size: 11px;
    text-decoration: none;
    box-sizing: border-box;
}

.nav-button:hover {
    border-color: var(--icon-color);
}