:root {
	--theme-independed-device-fill-color: white;
	--theme-independed-device-stroke-color: black;
	--theme-independed-device-logo-color: #222020;
	/* Corner rounding scale: 1 is the standard look, 0 makes the corners square.
	   It is redefined by the [data-corner] attribute set by the user setting. */
	--radius-scale: 1;
	--bs-border-radius-sm: calc(4px * var(--radius-scale));
	--bs-border-radius-lg: calc(8px * var(--radius-scale));
	--bs-border-radius-xl: calc(16px * var(--radius-scale));
	--bs-border-radius-xxl: calc(32px * var(--radius-scale));
}

:root,
[data-bs-theme="light"] {
	--bs-border-radius: calc(12px * var(--radius-scale));
	--white-color: #f5f7fb;
	--bg-color: #f5f7fb;
	--bg-color-card: #fef7ff;
	--primary-color: #00add6;
	--primary-color-hover: #0097c5;
	--primary-color-active: #006080;
	--primary-color-hover-text: #f5f7fb;
	--accent-color: #ff7f50;
	--accent-color-hover: #ff6347;
	--accent-color-active: #ff4500;
	--accent-color-hover-text: #f5f7fb;
	--danger-color: #dc3545;
	--danger-color-hover: #c82333;
	--danger-color-active: #bd2130;
	--danger-color-hover-text: #f5f7fb;
	--disabled-color-text: #6c757d;
	--disabled-color: #b0d0db;
	--contrast-text: #1f1f1f;
	--floating-info: #d6dbe6;
	--floating-info-text: #1f1f1f;
	--scrollbar-bg: #f5f7fb;
	--scrollbar-thumb: #888;
	--scrollbar-thumb-hover: #555;
	--selection-color-text: #f5f7fb;
	--selection-color-bg: #00add6;
	--outline-color: rgba(0, 173, 214, 0.25);
	--outline-color-border: rgba(0, 173, 214, 0.5);
	--device-fill-color: whitesmoke;
	--device-stroke-color: slategray;
	--device-logo-color: #222020;
	/* tabulator */
	--t-border-color: var(--bs-border-color);
	--t-border-radius: var(--bs-border-radius);
	--t-header-bg: #fff;
	--t-header-text: var(--contrast-text);
	--t-header-hover-bg: var(--floating-info);
	--t-header-hover-text: var(--contrast-text);
	--t-table-bg: var(--bg-color-card);
	--t-text-color: var(--contrast-text);
	--t-row-odd-bg: #fff;
	--t-row-even-bg: #fff;
	--t-row-hover-bg: var(--floating-info);
	/* A ticked row is a wash of the accent colour over the row background, not a
	   solid one: the row has to stay readable behind the other columns and the
	   tick box of the first column is what shows the state. */
	--t-row-selected-bg: color-mix(
		in srgb,
		var(--selection-color-bg) 25%,
		transparent
	);
	--t-row-selected-text: var(--contrast-text);
	--t-footer-bg: var(--bg-color);
	--t-footer-text: var(--contrast-text);
	--t-edit-bg: var(--bg-color-card);
	--t-edit-text: var(--contrast-text);
	--t-error-bg: var(--danger-color);
	--t-error-text: var(--danger-color-hover-text);
	--t-error-border: var(--danger-color-active);
	--t-page-bg: #fff;
	--t-page-text: var(--primary-color);
	--t-page-hover-bg: var(--floating-info);
	--t-page-hover-text: var(--primary-color-hover);
	--t-page-active-bg: var(--primary-color-active);
	--t-page-active-text: var(--primary-color-hover-text);
	--t-page-active-border: var(--outline-color-border);
	--t-loader-bg: var(--bg-color-card);
	--t-loader-text: var(--disabled-color-text);
	--t-placeholder-text: var(--contrast-text);
	--t-placeholder-bg: var(--bg-color-card);
	--t-border-radius: max(0px, calc(var(--bs-border-radius) - 4px));
}

