/* ==========================================================================
   Bootstrap 5 theme
   Maps the emoncms look (Bootstrap 2 metrics and colours) onto Bootstrap 5
   variables. Loaded straight after bootstrap.min.css.
   ========================================================================== */

/* -- 1. Palette and tokens ------------------------------------------------
   The look is set here. Components below read these variables.
   Three blocks: values shared by both modes, the light set and the dark set.
   A page or app turns dark with data-bs-theme="dark" on its root element.
   Light and dark declare the same variables, so the dark set also works on <html>. */

/* Shared by both modes. On every theme root, so aliases follow the mode. */
:root, [data-bs-theme] {
    /* Button colours, Bootstrap 2: base, dark (hover and border), darker */
    --ec-btn-info: #49afcd;    --ec-btn-info-dark: #2f96b4;    --ec-btn-info-darker: #1f6377;
    --ec-btn-success: #5bb75b; --ec-btn-success-dark: #51a351; --ec-btn-success-darker: #387038;
    --ec-btn-warning: #faa732; --ec-btn-warning-dark: #f89406; --ec-btn-warning-darker: #ad6704;
    --ec-btn-danger: #da4f49;  --ec-btn-danger-dark: #bd362f;  --ec-btn-danger-darker: #802420;
    --ec-btn-dark: #363636;    --ec-btn-dark-dark: #222;       --ec-btn-dark-darker: #000;

    /* Text and label colours (text-*, bg-*), Bootstrap 2 */
    --bs-info-rgb: 58, 135, 173;
    --bs-success-rgb: 70, 136, 71;
    --bs-warning-rgb: 248, 148, 6;
    --bs-danger-rgb: 185, 74, 72;
    --bs-secondary-rgb: 153, 153, 153;
    --bs-dark-rgb: 51, 51, 51;

    /* Links */
    --bs-link-color: var(--bs-primary);
    --bs-link-color-rgb: var(--bs-primary-rgb);
    --bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.25);

    /* Type */
    --bs-body-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs-font-monospace: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;   /* font-monospace utility */
    --bs-body-font-size: 14px;
    --bs-body-line-height: 20px;

    /* Shape */
    --bs-border-radius: 4px;
    --bs-border-radius-sm: 3px;
    --bs-border-radius-lg: 6px;

    /* emoncms tokens. Mode specific ones are in the sets below. */
    --bg-vis-graph-color: rgba(255, 255, 255, 0);

    /* Energy colours, the same in every app. Values from MyElectricFlow. */
    --ec-energy-use: #0699fa;
    --ec-energy-use-light: #82cbfc;    /* house box, grid to house flow */
    --ec-energy-solar: #dccc1f;
    --ec-energy-import: #d52e2e;
    --ec-energy-export: #2ed52e;
    --ec-energy-battery: #fb7b50;
    --ec-energy-direct: #89ae65;       /* solar used directly */
    --ec-energy-wind: #b7aa1f;
    --ec-energy-text: #333;            /* text on an energy colour */

    /* App time bar */
    --ec-app-nav-rgb: 6, 153, 250;

    /* Dark page frame. Page and footer sit outside the theme root, so shared. */
    --ec-dark-page-bg: #222;
    --ec-dark-footer-bg: #181818;

    --font-subheading: 1rem;
    --font-sm: 13px;
    --font-xs: 12px;
    --font-2xs: 12px;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --radius-card: var(--bs-border-radius);
    --radius-control: var(--bs-border-radius);
}

