/* FLEXMEASURES_EXTRA_CSS_PATH: small adjustments for showing the pages inside the Aion shell.
   Colours come from the account's own primary/secondary fields, set at sign-in. */
#navbar-logo { max-height: 28px; width: auto; }
.aion-footer { font-size: 0.8rem; opacity: 0.8; }
body.aion-notice {
  margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #fafafa; color: #171717;
}
body.aion-notice main { max-width: 28rem; padding: 2rem; text-align: center; }
body.aion-notice h1 { font-size: 1.25rem; font-weight: 600; margin: 0 0 0.75rem; }
body.aion-notice p { margin: 0 0 1rem; line-height: 1.5; }
body.aion-notice a { color: inherit; text-decoration: underline; }
@media (prefers-color-scheme: dark) {
  body.aion-notice { background: #0a0a0a; color: #ededed; }
}

/* ---------- The deployment's caro theme (Aion's UTOPIA_THEME=caro; branding.THEMES) ----------
   Aion's own pages draw it from web/src/styles.css `[data-brand="caro"]`; these are the same values. base.html carries
   `data-aion-theme="caro"` and Bootstrap's dark colour mode, and the account's colours are the theme's deep green
   (navbar, toasts) and lime (the open page), so the engine's shades of them follow. Here: Bootstrap's dark set in the
   theme's greens, the site's gradient ground, frosted white panels, white text, the lime for links, focus and what
   is pressed, the site's pill buttons and fields. Without the theme none of it applies */
[data-aion-theme="caro"] {
  color-scheme: dark;
  --bs-body-bg: #244c38;
  --bs-body-bg-rgb: 36, 76, 56;
  --bs-body-color: #f3f8f1;
  --bs-body-color-rgb: 243, 248, 241;
  --bs-emphasis-color: #ffffff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: #d1e3d5;
  --bs-secondary-color-rgb: 209, 227, 213;
  --bs-tertiary-color: #c2d7c8;
  --bs-tertiary-color-rgb: 194, 215, 200;
  --bs-secondary-bg: #2d5541;
  --bs-secondary-bg-rgb: 45, 85, 65;
  --bs-tertiary-bg: #29503c;
  --bs-tertiary-bg-rgb: 41, 80, 60;
  --bs-heading-color: inherit;
  --bs-link-color: #cdf56a;
  --bs-link-color-rgb: 205, 245, 106;
  --bs-link-hover-color: #e4faab;
  --bs-link-hover-color-rgb: 228, 250, 171;
  --bs-border-color: rgba(255, 255, 255, 0.18);
  --bs-border-color-translucent: rgba(255, 255, 255, 0.12);
  --bs-primary: #cdf56a;
  --bs-primary-rgb: 205, 245, 106;
  --bs-primary-text-emphasis: #e4faab;
  --bs-primary-bg-subtle: #345b3c;
  --bs-primary-border-subtle: #7da94a;
  --bs-focus-ring-color: rgba(205, 245, 106, 0.45);
  --bs-form-valid-color: #8df0c4;
  --bs-form-valid-border-color: #8df0c4;
  --bs-form-invalid-color: #ffc2cd;
  --bs-form-invalid-border-color: #ffc2cd;
  --bs-code-color: #ffd98a;
  --bs-highlight-bg: rgba(205, 245, 106, 0.25);
  /* the engine's own greys (disabled pagination, borders of its toggles) */
  --light-gray: rgba(255, 255, 255, 0.08);
  --gray: #a9c2b6;
}
[data-aion-theme="caro"] body {
  background:
    radial-gradient(900px 800px at 100% 115%, rgba(14, 59, 59, 0.5), transparent 70%),
    linear-gradient(155deg, #274f3a 0%, #244c38 50%, #1d4435 100%) fixed;
  color: var(--bs-body-color);
}
/* Panels: frosted white on the green, a hairline instead of a shadow */
[data-aion-theme="caro"] :is(.card, .modal-content, .dropdown-menu, .list-group-item, .accordion-item) {
  --bs-card-bg: transparent;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none;
  color: var(--bs-body-color);
}
[data-aion-theme="caro"] :is(.modal-content, .dropdown-menu) {
  background: #17392a;
}
[data-aion-theme="caro"] :is(.agg-group, .flex-nav.nav-link.active) {
  background-color: rgba(255, 255, 255, 0.06);
  border-bottom-color: transparent;
}
[data-aion-theme="caro"] body.touched [title]:hover:after {
  background-color: #17392a;
  border-color: rgba(255, 255, 255, 0.2);
}
/* Charts are drawn by the engine in black on white (its vega and fast charts, on a canvas or an SVG): their panels
   keep a light sheet of their own, softly rounded */
[data-aion-theme="caro"] :is(.vega-embed, #fast-chart-container, .card:has(canvas)) {
  background: #f3f8f1;
  color: #1b3b29;
  border-radius: 14px;
}
/* Checked boxes and switches in the lime */
[data-aion-theme="caro"] .form-check-input:checked {
  background-color: #cdf56a;
  border-color: #cdf56a;
}
/* The engine writes its headings, labels, dialogs and breadcrumbs in the account's primary colour, a dark ink for
   its white pages; on the theme's green they are the theme's text, the links its lime */
[data-aion-theme="caro"] :is(h1, h2, h3, .modal, .new-asset-form label, .floatThead-wrapper .table > thead > tr > th,
  .container__predefined-ranges button, .litepicker .container__days .day-item:hover) {
  color: #f3f8f1;
}
[data-aion-theme="caro"] :is(.breadcrumb a, .breadcrumb-item + .breadcrumb-item::before, .login-form .btn-link, .forgot-pwd-form .btn-link) {
  color: #cdf56a;
}
/* On a chart's light sheet (above) its headings and labels keep the dark writing */
[data-aion-theme="caro"] :is(.vega-embed, #fast-chart-container, .card:has(canvas)) :is(h1, h2, h3, label) {
  color: #1b3b29;
}
/* The navbar in the theme's deep green (the account colour), its open page a lime pill: on a wide screen each link
   is a pill inside the bar's height (its 20 px padding becomes 12 px of margin and 8 px of padding) */
@media (min-width: 768px) {
  [data-aion-theme="caro"] .navbar-default .navbar-nav > li > a {
    margin: 12px 2px;
    padding: 8px 14px;
    border-radius: 9999px;
  }
}
/* Notices in the theme's greens, each meaning in its light colour (Aion's own: ok, warn, danger, the draft cyan) */
[data-aion-theme="caro"] {
  --bs-info-text-emphasis: #b5ecf5;
  --bs-info-bg-subtle: #1f4f4b;
  --bs-info-border-subtle: #3b7c76;
  --bs-success-text-emphasis: #8df0c4;
  --bs-success-bg-subtle: #1f5240;
  --bs-success-border-subtle: #3d8064;
  --bs-warning-text-emphasis: #f8cd90;
  --bs-warning-bg-subtle: #4a4a2c;
  --bs-warning-border-subtle: #85744a;
  --bs-danger-text-emphasis: #ffc2cd;
  --bs-danger-bg-subtle: #4f3438;
  --bs-danger-border-subtle: #8a5560;
}
/* The map's ground when it has no tiles, and its credit line */
[data-aion-theme="caro"] .leaflet-container {
  background: #1d4435;
}
[data-aion-theme="caro"] .leaflet-control-attribution {
  background: rgba(23, 57, 42, 0.85) !important;
  color: #d1e3d5;
}
[data-aion-theme="caro"] .leaflet-control-attribution a {
  color: #cdf56a;
}
/* Buttons: the engine draws every <button class="btn"> in its navbar colour; under the theme the main ones are the
   site's lime pills with dark green writing, the secondary ones outlined pills, a dangerous one stays red */
[data-aion-theme="caro"] :is(button.btn, a.btn, .btn) {
  border-radius: 9999px;
}
[data-aion-theme="caro"] :is(button.btn, .btn-primary, .btn-success, .btn-info) {
  color: #1b3b29;
  background: #cdf56a;
  border-color: #cdf56a;
}
[data-aion-theme="caro"] button[type="submit"] {
  color: #1b3b29;
  background: #cdf56a !important;
  border-radius: 9999px;
}
[data-aion-theme="caro"] :is(button.btn, .btn-primary, .btn-success, .btn-info, button[type="submit"]):is(:hover, :focus-visible) {
  color: #1b3b29;
  background: #d9f88f !important;
  border-color: #d9f88f;
}
[data-aion-theme="caro"] :is(button.btn, a.btn):is(.btn-secondary, .btn-default, .btn-light, .btn-outline-primary, .btn-outline-secondary) {
  color: #f3f8f1;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.45);
}
[data-aion-theme="caro"] :is(button.btn, a.btn):is(.btn-secondary, .btn-default, .btn-light, .btn-outline-primary, .btn-outline-secondary):is(:hover, :focus-visible) {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.8);
}
[data-aion-theme="caro"] :is(button.btn, a.btn).btn-danger {
  color: #ffffff;
  background: #c9353a;
  border-color: #c9353a;
}
[data-aion-theme="caro"] :is(button.btn, a.btn).btn-danger:is(:hover, :focus-visible) {
  background: #d9464b !important;
  border-color: #d9464b;
}
[data-aion-theme="caro"] :is(button.btn, a.btn).btn-link {
  color: #cdf56a;
  background: transparent;
  border-color: transparent;
}
[data-aion-theme="caro"] .btn:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(205, 245, 106, 0.45);
}
/* Fields: the theme's pills on a dark well, white text (a text area, a box of lines, softly rounded) */
[data-aion-theme="caro"] :is(.form-control, .form-select),
[data-aion-theme="caro"] .dataTables_wrapper :is(.dataTables_filter input, .dataTables_length select) {
  color: #f3f8f1;
  background-color: rgba(6, 22, 18, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
}
[data-aion-theme="caro"] textarea.form-control {
  border-radius: 14px;
}
[data-aion-theme="caro"] :is(.form-control, .form-select):focus {
  border-color: #cdf56a;
  box-shadow: 0 0 0 0.2rem rgba(205, 245, 106, 0.3);
}
[data-aion-theme="caro"] :is(.form-control, .form-select)::placeholder {
  color: #a9c2b6;
}
/* Tables on the green: Bootstrap's dark table, its stripes and hover in white */
[data-aion-theme="caro"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: #f3f8f1;
  --bs-table-border-color: rgba(255, 255, 255, 0.12);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
  --bs-table-striped-color: #f3f8f1;
  --bs-table-hover-bg: rgba(255, 255, 255, 0.08);
  --bs-table-hover-color: #ffffff;
}
[data-aion-theme="caro"] .dataTables_wrapper :is(.dataTables_info, .dataTables_length, .dataTables_filter) {
  color: #d1e3d5;
}
/* The list tables' own white rows (DataTables' stylesheet) and the dashboard's white head, cleared to the green
   (Bootstrap's stripes stay); a row under the pointer takes a lime tint and keeps its light text */
[data-aion-theme="caro"] table.dataTable tbody :is(tr, td) {
  background-color: transparent !important;
}
[data-aion-theme="caro"] table.dataTable tbody tr:hover {
  background-color: rgba(205, 245, 106, 0.12) !important;
}
[data-aion-theme="caro"] .floatThead-wrapper thead {
  background-color: transparent;
}
[data-aion-theme="caro"] body .dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 9999px !important;
}
/* The notices (signed out, sign-in from the app) */
[data-aion-theme="caro"] body.aion-notice {
  background: #244c38;
  color: #f3f8f1;
}