[data-bs-theme="dark"] {
	--bs-border-radius: calc(12px * var(--radius-scale));
	--white-color: #f5f7fb;
	--bg-color: #1f1f1f;
	--bg-color-card: #242424;
	--primary-color: #00add6;
	--primary-color-hover: #0097c5;
	--primary-color-active: #006080;
	--primary-color-hover-text: #f5f7fb;
	--accent-color: #ff7f50;
	--accent-color-hover: #ff6347;
	--accent-color-active: #ff4500;
	--accent-color-hover-text: #f5f7fb;
	--danger-color: #dc3545;
	--danger-color-hover: #c82333;
	--danger-color-active: #bd2130;
	--danger-color-hover-text: #f5f7fb;
	--disabled-color-text: #6c757d;
	--disabled-color: #b0d0db;
	--contrast-text: #f5f7fb;
	--floating-info: #343a40;
	--floating-info-text: #f5f7fb;
	--scrollbar-bg: #333;
	--scrollbar-thumb: #bbb;
	--scrollbar-thumb-hover: #888;
	--selection-color-text: #f5f7fb;
	--selection-color-bg: #00add6;
	--outline-color: rgba(0, 173, 214, 0.25);
	--outline-color-border: rgba(0, 173, 214, 0.5);
	--device-fill-color: darkslategray;
	--device-stroke-color: white;
	--device-logo-color: whitesmoke;
	/* tabulator */
	--t-border-color: var(--bs-border-color);
	--t-border-radius: max(0px, calc(var(--bs-border-radius) - 4px));
	--t-header-bg: var(--bg-color-card);
	--t-header-text: var(--contrast-text);
	--t-header-hover-bg: var(--floating-info);
	--t-header-hover-text: var(--contrast-text);
	--t-table-bg: var(--bg-color);
	--t-text-color: var(--contrast-text);
	--t-row-odd-bg: var(--bg-color-card);
	--t-row-even-bg: var(--bg-color-card);
	--t-row-hover-bg: var(--floating-info);
	/* a wash of the accent colour, see the light theme above */
	--t-row-selected-bg: color-mix(
		in srgb,
		var(--selection-color-bg) 25%,
		transparent
	);
	--t-row-selected-text: var(--contrast-text);
	--t-footer-bg: var(--bg-color);
	--t-footer-text: var(--contrast-text);
	--t-edit-bg: var(--bg-color-card);
	--t-edit-text: var(--contrast-text);
	--t-error-bg: var(--danger-color);
	--t-error-text: var(--danger-color-hover-text);
	--t-error-border: var(--danger-color-active);
	--t-page-bg: var(--bg-color);
	--t-page-text: var(--primary-color);
	--t-page-hover-bg: var(--floating-info);
	--t-page-hover-text: var(--primary-color-hover);
	--t-page-active-bg: var(--primary-color-active);
	--t-page-active-text: var(--primary-color-hover-text);
	--t-page-active-border: var(--outline-color-border);
	--t-loader-bg: var(--bg-color);
	--t-loader-text: var(--disabled-color-text);
	--t-placeholder-text: var(--disabled-color-text);
}

/* ---------------------------------------------------------------------------
   Accent (highlight) colour user setting.
   setUsedAccent() sets data-accent on <html>; the palette itself lives here so
   that the head snippet (subtemplates/theme_init.php) can apply it before the
   first paint, without waiting for the scripts at the end of <body>.

   The accent blocks have to stay below the theme blocks: they redefine the same
   variables for both themes. "cornflower" (the default) repeats the default
   values on purpose, its outline colour differs from the one in the theme blocks
   above. The names are the ones of a garden, the slugs are what
   localStorage.accent / data-accent / res/img carry - see ACCENT_ALIASES in
   res/js/utilities.js for the older ones.

   The selector is `[data-accent="…"]` and not `html[data-accent="…"]` on
   purpose: an accent is a palette for *any* element that carries the attribute,
   not only for the page. That is what lets a row of the accent list be painted
   in the colour it stands for - the custom select copies the data-accent of an
   option onto its row, and the tokens below then resolve to that accent (see
   .cs-option[data-accent] in res/css/custom-select.css).
   --------------------------------------------------------------------------- */

[data-accent="cornflower"] {
	--primary-color: #00add6;
	--primary-color-hover: #0097c5;
	--primary-color-active: #006080;
	--selection-color-bg: #00add6;
	--outline-color: rgba(6, 132, 160, 0.25);
	--outline-color-border: rgba(6, 132, 160, 0.5);
}