/* Light set */
:root, [data-bs-theme="light"] {
    /* Primary, the emoncms accent: links, primary buttons, focus, active items */
    --bs-primary: #2a8fc7;
    --bs-primary-rgb: 42, 143, 199;
    --ec-primary-dark: #237bab;        /* hover, border */
    --ec-primary-darker: #1d6189;      /* active */
    --bs-link-hover-color: #1d6189;
    --bs-link-hover-color-rgb: 29, 97, 137;

    /* Alerts, row tints and pastel badges: text, background, border */
    --bs-primary-text-emphasis: var(--ec-primary-dark); --bs-primary-bg-subtle: rgba(var(--bs-primary-rgb), 0.10); --bs-primary-border-subtle: rgba(var(--bs-primary-rgb), 0.35);
    --bs-secondary-text-emphasis: #666;  --bs-secondary-bg-subtle: #efefef; --bs-secondary-border-subtle: #ddd;
    --bs-info-text-emphasis: #3a87ad;    --bs-info-bg-subtle: #d9edf7;    --bs-info-border-subtle: #bce8f1;
    --bs-success-text-emphasis: #468847; --bs-success-bg-subtle: #dff0d8; --bs-success-border-subtle: #d6e9c6;
    --bs-warning-text-emphasis: #c09853; --bs-warning-bg-subtle: #fcf8e3; --bs-warning-border-subtle: #fbeed5;
    --bs-danger-text-emphasis: #b94a48;  --bs-danger-bg-subtle: #f2dede;  --bs-danger-border-subtle: #eed3d7;
    --ec-purple-text-emphasis: #7b3fa0;  --ec-purple-bg-subtle: #f5e6ff;
    --ec-orange-text-emphasis: #b05000;  --ec-orange-bg-subtle: #ffe8d6;

    /* Greys */
    --bs-body-color: #333;
    --bs-body-color-rgb: 51, 51, 51;
    --bs-body-bg: #fff;                /* surfaces: cards, fields, modals */
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-emphasis-color: #000;
    --bs-emphasis-color-rgb: 0, 0, 0;
    --bs-secondary-color: #999;        /* muted text */
    --bs-border-color: #ddd;
    --ec-input-border-color: #ccc;     /* form controls, default button */
    --bs-secondary-bg: #eee;           /* input group text, readonly fields */
    --bs-secondary-bg-rgb: 238, 238, 238;
    --bs-tertiary-bg: #f5f5f5;         /* default button, wells, modal footer */
    --bs-tertiary-bg-rgb: 245, 245, 245;

    /* Component colours */
    --ec-btn-default-hover-bg: #e6e6e6;
    --ec-btn-default-active-bg: #d9d9d9;
    --ec-btn-default-hover-border: #b3b3b3;
    --ec-highlight: #fff;              /* inset line and text shadow on grey */
    --ec-highlight-soft: rgba(255, 255, 255, 0.5);
    --bs-code-color: #d14;
    --ec-code-bg: #f7f7f9;
    --ec-code-border: #e1e1e8;
    --ec-table-striped-bg: #f9f9f9;
    --ec-divider: #e5e5e5;
    --ec-form-text: #595959;

    /* emoncms tokens */
    --bg-body: whitesmoke;             /* page */
    --ec-header-bg: #ddd;              /* panel and group list headers */
    --ec-header-hover-bg: #e0e0e0;
    --ec-row-hover-bg: var(--bs-tertiary-bg);
    --bg-badge: #efefef;
    --bg-input: #fafafa;

    /* Group list rows */
    --ec-list-row-bg: #f0f0f0;
    --ec-list-selected-bg: #d9edf7;
    --ec-list-selected-hover-bg: #c4e3f3;
    --ec-list-status: #ccc;            /* status stripe when a row sets none */

    /* Apps */
    --ec-app-panel-bg: var(--bs-body-bg);
    --ec-app-box-bg: var(--bs-tertiary-bg);   /* flow boxes without a colour */

    --border: var(--bs-border-color);
    --border-strong: #c0c0c0;

    --ec-value-color: var(--bs-emphasis-color);   /* values and table cells */
    --ec-text-secondary: #555;
    --ec-text-muted: #666;

    color-scheme: light;
}

