/* ===== Plexser theme: the brand colours of every Plexser web app (Sizing, billing, PlexFlow, ...). Colours live ONLY here. =====
   Brand palette sampled from the Plexser logo. Light by default; dark when the page says data-theme="dark" (Sizing's theme.js),
   or, on pages that never set data-theme (billing), when the operating system is dark. Dark applies on screen only: printing stays light.
   Link it first: <link rel="stylesheet" href="_content/Plex.Web.UI/plexser-theme.css" /> */
:root {
    --ap-slate: #495457;
    --ap-slate-dark: #2f383b;
    --ap-slate-light: #6b777a;
    --ap-slate-tint: #eef1f2;
    --ap-amber: #ffb514;
    --ap-amber-dark: #e09a00;
    --ap-amber-tint: #fff3d6;
    --ap-on-amber: #2b3234;
    --ap-border: #d6dcde;
    --ap-page: #f4f6f7;
    --ap-ok: #2a9d8f;
    --ap-ok-bg: #e3f4f1;
    --ap-warn-bg: #fff0c2;
    --ap-alarm: #c0392b;
    --ap-alarm-bg: #fdecea;
    --ap-surface: #ffffff;
    --ap-fill: var(--ap-slate);          /* fills that carry white text (buttons, tiles, table headers) */
    --ap-fill-dark: var(--ap-slate-dark);
    --ap-bar: rgba(255,255,255,.92);
    --ap-grid: #e3e7e8; --ap-axis: #6b7a7e; --ap-chart-text: #2f383b; --ap-band-stroke: #aab3b6; --ap-band-text: #111;
    --radius: 10px;
}

@media screen {
html[data-theme="dark"] {
    color-scheme: dark;
    --ap-slate: #c5cdd0; --ap-slate-dark: #e9eef0; --ap-slate-light: #98a5a9; --ap-slate-tint: #2a3337;
    --ap-border: #3c474c; --ap-page: #12171a; --ap-surface: #1c2327;
    --ap-fill: #55636a; --ap-fill-dark: #46535a; --ap-bar: rgba(28,35,39,.92);
    --ap-amber-tint: #3b3114; --ap-amber-dark: #ffc53d; --ap-warn-bg: #3d3413; --ap-alarm: #ff8070; --ap-alarm-bg: #3f2220; --ap-ok: #4ec3b3; --ap-ok-bg: #1f3a36;
    --ap-grid: #333e43; --ap-axis: #8a979b; --ap-chart-text: #d3dadd; --ap-band-stroke: #6c7a7f; --ap-band-text: #f2f2f2;
}
}

/* pages that do not choose a theme themselves follow the operating system (same values as above) */
@media screen and (prefers-color-scheme: dark) {
html:not([data-theme]) {
    color-scheme: dark;
    --ap-slate: #c5cdd0; --ap-slate-dark: #e9eef0; --ap-slate-light: #98a5a9; --ap-slate-tint: #2a3337;
    --ap-border: #3c474c; --ap-page: #12171a; --ap-surface: #1c2327;
    --ap-fill: #55636a; --ap-fill-dark: #46535a; --ap-bar: rgba(28,35,39,.92);
    --ap-amber-tint: #3b3114; --ap-amber-dark: #ffc53d; --ap-warn-bg: #3d3413; --ap-alarm: #ff8070; --ap-alarm-bg: #3f2220; --ap-ok: #4ec3b3; --ap-ok-bg: #1f3a36;
    --ap-grid: #333e43; --ap-axis: #8a979b; --ap-chart-text: #d3dadd; --ap-band-stroke: #6c7a7f; --ap-band-text: #f2f2f2;
}
}