[data-accent="periwinkle"] {
	--primary-color: #6666cc;
	--primary-color-hover: #4646c1;
	--primary-color-active: #3636a1;
	--selection-color-bg: #6666cc;
	--outline-color: rgba(102, 102, 204, 0.25);
	--outline-color-border: rgba(102, 102, 204, 0.5);
}

[data-accent="eggplant"] {
	--primary-color: #9c27b0;
	--primary-color-hover: #862297;
	--primary-color-active: #6d1b7b;
	--selection-color-bg: #9c27b0;
	--outline-color: rgba(156, 39, 176, 0.25);
	--outline-color-border: rgba(156, 39, 176, 0.5);
}

[data-accent="lilac"] {
	--primary-color: #dda0dd;
	--primary-color-hover: #dc91c8;
	--primary-color-active: #e667a0;
	--selection-color-bg: #dda0dd;
	--outline-color: rgba(216, 119, 216, 0.25);
	--outline-color-border: rgba(216, 119, 216, 0.5);
}

[data-accent="fuchsia"] {
	--primary-color: #d025a5;
	--primary-color-hover: #b3208e;
	--primary-color-active: #921a74;
	--selection-color-bg: #d025a5;
	--outline-color: rgba(208, 37, 165, 0.25);
	--outline-color-border: rgba(208, 37, 165, 0.5);
}

[data-accent="peony"] {
	--primary-color: #f8a5c2;
	--primary-color-hover: #dc91c8;
	--primary-color-active: #c774b5;
	--selection-color-bg: #f8a5c2;
	--outline-color: rgba(207, 120, 151, 0.25);
	--outline-color-border: rgba(207, 120, 151, 0.5);
}

[data-accent="tomato"] {
	--primary-color: #dc3545;
	--primary-color-hover: #c82333;
	--primary-color-active: #bd2130;
	--selection-color-bg: #dc3545;
	--outline-color: rgba(252, 18, 42, 0.25);
	--outline-color-border: rgba(252, 18, 42, 0.5);
}

[data-accent="pumpkin"] {
	--primary-color: #ef6c00;
	--primary-color-hover: #ce5d00;
	--primary-color-active: #a74c00;
	--selection-color-bg: #ef6c00;
	--outline-color: rgba(239, 108, 0, 0.25);
	--outline-color-border: rgba(239, 108, 0, 0.5);
}

[data-accent="olive"] {
	--primary-color: #808a42;
	--primary-color-hover: #6e7739;
	--primary-color-active: #5a612e;
	--selection-color-bg: #808a42;
	--outline-color: rgba(128, 138, 66, 0.25);
	--outline-color-border: rgba(128, 138, 66, 0.5);
}

[data-accent="basil"] {
	--primary-color: #28a745;
	--primary-color-hover: #218838;
	--primary-color-active: #1d643b;
	--selection-color-bg: #28a745;
	--outline-color: rgba(24, 187, 62, 0.25);
	--outline-color-border: rgba(24, 187, 62, 0.5);
}

[data-accent="mint"] {
	--primary-color: #39ac8a;
	--primary-color-hover: #319477;
	--primary-color-active: #287861;
	--selection-color-bg: #39ac8a;
	--outline-color: rgba(57, 172, 138, 0.25);
	--outline-color-border: rgba(57, 172, 138, 0.5);
}

[data-accent="gray"] {
	--primary-color: #6c757d;
	--primary-color-hover: #5a6268;
	--primary-color-active: #495057;
	--selection-color-bg: #6c757d;
	--outline-color: rgba(74, 80, 85, 0.25);
	--outline-color-border: rgba(74, 80, 85, 0.5);
}

/* ---------------------------------------------------------------------------
   Bootstrap's own colour tokens, pointed at the app palette.
   Bootstrap 5.3 keeps its components on semantic variables (--bs-link-*, the
   focus ring of a link or a nav link) and hardcodes #0d6efd in a few rules
   (.form-control:focus, .btn-primary, ...). Wherever the app lets a Bootstrap
   component show through, that default blue leaked: a pressed primary button
   (#0a58ca), the ring of a focused link button or nav tab, the border of a
   focused textarea, a bg-primary header. All of it is re-pointed here, in the
   file both stylesheets import (main.css and login.css), so no page can load
   one of them and miss the palette.

   The -rgb twins (--bs-link-color-rgb, --bs-primary-rgb, the button focus
   shadow) cannot be built from a hex custom property, so the rules that use
   them are overridden directly instead: the base `a`, the button focus
   box-shadow and the nav link focus ring below.
   --------------------------------------------------------------------------- */