/* Dark set, from the API pages and MyElectricFlow */
[data-bs-theme="dark"] {
    --bs-primary: #44b3e2;
    --bs-primary-rgb: 68, 179, 226;
    --ec-primary-dark: #3a9ac2;
    --ec-primary-darker: #2f7b9c;
    --bs-link-hover-color: #6ec6ea;    /* lighter on dark */
    --bs-link-hover-color-rgb: 110, 198, 234;

    --bs-primary-text-emphasis: var(--bs-primary); --bs-primary-bg-subtle: rgba(var(--bs-primary-rgb), 0.15); --bs-primary-border-subtle: rgba(var(--bs-primary-rgb), 0.3);
    --bs-secondary-text-emphasis: #999;  --bs-secondary-bg-subtle: #2a2a2a; --bs-secondary-border-subtle: #3f3f3f;
    --bs-info-text-emphasis: #9ecbdd;    --bs-info-bg-subtle: rgba(68, 179, 226, 0.15);    --bs-info-border-subtle: rgba(68, 179, 226, 0.3);
    --bs-success-text-emphasis: #5cb85c; --bs-success-bg-subtle: rgba(92, 184, 92, 0.15);  --bs-success-border-subtle: rgba(92, 184, 92, 0.3);
    --bs-warning-text-emphasis: #e7a944; --bs-warning-bg-subtle: rgba(231, 169, 68, 0.15); --bs-warning-border-subtle: rgba(231, 169, 68, 0.3);
    --bs-danger-text-emphasis: #e06c6a;  --bs-danger-bg-subtle: rgba(224, 108, 106, 0.15); --bs-danger-border-subtle: rgba(224, 108, 106, 0.3);
    --ec-purple-text-emphasis: #c9a0e8;  --ec-purple-bg-subtle: rgba(201, 160, 232, 0.15);
    --ec-orange-text-emphasis: #f5a35c;  --ec-orange-bg-subtle: rgba(245, 163, 92, 0.15);

    --bs-body-color: #ccc;
    --bs-body-color-rgb: 204, 204, 204;
    --bs-body-bg: #2a2a2a;             /* surfaces: cards, app panels, fields, modals */
    --bs-body-bg-rgb: 42, 42, 42;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: #999;
    --bs-border-color: #3a3a3a;
    --ec-input-border-color: #444;
    --bs-secondary-bg: #383838;        /* raised: row hover, app header bar */
    --bs-secondary-bg-rgb: 56, 56, 56;
    --bs-tertiary-bg: #262626;         /* recessed: wells, app flow boxes */
    --bs-tertiary-bg-rgb: 38, 38, 38;

    --ec-btn-default-hover-bg: #383838;
    --ec-btn-default-active-bg: #444;
    --ec-btn-default-hover-border: #555;
    --ec-highlight: transparent;
    --ec-highlight-soft: transparent;
    --bs-code-color: #e685b5;
    --ec-code-bg: #1a1a1a;
    --ec-code-border: var(--bs-border-color);
    --ec-table-striped-bg: #333;
    --ec-divider: var(--bs-border-color);
    --ec-form-text: #aaa;

    --bg-body: var(--ec-dark-page-bg);
    --ec-header-bg: #383838;
    --ec-header-hover-bg: #3f3f3f;
    --ec-row-hover-bg: var(--bs-secondary-bg);
    --bg-badge: #2a2a2a;
    --bg-input: #1a1a1a;

    --ec-list-row-bg: #333;
    --ec-list-selected-bg: rgba(68, 179, 226, 0.15);
    --ec-list-selected-hover-bg: rgba(68, 179, 226, 0.25);
    --ec-list-status: #555;

    --ec-app-panel-bg: var(--bs-body-bg);
    --ec-app-box-bg: var(--bs-tertiary-bg);

    --border: var(--bs-border-color);
    --border-strong: #555;

    --ec-value-color: var(--bs-body-color);
    --ec-text-secondary: var(--bs-secondary-color);
    --ec-text-muted: var(--bs-secondary-color);

    color-scheme: dark;
}

/* Text colour follows the mode inside a theme root. body gets it from Bootstrap. */
[data-bs-theme] { color: var(--bs-body-color); }

.text-warning { color: var(--bs-warning-text-emphasis) !important; }

/* Element look, where Bootstrap 5 reboot differs. Values from Bootstrap 2. */
a { text-decoration: none; }
a:where(:hover, :focus) { text-decoration: underline; }  /* :where, so .btn and .nav-link win */

p { margin-bottom: 10px; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    margin: 10px 0;
    font-weight: bold;
    line-height: 20px;
    color: inherit;
}
h1, .h1 { font-size: 38.5px; line-height: 40px; }
h2, .h2 { font-size: 31.5px; line-height: 40px; }
h3, .h3 { font-size: 24.5px; line-height: 40px; }
h4, .h4 { font-size: 17.5px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 11.9px; }
:is(h1, h2, h3, h4, h5, h6) small {
    font-weight: normal;
    line-height: 1;
    color: var(--bs-secondary-color);
}
h1 small { font-size: 24.5px; }
h2 small { font-size: 17.5px; }
:is(h3, h4) small { font-size: 14px; }

/* Lists indent by margin. Page rules reset the margin and expect no padding. */
ul, ol {
    padding: 0;
    margin: 0 0 10px 25px;
}
:is(ul, ol) :is(ul, ol) { margin-bottom: 0; }
.nav { margin-left: 0; }

dl { margin: 1em 0 20px; }
dd { margin: 0 0 0 10px; }
.row > dd { margin-left: 0; }