:root {
	--bs-link-color: var(--primary-color);
	--bs-link-hover-color: var(--primary-color-hover);
	--bs-focus-ring-color: var(--outline-color);
}

/* The base link rule of Bootstrap is written with --bs-link-color-rgb (a
   triplet that cannot be derived from the hex token), so it is overridden. */
a {
	color: var(--primary-color);
}

a:hover,
a:focus,
a:active {
	color: var(--primary-color-hover);
}

/* Every button variant takes the same accent focus ring (--outline-color) that
   .btn-primary and .btn-close already draw. Without it a link or an outline
   button keeps Bootstrap's --bs-btn-focus-shadow-rgb and its blue ring. The
   whole box-shadow is set, so no triplet is needed. */
.btn {
	--bs-btn-focus-box-shadow: 0 0 0 0.25rem var(--outline-color);
}

/* A nav link (the tabs of the device window and of the scheme editor) draws its
   own blue focus ring by default. */
.nav-link:focus-visible {
	box-shadow: 0 0 0 0.25rem var(--outline-color);
}

/* The pressed shade of a link button. Bootstrap's active rule is again more
   specific than the .btn-cog:active / .btn-theme:active the login page writes,
   so the press used to fall back to Bootstrap's blue - and with the colours
   above it would land on the hover shade instead of the intended active one. */
.btn-link {
	--bs-btn-active-color: var(--primary-color-active);
}

/* The pressed state of a primary button. Bootstrap's own active rule
   (:not(.btn-check)+.btn:active, specificity (0,3,0)) is more specific than the
   .btn-primary:active the app writes ((0,2,0)), so it won and the button turned
   #0a58ca on every press. Pointing the variant variables at the palette fixes
   every state Bootstrap builds from them (active, .active, .show, :checked) at
   the source, and the combinations with them. */
.btn-primary {
	--bs-btn-bg: var(--primary-color);
	--bs-btn-border-color: var(--primary-color);
	--bs-btn-hover-bg: var(--primary-color-hover);
	--bs-btn-hover-border-color: var(--primary-color-hover);
	--bs-btn-active-bg: var(--primary-color-active);
	--bs-btn-active-border-color: var(--primary-color-active);
	--bs-btn-disabled-bg: var(--disabled-color);
	--bs-btn-disabled-border-color: var(--disabled-color);
	--bs-btn-disabled-color: var(--disabled-color-text);
}

/* The outline variant (the byte selector of a sensor) is the same palette seen
   from the other side: the accent is the text and the ring, and it becomes the
   fill while the pointer is on it. */
.btn-outline-primary {
	--bs-btn-color: var(--primary-color);
	--bs-btn-border-color: var(--primary-color);
	--bs-btn-hover-color: var(--primary-color-hover-text);
	--bs-btn-hover-bg: var(--primary-color);
	--bs-btn-hover-border-color: var(--primary-color);
	--bs-btn-active-color: var(--primary-color-hover-text);
	--bs-btn-active-bg: var(--primary-color-active);
	--bs-btn-active-border-color: var(--primary-color-active);
}

/* ---------------------------------------------------------------------------
   Corner rounding user setting.
   performRadius() sets data-corner / data-corner-method on <html>; only the
   --radius-scale variable has to change here, every radius in the UI is
   derived from it (see --bs-border-radius* above and main.css).
   --------------------------------------------------------------------------- */

html[data-corner="none"] {
	--radius-scale: 0;
}

html[data-corner="slight"] {
	--radius-scale: 0.55;
}

html[data-corner="standard"] {
	--radius-scale: 1;
}

html[data-corner="strong"] {
	--radius-scale: 1.6;
}

/* Rounding method. "corner-shape" is not inherited, so it is applied to every
   element; it only has an effect where a border-radius is set. */
html[data-corner-method="squircle"] * {
	corner-shape: squircle;
}

/* Spinners are perfect circles (border-radius: 50%) and must stay round -
   a squircle ring looks broken while spinning. The halo of the floating device menu
   button is a round plate as well: only the button in its middle follows the rounding
   method (see .floating-halo / .floating-core in main.css). The ping rings of the
   page loader are circles for the same reason (only the mark they surround
   follows the rounding, see res/css/loader.css). */