hr {
    margin: 20px 0;
    border-top: 1px solid var(--bs-secondary-bg);
    opacity: 1;
}

img {
    max-width: 100%;
    height: auto;
}

code, pre {
    font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
    color: var(--bs-body-color);
    border-radius: 3px;
}
code {
    padding: 2px 4px;
    font-size: 12px;
    color: var(--bs-code-color);
    white-space: nowrap;
    background-color: var(--ec-code-bg);
    border: 1px solid var(--ec-code-border);
}
pre {
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 20px;
    word-break: break-all;
    white-space: pre-wrap;
    background-color: var(--bs-tertiary-bg);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}
pre code {
    padding: 0;
    color: inherit;
    white-space: pre-wrap;
    background-color: transparent;
    border: 0;
}

/* -- 2. Buttons ----------------------------------------------------------- */

.btn {
    --bs-btn-padding-x: 12px;
    --bs-btn-padding-y: 4px;
    --bs-btn-font-size: 14px;
    --bs-btn-line-height: 20px;
    --bs-btn-border-radius: 4px;
}
.btn-sm, .btn-group-sm > .btn {
    --bs-btn-padding-x: 10px;
    --bs-btn-padding-y: 2px;
    --bs-btn-font-size: 11.9px;
    --bs-btn-border-radius: 3px;
}
/* Extra small, Bootstrap 2 btn-mini */
.btn-xs {
    --bs-btn-padding-x: 6px;
    --bs-btn-padding-y: 0;
    --bs-btn-font-size: 10.5px;
    --bs-btn-border-radius: 3px;
}

/* Default button, Bootstrap 2 plain .btn */
.btn-default {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: var(--bs-tertiary-bg);
    --bs-btn-border-color: var(--ec-input-border-color);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--ec-btn-default-hover-bg);
    --bs-btn-hover-border-color: var(--ec-btn-default-hover-border);
    --bs-btn-active-color: var(--bs-body-color);
    --bs-btn-active-bg: var(--ec-btn-default-active-bg);
    --bs-btn-active-border-color: var(--ec-btn-default-hover-border);
    --bs-btn-disabled-color: var(--bs-body-color);
    --bs-btn-disabled-bg: var(--ec-btn-default-hover-bg);
    --bs-btn-disabled-border-color: var(--ec-input-border-color);
}

/* Coloured buttons: white text, colours from the palette */
.btn-primary, .btn-info, .btn-success, .btn-warning, .btn-danger, .btn-dark {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #fff;
}
.btn-primary { --ec-btn-c: var(--bs-primary); --ec-btn-c-dark: var(--ec-primary-dark); --ec-btn-c-darker: var(--ec-primary-darker); }
.btn-info    { --ec-btn-c: var(--ec-btn-info);    --ec-btn-c-dark: var(--ec-btn-info-dark);    --ec-btn-c-darker: var(--ec-btn-info-darker); }
.btn-success { --ec-btn-c: var(--ec-btn-success); --ec-btn-c-dark: var(--ec-btn-success-dark); --ec-btn-c-darker: var(--ec-btn-success-darker); }
.btn-warning { --ec-btn-c: var(--ec-btn-warning); --ec-btn-c-dark: var(--ec-btn-warning-dark); --ec-btn-c-darker: var(--ec-btn-warning-darker); }
.btn-danger  { --ec-btn-c: var(--ec-btn-danger);  --ec-btn-c-dark: var(--ec-btn-danger-dark);  --ec-btn-c-darker: var(--ec-btn-danger-darker); }
.btn-dark    { --ec-btn-c: var(--ec-btn-dark);      --ec-btn-c-dark: var(--ec-btn-dark-dark);    --ec-btn-c-darker: var(--ec-btn-dark-darker); }
.btn-primary, .btn-info, .btn-success, .btn-warning, .btn-danger, .btn-dark {
    --bs-btn-bg: var(--ec-btn-c);
    --bs-btn-border-color: var(--ec-btn-c-dark);
    --bs-btn-hover-bg: var(--ec-btn-c-dark);
    --bs-btn-hover-border-color: var(--ec-btn-c-darker);
    --bs-btn-active-bg: var(--ec-btn-c-dark);
    --bs-btn-active-border-color: var(--ec-btn-c-darker);
    --bs-btn-disabled-bg: var(--ec-btn-c);
    --bs-btn-disabled-border-color: var(--ec-btn-c-dark);
}

/* -- 3. Components -------------------------------------------------------- */

/* Badge: Bootstrap 2 label. Pill: Bootstrap 2 badge. */
.badge {
    --bs-badge-padding-x: 4px;
    --bs-badge-padding-y: 2px;
    --bs-badge-font-size: 11.844px;
    --bs-badge-border-radius: 3px;
    line-height: 14px;
    vertical-align: baseline;
}
.badge.rounded-pill {
    --bs-badge-padding-x: 9px;
}
/* Bootstrap 2 links in labels are darker */
a.badge.bg-secondary[href] { background-color: #808080 !important; }
a.badge.bg-danger[href] { background-color: #953b39 !important; }
a.badge.bg-warning[href] { background-color: #c67605 !important; }
a.badge.bg-success[href] { background-color: #356635 !important; }
a.badge.bg-info[href] { background-color: #2d6987 !important; }
a.badge.bg-dark[href] { background-color: #1a1a1a !important; }

/* Pastel pairs Bootstrap lacks, for tags as badge px-2 bg-*-subtle text-*-emphasis */
.bg-purple-subtle { background-color: var(--ec-purple-bg-subtle); }
.text-purple-emphasis { color: var(--ec-purple-text-emphasis); }
.bg-orange-subtle { background-color: var(--ec-orange-bg-subtle); }
.text-orange-emphasis { color: var(--ec-orange-text-emphasis); }

/* Alert: Bootstrap 2 padding. Colours from the palette. */
.alert {
    --bs-alert-padding-x: 14px;
    --bs-alert-padding-y: 8px;
    --bs-alert-margin-bottom: 20px;
    --bs-alert-border-radius: 4px;
    padding-right: 35px;
    text-shadow: 0 1px 0 var(--ec-highlight-soft);
}
.alert h4 { margin: 0; color: inherit; }
.alert .alert-link { color: inherit; }

/* Modal: Bootstrap 2 box, 10% from the top */
.modal {
    --bs-modal-width: 560px;
    --bs-modal-padding: 15px;
    --bs-modal-header-padding: 9px 15px;
    --bs-modal-header-border-color: var(--bs-secondary-bg);
    --bs-modal-title-line-height: 30px;
    --bs-modal-border-color: rgba(0, 0, 0, 0.3);
    --bs-modal-border-radius: 6px;
    --bs-modal-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    --bs-modal-footer-bg: var(--bs-tertiary-bg);
    --bs-modal-footer-border-color: var(--bs-border-color);
    --bs-modal-footer-gap: 0;
}
.modal-backdrop { --bs-backdrop-opacity: 0.8; }
@media (min-width: 768px) {
    .modal { --bs-modal-margin: 10vh; }
}
/* Bootstrap 2 responsive: full width with a small margin */
@media (max-width: 767px) {
    .modal .modal-dialog { max-width: none; margin: 20px; }
}
@media (max-width: 480px) {
    .modal .modal-dialog { margin: 10px; }
}
.modal-content { box-shadow: var(--bs-modal-box-shadow); }
.modal-header h3 { margin: 0; }
.modal-body { max-height: 400px; overflow-y: auto; }
.modal-footer {
    display: block;
    padding: 14px 15px 15px;
    text-align: right;
    box-shadow: inset 0 1px 0 var(--ec-highlight);
}
.modal-footer > * { margin: 0; }
.modal-footer .btn + .btn { margin-left: 5px; }
/* Outline primary: accent text on a tint of the accent, stronger tint on hover and when active */
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-bg: rgba(var(--bs-primary-rgb), 0.12);
    --bs-btn-border-color: rgba(var(--bs-primary-rgb), 0.35);
    --bs-btn-hover-color: var(--bs-emphasis-color);
    --bs-btn-hover-bg: rgba(var(--bs-primary-rgb), 0.25);
    --bs-btn-hover-border-color: rgba(var(--bs-primary-rgb), 0.35);
    --bs-btn-active-color: var(--bs-emphasis-color);
    --bs-btn-active-bg: rgba(var(--bs-primary-rgb), 0.35);
    --bs-btn-active-border-color: rgba(var(--bs-primary-rgb), 0.6);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.btn-close { --bs-btn-close-opacity: 0.2; }

/* Input group: inline and sized to its content, as Bootstrap 2 input-prepend */
.input-group {
    display: inline-flex;
    width: auto;
    flex-wrap: nowrap;
    vertical-align: middle;
    margin-bottom: 10px;
}
.input-group input,
.input-group select,
.input-group textarea { margin-bottom: 0; }
.input-group-text {
    min-width: 16px;
    padding: 4px 5px;
    font-size: 14px;
    line-height: 20px;
    background-color: var(--bs-secondary-bg);
    border-color: var(--ec-input-border-color);
    text-shadow: 0 1px 0 var(--ec-highlight);
}

/* Table: Bootstrap 2 cell padding and borders */
.table {
    --bs-table-color: currentColor;
    --bs-table-striped-color: currentColor;
    --bs-table-hover-color: currentColor;
    --bs-table-active-color: currentColor;
    --bs-table-bg: transparent;
    --bs-table-striped-bg: var(--ec-table-striped-bg);
    --bs-table-hover-bg: var(--bs-tertiary-bg);
    margin-bottom: 20px;
}
.table > :not(caption) > * > * {
    padding: 8px;
    line-height: 20px;
    border-bottom-width: 0;
    border-top: 1px solid var(--bs-border-color);
}
.table-sm > :not(caption) > * > * { padding: 4px 5px; }

/* Form controls: Bootstrap 2 input metrics */
.form-control,
.form-select {
    padding: 4px 6px;
    font-size: 14px;
    line-height: 20px;
    border-color: var(--ec-input-border-color);
    border-radius: var(--bs-border-radius);
}
.form-control:focus,
.form-select:focus {
    border-color: rgba(var(--bs-primary-rgb), 0.6);
    box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
}
.form-select {
    padding-right: 24px;
    background-position: right 6px center;  /* arrow inside the right padding */
}
.form-control-color {
    width: 3rem;
    height: 30px;
    padding: 2px;
}

/* Fixed width fields, inline as Bootstrap 2 inputs. Width includes padding and border.
   Display has class weight only, so .hide still hides the field. */
:where(.form-control, .form-select):is(.input-75, .input-105, .input-165, .input-220, .input-285, .input-545, .input-auto) {
    display: inline-block;
    vertical-align: middle;
}
:is(.form-control, .form-select).input-75 { width: 75px; }
:is(.form-control, .form-select).input-105 { width: 105px; }
:is(.form-control, .form-select).input-165 { width: 165px; }
:is(.form-control, .form-select).input-220 { width: 220px; }
:is(.form-control, .form-select).input-285 { width: 285px; }
:is(.form-control, .form-select).input-545 { width: 545px; }
:is(.form-control, .form-select).input-auto { width: auto; }

/* Full width on phones, except in input groups */
@media (max-width: 767px) {
    :is(.form-control, .form-select):is(.input-285, .input-545):not(.input-group > *) {
        display: block;
        width: 100%;
    }
}

/* Checked checkbox and radio in the primary colour, not Bootstrap's blue */
.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.form-check-input:focus { border-color: rgba(var(--bs-primary-rgb), 0.6); }
input:is([type="checkbox"], [type="radio"]) { accent-color: var(--bs-primary); }

.form-label {
    display: block;
    margin-bottom: 5px;
}
.form-text { color: var(--ec-form-text); }
.form-control[readonly] { background-color: var(--bs-secondary-bg); }

/* Row colours: Bootstrap 2 tints, not striped */
.table-success, .table-danger, .table-warning {
    --bs-table-color: currentColor;
    --bs-table-striped-color: currentColor;
    --bs-table-border-color: var(--bs-border-color);
}
.table-success { --bs-table-bg: var(--bs-success-bg-subtle); --bs-table-striped-bg: var(--bs-success-bg-subtle); }
.table-danger { --bs-table-bg: var(--bs-danger-bg-subtle); --bs-table-striped-bg: var(--bs-danger-bg-subtle); }
.table-warning { --bs-table-bg: var(--bs-warning-bg-subtle); --bs-table-striped-bg: var(--bs-warning-bg-subtle); }

.progress {
    --bs-progress-height: 20px;
    --bs-progress-bg: var(--bs-tertiary-bg);
    --bs-progress-border-radius: var(--bs-border-radius);
    --bs-progress-bar-bg: #4bb1cf;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.dropdown-menu {
    --bs-dropdown-padding-y: 5px;
    --bs-dropdown-border-radius: 6px;
    --bs-dropdown-item-padding-x: 20px;
    --bs-dropdown-item-padding-y: 3px;
    --bs-dropdown-divider-bg: var(--ec-divider);
    --bs-dropdown-divider-margin-y: 9px;
    --bs-dropdown-link-active-bg: var(--bs-primary);
}

/* -- 4. Shell ------------------------------------------------------------- */

/* main sits beside the sidebar with a left margin, so it must not be 100% wide */
main.content-container.container-fluid { width: auto; }

/* Page header: h3 title on the left, actions and help link on the right */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    column-gap: 1rem;
}
/* Line under the page header */
.page-lead { margin: -4px 0 14px; color: var(--ec-text-secondary); }

/* Vue templates stay hidden until mounted */
[v-cloak] { display: none; }

/* Dark page frame, for dark pages below body. The app config panel sets app-config-open. */
body:has(.app-page[data-bs-theme="dark"], .ref-page[data-bs-theme="dark"]),
body.app-config-open { background-color: var(--ec-dark-page-bg); }
body:has(.app-page[data-bs-theme="dark"], .ref-page[data-bs-theme="dark"]) #footer,
body.app-config-open #footer {
    background-color: var(--ec-dark-footer-bg);
    color: #999;
}

/* Page of panels on the grey page background, 1150px wide. On the page root. */
body:has(.panel-page) { background-color: var(--bg-body); }
main.content-container:has(.panel-page) { max-width: 1150px; }
.panel-page { padding-bottom: 2rem; }
.panel-page .panel { margin-bottom: 1rem; }

/* Avatar menu has no caret */
.grav-container.dropdown-toggle::after { display: none; }

/* -- 5. Reference pages ---------------------------------------------------
   API help, Network and the app config panel. One column of cards and rows,
   dark through data-bs-theme="dark" on .ref-page. Width from --ref-width. */

.ref-page {
    max-width: var(--ref-width, 1040px);
    margin: 0 auto;
    padding: 28px 0 48px;
    font-family: var(--bs-body-font-family);
    color: var(--bs-body-color);
}

/* Cards and row boxes are Bootstrap cards */
.ref-page .card {
    --bs-card-bg: var(--bs-body-bg);
    --bs-card-color: var(--bs-body-color);
    --bs-card-border-color: var(--bs-border-color);
    --bs-card-border-radius: 10px;
    --bs-card-inner-border-radius: 9px;
    --bs-card-spacer-x: 24px;
    --bs-card-spacer-y: 20px;
}
.ref-page .card.open { border-color: var(--bs-primary-border-subtle); }

/* Page title, lead and actions */
.ref-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
}
.ref-head > :first-child { flex: 1; min-width: 280px; }
.ref-head h2 { margin: 0; font-size: 26px; line-height: 34px; color: var(--bs-emphasis-color); }
.ref-head p { margin: 2px 0 0; font-size: 15px; line-height: 22px; color: var(--bs-secondary-color); }

/* Card title with its icon */
.ref-card-title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: bold;
    color: var(--bs-emphasis-color);
}

/* Uppercase label for sections and sidebar groups */
.ref-label {
    margin: 0;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

/* Section heading with a count or buttons after the label */
.ref-section { display: flex; align-items: center; gap: 12px; min-height: 34px; margin: 26px 0 10px; }

/* Icon in a circle. ref-icon-sm on rows, colour utilities for a state. */
.ref-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 17px;
    color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
}
.ref-icon-sm { width: 26px; height: 26px; font-size: 13px; }

/* Row in a card: icon, text, values, then actions. is-link rows open in place. */
.ref-row { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 10px 18px; }
.ref-row.is-link { cursor: pointer; border-radius: var(--bs-card-inner-border-radius); }
.ref-row.is-link:hover { background-color: var(--bs-secondary-bg); }
.card.open > .ref-row { border-bottom: 1px solid var(--bs-border-color); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* Code and response block */
.ref-code {
    margin: 0;
    padding: 13px 16px;
    font-family: var(--bs-font-monospace);
    font-size: 12.5px;
    line-height: 20px;
    color: var(--bs-body-color);
    background-color: var(--ec-code-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    word-break: break-all;
}

@media (max-width: 576px) {
    .ref-row { flex-wrap: wrap; gap: 6px 12px; }
}

/* -- Visibility ----------------------------------------------------------- */

/* Last in the file, so it beats the display of the rules above.
   jQuery .show() overrides it, which Bootstrap 5 d-none does not allow. */
.hide { display: none; }