html[data-corner-method="squircle"] .spinner-border,
html[data-corner-method="squircle"] .floating-halo,
html[data-corner-method="squircle"] .page-loader-ring {
	corner-shape: round;
}

/* Corner radii hand-tuned in the markup (e.g. the first/last button of a modal
   header: style="border-top-right-radius: 11.5px", the group buttons of the
   settings list: 8.5px) line a control up with the round corner of its
   container, but they are a fixed value and therefore only match the standard
   rounding: with the rounding set to "none" the button stayed round inside the
   square corner of the modal, and when the squircle shape is not available the
   value does not follow --radius-scale either - the corner of the container
   shows through next to the button, which reads as extra padding at the edge of
   the modal. Such a button always falls back to the standard corner token
   instead (.btn / .btn-sm get it from main.css; it is derived from
   --radius-scale, so it is 0 for "none" and follows "slight"/"strong").
   A squircle is another reason: the same radius looks tighter than the corners
   next to it there.
   An inline declaration can only be outweighed by !important.
   A percentage radius is excluded: it is a shape (a round control must stay
   round, see the exceptions above), not a container-corner tweak. */
.btn[style*="border-top-left-radius:"],
.btn[style*="border-top-right-radius:"],
.btn[style*="border-bottom-left-radius:"],
.btn[style*="border-bottom-right-radius:"],
.btn[style*="border-radius:"]:not([style*="%"]) {
	border-radius: var(--bs-border-radius) !important;
}

/* ---------------------------------------------------------------------------
   Blur effect user setting.
   performBlurSetting() (res/js/functions.js) sets data-blur on <html>, the way
   performRadius() sets data-corner. The full-page overlays (#blured /
   #bluredTrans) carry the strength of the setting in their own classes
   (.blured-slight|medium|full in main.css) - they are the elements the setting
   exists for. The small local blurs of the UI cannot reach those classes: the
   band across a busy device card (.device-busy-badge) blurs the card under it
   from the stylesheet of the page it sits on. It reads this variable instead, so
   it follows the same setting and gives up its blur when the setting is off.
   A browser that cannot render the blur is reported as "disabled" too (the
   setting may hold a mode that this browser can never paint, see
   isBlurAvailable()), which is what applyBlurClasses() does for the overlays.
   The radius is a fraction of the overlay's: the badge covers a small patch of
   the card, and the 8px of the medium overlay would wash the picture out there
   completely.

   --blur-toast (res/css/toast.css) is the same idea for the notifications: a
   toast covers a whole message, so it takes more of the overlay's strength than
   the badge does - and unlike the badge, which only blurs the small picture
   under it, the toast turns its solid background into a wash of its own colour
   so that the blur behind it is visible at all. 0px is the effect being off: the
   toast keeps the solid background Bootstrap gives it.
   --------------------------------------------------------------------------- */

html[data-blur="disabled"] {
	--blur-small: 0px;
	--blur-toast: 0px;
}

html[data-blur="slight"] {
	--blur-small: 1px;
	--blur-toast: 3px;
}

html[data-blur="medium"] {
	--blur-small: 2px;
	--blur-toast: 6px;
}

html[data-blur="full"] {
	--blur-small: 4px;
	--blur-toast: 10px;
}

/* ---------------------------------------------------------------------------
   Text selection highlight.
   It lives here and not in main.css so that every page gets it: the pre-login
   pages (login / register / recovery / 404) load login.css only, and both files
   import this one. The colour follows the accent (--selection-color-bg) like
   the rest of the highlighting.
   --------------------------------------------------------------------------- */

*::selection {
	background-color: var(--selection-color-bg);
	color: var(--selection-color-text);
}

/* ---------------------------------------------------------------------------
   Accent logo (<img id="big_logo_image">, the file is chosen by
   subtemplates/accent_logo_src.php). The element only gets its src from that
   script, and until then the browser paints the alt text - a broken image look
   that is visible for a few milliseconds while the page is being streamed. It
   therefore stays invisible until the file is really there (the script adds
   .is-loaded on load). The rule lives here because every page that shows the
   logo (login / register / recovery and both sidebars, see main.css) imports
   this file.
   --------------------------------------------------------------------------- */

#big_logo_image {
	visibility: hidden;
}

#big_logo_image.is-loaded {
	visibility: visible;
}