/* Lynx Utility Management - the AWS console look (Cloudscape Design System, visual refresh) with LUM's red where
   Cloudscape has its blue, in a light and a dark mode. The design: ~/lynx-tools/packages/LUM-AWS-Design-HANDOVER.md
   (rules, values, building blocks) and LUM-AWS-Cloudscape-UI-Guide_1.md (what the handover does not cover).
   Loaded after Bootstrap and lynx.css, for the screen only, on the pages that have taken the design on
   ($lum_aws = true before Layout/head-assets.php). Layout/lum-theme.js sets data-theme on <html> (light or dark)
   from the Visual mode setting of the settings panel, before the page is drawn.
   Every colour is a variable with a light and a dark value; the only fixed ones are on the top bar (dark in both
   modes) and white on a red fill. --red fills; --accent is red as text, an outline or a focus ring. */
@font-face { font-family: "Open Sans"; src: url(fonts/OpenSans.woff2) format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
:root {
    color-scheme: light;
    --layout: #ffffff; --box: #ffffff; --shade: #f6f6f9; --hover: #f3f3f7; --pop: #ffffff; --pop-line: #b4b4bb; --edge: transparent;
    --top: #0f141a; --top-text: #f9f9fa; --top-line: #0f141a; --veil: rgba(35, 43, 55, .7);
    --text: #0f141a; --head: #0f141a; --dim: #424650; --empty: #656871; --off: #b4b4bb; --line: #c6c6cd; --line2: #ebebf0; --field: #8c8c94;
    --field-off: #ebebf0; --track: #ebebf0; --grey: #424650;
    --red: #e3000f; --red-hover: #a3000b; --accent: #e3000f; --accent-hover: #a3000b;
    /* a value in a list that opens its own page (.lum-cell-link): the AWS console's link blue - the one blue that is not water */
    --link: #006ce0; --link-hover: #002b66;
    --btn-hover: #fff0f1; --btn-press: #ffd9dc; --selected: #fff0f1; --drop: #ffd9dc;
    --good: #00802f; --good-bg: #effff1; --bad: #db0000; --bad-bg: #fff5f5; --warn: #855900; --warn-bg: #fffef0;
    /* what a colour stands for in LUM: water, solar, electricity (as text or a thin line) */
    --water: #0b63c4; --solar: #855900; --elec: #b04a00;
    /* the same meanings as a fill (a chart's bar or line): brighter than text may be on white */
    --water-fill: #3987e5; --solar-fill: #ffc107; --elec-fill: #fd7e14; --warn-fill: #ffc107;
    --shadow: 0 4px 20px 1px rgba(0, 7, 22, .1);
    --mono: Monaco, Menlo, Consolas, "Courier Prime", Courier, "Courier New", monospace;
    --lum-topnav-h: 48px;
    /* the names the shared LUM parts already use (Layout/lynx.css) */
    --lum-label: var(--text); --lum-icon: var(--dim); --lum-water: var(--water); --lum-solar: var(--solar); --lum-elec: var(--elec);
    --lum-series-1: #688ae8; --lum-series-2: #c33d69;
    /* Bootstrap's own variables, from the same values */
    --bs-body-bg: var(--layout); --bs-body-color: var(--text); --bs-body-font-family: "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif;
    --bs-body-font-size: 14px; --bs-body-line-height: 1.4286; --bs-border-color: var(--line); --bs-secondary-color: var(--dim);
    --bs-emphasis-color: var(--head); --bs-heading-color: var(--head); --bs-link-color: var(--accent); --bs-link-hover-color: var(--accent-hover);
    --bs-link-color-rgb: 227, 0, 15; --bs-link-hover-color-rgb: 163, 0, 11; --bs-secondary-bg: var(--shade); --bs-tertiary-bg: var(--shade);
    --bs-border-radius: 8px; --bs-border-radius-sm: 8px; --bs-border-radius-lg: 16px;
}
html[data-theme="dark"] {
    color-scheme: dark;
    --layout: #161d26; --box: #161d26; --shade: #1b232d; --hover: #131920; --pop: #1b232d; --pop-line: #656871; --edge: #424650;
    --top-line: #424650; --veil: rgba(0, 0, 0, .7);
    --text: #c6c6cd; --head: #ebebf0; --dim: #a4a4ad; --empty: #a4a4ad; --off: #656871; --line: #424650; --line2: #232b37; --field: #656871;
    --field-off: #1b232d; --track: #424650; --grey: #656871;
    --red-hover: #f0222f; --accent: #ff6b72; --accent-hover: #ff9aa0;
    --link: #42b4ff; --link-hover: #75cfff;
    --btn-hover: #1b232d; --btn-press: #333843; --selected: #3a1316; --drop: #5a1a1f;
    --good: #2bb534; --good-bg: #001401; --bad: #ff7a7a; --bad-bg: #1f0000; --warn: #fbd332; --warn-bg: #191100;
    --water: #5aa9ff; --solar: #fbd332; --elec: #ff9a45;
    --water-fill: #5aa9ff; --solar-fill: #fbd332; --elec-fill: #ff9a45; --warn-fill: #fbd332;
    --lum-series-1: #486de8; --lum-series-2: #e07f9d;
    --bs-link-color-rgb: 255, 107, 114; --bs-link-hover-color-rgb: 255, 154, 160;
}

/* ---- base ---- */
html, body { background: var(--layout) !important; color: var(--text) !important; }
body, body * { font-family: "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif; }
body { font-size: 14px; line-height: 20px; }
code, pre, kbd, samp, .font-monospace, .lum-mono { font-family: var(--mono) !important; }
.bi, .bi::before { font-family: bootstrap-icons !important; }
/* bold has a job: headings, button and form labels, column headers, badges, tabs, empty states (lynx.css sets
   everything else to normal) */
h1, h2, h3, h4, h5, h6, .btn, label, .form-label, th, .badge, .nav-tabs .nav-link, .lum-empty, .lum-seg, .lum-settings-label,
.lum-brand, .alert-heading, .lum-tile .v, .modal-title { font-weight: 700 !important; }
/* lynx.css's "* { font-weight: normal !important }" reaches the elements inside: a heading's words, a tile's figure, a
   DataTables heading's sizing copy (without it the headings stand beside their columns) */
.lum-head > span:first-child, .lum-tile .v > .n, table.dataTable thead th .dataTables_sizing { font-weight: 700 !important; }
h1, .h1 { font-size: 24px; line-height: 30px; letter-spacing: -0.02em; color: var(--head); }
h2, .h2 { font-size: 20px; line-height: 24px; letter-spacing: -0.015em; color: var(--head); }
h3, .h3 { font-size: 18px; line-height: 22px; letter-spacing: -0.01em; color: var(--head); }
h4, .h4 { font-size: 16px; line-height: 20px; letter-spacing: -0.005em; color: var(--head); }
h5, .h5, h6, .h6 { font-size: 14px; line-height: 18px; color: var(--head); }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
hr { border-color: var(--line); opacity: 1; }
code { color: inherit; overflow-wrap: anywhere; }
.collapsing { transition: none; }      /* a section opens at once */
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--off); border: 3px solid var(--layout); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--field); }
::-webkit-scrollbar-corner { background: transparent; }
::selection { background: var(--btn-press); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
svg.lum-mark { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---- the dark bar across the top (dark in both modes), the gear, the settings panel ---- */
nav.lum-topnav { background: var(--top) !important; border-color: var(--top-line) !important; color: var(--top-text); min-height: var(--lum-topnav-h); padding-top: 0 !important; padding-bottom: 0 !important; }
nav.lum-topnav .navbar-brand { font-size: 16px !important; font-weight: 700 !important; color: var(--top-text) !important; padding: 0; }
nav.lum-topnav .navbar-brand:hover { color: #ffffff !important; }
nav.lum-topnav .lum-brand-mark { color: #ff4d58; font-weight: 700 !important; }
nav.lum-topnav .lum-topnav-user { color: #c6c6cd !important; font-size: 14px; }
nav.lum-topnav .btn:not(.lum-settings-btn):not(.btn-link) { background: transparent; border-color: #ff6b72; color: #ff6b72; }
nav.lum-topnav .btn:not(.lum-settings-btn):not(.btn-link):hover { background: #1b232d; border-color: #ff9aa0; color: #ff9aa0; }
nav.lum-topnav .btn-link { border: 0 !important; min-height: 0; color: var(--top-text) !important; }
nav.lum-topnav .lum-settings-btn, nav.lum-topnav #sidebarToggle { width: 32px; height: 32px; min-height: 0; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center;
    border: 0 !important; border-radius: 8px !important; background: none; color: var(--top-text) !important; }
nav.lum-topnav .lum-settings-btn:hover, nav.lum-topnav .lum-settings-btn[aria-expanded="true"], nav.lum-topnav #sidebarToggle:hover { background: #424650; color: var(--top-text) !important; }
nav.lum-topnav .lum-settings-btn:focus-visible, nav.lum-topnav #sidebarToggle:focus-visible { outline: 2px solid #ff6b72; outline-offset: -2px; }
.lum-settings-shade { background: transparent; }
.lum-settings { width: 344px; padding: 16px 20px 20px; background: var(--pop); border-left: 2px solid var(--pop-line); box-shadow: var(--shadow); }
.lum-settings-title { font-size: 16px; line-height: 20px; letter-spacing: -0.005em; margin: 0 0 16px; color: var(--head); }
.lum-settings-label { color: var(--head); margin-bottom: 4px; }
.lum-settings-sep { height: 1px; background: var(--line); margin: 20px 0 8px; }
.lum-settings-link { padding: 6px 0; border-radius: 8px; color: var(--accent) !important; font-weight: 400 !important; }
.lum-settings-link:hover, .lum-settings-link:focus-visible { background: none; color: var(--accent-hover) !important; text-decoration: underline; }
.lum-segments { display: inline-flex; gap: 2px; padding: 2px; border: 2px solid var(--field); border-radius: 20px; }
.lum-seg { line-height: 20px; padding: 2px 16px; border: 0; border-radius: 16px; background: transparent; color: var(--dim); cursor: pointer; white-space: nowrap; }
.lum-seg:hover { color: var(--head); background: var(--hover); }
.lum-seg.on, .lum-seg.on:hover { background: var(--red); color: #fff; }

/* ---- the page: 20px at its left and right edge, whatever a container asks for itself ---- */
body .container-fluid { padding-left: 20px !important; padding-right: 20px !important; }
nav.lum-topnav .container-fluid { padding-right: 12px !important; }

/* ---- the title bar (Back, the page's name, filters at the right) and the page's own buttons under it ---- */
.lum-sub-bar { background: var(--layout) !important; border-bottom: 0 !important; padding-top: 16px !important; padding-bottom: 8px !important; margin-bottom: 0 !important; }
.lum-sub-bar h5 { font-size: 20px !important; line-height: 24px; letter-spacing: -0.015em; color: var(--head) !important; }
.lum-sub-bar .border-start { border-color: var(--line) !important; }
.lum-page-bar { background: transparent !important; border-bottom: 0 !important; margin-top: 0; padding-top: 4px !important; padding-bottom: 12px !important; margin-bottom: 0 !important; }
.lum-page-bar .container-fluid { justify-content: flex-end; gap: 8px !important; }

/* ---- buttons: normal (outlined in red), primary (filled: the one main action), link ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 32px; padding: 4px 18px; line-height: 20px; font-size: 14px;
    border: 2px solid var(--accent); border-radius: 20px !important; background: var(--box); color: var(--accent); box-shadow: none !important; white-space: nowrap; text-decoration: none;
    transition: background-color 115ms cubic-bezier(0, 0, 0, 1), border-color 115ms cubic-bezier(0, 0, 0, 1), color 115ms cubic-bezier(0, 0, 0, 1); }
.btn:hover, .btn:focus { border-color: var(--accent-hover); color: var(--accent-hover); background: var(--btn-hover); transform: none; }
.btn:active, .btn.active, .btn:first-child:active, :not(.btn-check) + .btn:active { background: var(--btn-press); border-color: var(--accent-hover); color: var(--accent-hover); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled, .btn.disabled, fieldset:disabled .btn { border-color: var(--off); color: var(--off); background: var(--box); opacity: 1; }
.btn.lum-primary { background: var(--red); border-color: var(--red); color: #fff; }
.btn.lum-primary:hover, .btn.lum-primary:focus, .btn.lum-primary:active { background: var(--red-hover); border-color: var(--red-hover); color: #fff; }
.btn.lum-primary:disabled, .btn.lum-primary.disabled { background: var(--line2); border-color: var(--line2); color: #8c8c94; }
.btn.lum-link, .btn.btn-link { background: transparent; border-color: transparent; }
.btn.lum-link:hover, .btn.btn-link:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.btn-close { filter: none; opacity: .7; }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
/* the round arrow that resets a card, and other buttons that are only an icon */
.lum-card-reset, .lum-icon-btn { color: var(--dim); background: none; border: 0; border-radius: 4px; }
.lum-card-reset:hover, .lum-card-reset:focus, .lum-icon-btn:hover { color: var(--head); }
.lum-view-btn { color: var(--dim); background: var(--box); border-color: var(--line); }
.lum-view-btn:hover, .lum-view-btn:focus-visible { border-color: var(--field); color: var(--head); }
.lum-view-zoom { color: var(--text); }

/* ---- fields ---- */
.form-control, .form-select, select.lum-filter.lum-filter, input.lum-filter.lum-filter {
    height: 32px !important; min-height: 32px !important; padding: 4px 12px !important; font-size: 14px !important; line-height: 20px !important;
    background-color: var(--box) !important; color: var(--text) !important; border: 1px solid var(--field) !important; border-radius: 8px !important; box-shadow: none !important; }
textarea.form-control { height: auto !important; }
.form-select, select.lum-filter.lum-filter { padding-right: 32px !important; }
.form-control:focus, .form-select:focus, select.lum-filter.lum-filter:focus, input.lum-filter.lum-filter:focus, .search-input:focus {
    border-color: var(--accent) !important; outline: 2px solid var(--accent); outline-offset: -1px; box-shadow: none !important; }
/* a field that cannot be changed still shows a value that is read (a locked name, one's own role): the secondary
   text colour, not the faint one of a disabled button */
.form-control:disabled, .form-select:disabled, select.lum-filter.lum-filter:disabled, input.lum-filter.lum-filter:disabled {
    background-color: var(--field-off) !important; border-color: var(--field-off) !important; color: var(--dim) !important; -webkit-text-fill-color: var(--dim); opacity: 1; }
.form-control[readonly] { background-color: var(--field-off) !important; border-color: var(--field-off) !important; }
.form-control::placeholder, input.lum-filter.lum-filter::placeholder { color: var(--empty); opacity: 1; }
/* the calendar icon of a date field: lynx.css inverts it for its dark pages; here the browser draws it for the mode */
html[data-theme] input::-webkit-calendar-picker-indicator { filter: none; opacity: 1; }
.form-label, label { color: var(--head); margin-bottom: 4px; }
.form-check-input { background-color: var(--box); border: 1px solid var(--field); box-shadow: none !important; }
.form-check-input:checked, .form-check-input:indeterminate { background-color: var(--red); border-color: var(--red); }
.form-check-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.form-check-label { font-weight: 400 !important; color: var(--text); }
.form-text { color: var(--empty) !important; }
/* a rate's box of which some months hold another rate than the one it shows, or none, and the note beside it that
   names those months (the Tariff Editor; a generator's rates on Edit Property > Generators) */
.carried { border-color: var(--warn) !important; }
.carried-note { font-size: 12px; line-height: 16px; color: var(--warn); }
/* a rate's box in a table of rates (a generator's rates on Edit Property > Generators, Edit Property > Common area rates) */
.rate-box { width: 110px; text-align: right; display: inline-block; }
/* a field with buttons joined to it (search, the x that clears one filter) */
.input-group > .form-control:not(:last-child), .input-group > .form-select:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group > .form-control:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.input-group > .form-control.lum-end { border-top-right-radius: 8px !important; border-bottom-right-radius: 8px !important; }
.input-group > .btn { min-height: 32px; height: 32px; padding: 4px 10px; border: 1px solid var(--field); border-left: 0; border-radius: 0 !important; background: var(--box); color: var(--dim); }
.input-group > .btn:last-child { border-top-right-radius: 8px !important; border-bottom-right-radius: 8px !important; }
.input-group > .btn:hover { background: var(--hover); color: var(--head); border-color: var(--field); }
.input-group > .btn .small { font-size: 14px; }
.input-group > .btn .bi.text-danger { color: var(--dim) !important; }
.input-group > .btn:hover .bi.text-danger { color: var(--head) !important; }
.input-group-text { background: var(--shade); border-color: var(--field); color: var(--dim); }

/* ---- containers ---- */
.lum-box, .card, .panel, .table-container, .lum-panel, .lum-tile, .lum-chart { background: var(--box) !important; border: 1px solid var(--line) !important; border-radius: 16px !important; color: var(--text); box-shadow: none; }
.lum-tile, .lum-chart { border-radius: 12px !important; }
.panel { padding: 16px 20px 20px; }
/* a container's head: its name at the left, its own buttons at the right, a line under it */
.lum-box-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 8px 20px; border-bottom: 1px solid var(--line); }
.lum-tile .s { font-size: 12px; }
.card-header, .card-footer { background: transparent; border-color: var(--line); }
.lum-head { color: var(--head); font-size: 16px; line-height: 20px; font-weight: 700 !important; border-bottom-color: var(--line); padding-bottom: 8px; }
.lum-head > .bi:first-child { color: var(--dim); }
.lum-head-sub { border-bottom-color: var(--line2); }
.lum-head-toggle:hover .toggle-icon { color: var(--head); }
.lum-tile .k, .lum-chart-figs .k { color: var(--dim); }
.lum-tile .v, .lum-tile .v > .n, .lum-chart-figs .v, .lum-chart .ct { color: var(--head); }
.lum-chart .tip, .lum-est-tip .tooltip-inner { background: var(--pop); border: 2px solid var(--pop-line); border-radius: 8px; color: var(--text); }
.lum-chart-style[aria-pressed="true"] { color: var(--head); border-color: var(--field); }
.lum-chart-expand:hover, .lum-chart-expand:focus-visible, .lum-chart-style:hover, .lum-chart-style:focus-visible { color: var(--accent); border-color: var(--line); }
.lum-ok { color: var(--good) !important; } .lum-warn { color: var(--warn) !important; } .lum-bad { color: var(--bad) !important; }
.lum-empty { color: var(--empty); text-align: center; padding: 40px 10px; }

/* ---- sidebars: the dashboard's menu, the settings beside a report or a slip ---- */
.sidebar { background: var(--layout) !important; border-color: var(--line) !important; color: var(--text); box-shadow: none !important; }
.sidebar .nav-link { color: var(--text) !important; border-radius: 8px; padding: 4px 12px; line-height: 20px; }
.sidebar .nav-link:hover { background: var(--hover); color: var(--head) !important; }
.sidebar .nav-link.active { color: var(--accent) !important; font-weight: 700 !important; background: none; }
.sidebar .nav-link .bi { display: none; }      /* a menu is in words */
.sidebar-section { background: var(--box) !important; border: 1px solid var(--line) !important; border-radius: 12px !important; color: var(--text); box-shadow: none !important; }
.list-group { --bs-list-group-bg: var(--box); --bs-list-group-color: var(--text); --bs-list-group-border-color: var(--line2); --bs-list-group-action-hover-bg: var(--hover); --bs-list-group-action-hover-color: var(--head);
    --bs-list-group-active-bg: var(--selected); --bs-list-group-active-color: var(--text); --bs-list-group-active-border-color: var(--line2); }
.accordion { --bs-accordion-bg: var(--box); --bs-accordion-color: var(--text); --bs-accordion-border-color: var(--line); --bs-accordion-btn-color: var(--head); --bs-accordion-btn-bg: var(--box);
    --bs-accordion-active-bg: var(--box); --bs-accordion-active-color: var(--head); --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-border-radius: 16px; --bs-accordion-inner-border-radius: 15px; }
.progress { --bs-progress-bg: var(--track); --bs-progress-bar-bg: var(--red); --bs-progress-height: 4px; --bs-progress-border-radius: 10px; }
.progress-bar { background-image: none; animation: none; }
.progress-bar.bg-success { background-color: var(--good) !important; }
.list-group-item.active { box-shadow: inset 2px 0 0 var(--accent); }

/* ---- tables ---- */
.table { --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: var(--line2); --bs-table-hover-bg: var(--hover); --bs-table-hover-color: var(--text);
    --bs-table-striped-bg: transparent; --bs-table-striped-color: var(--text); --bs-table-active-bg: var(--selected); color: var(--text); margin-bottom: 0; }
/* rows of 33px; a line under each row and between the columns (the user, 2026-10-06: side borders in the tables) */
.table > thead > tr > th { background: var(--box); color: var(--dim); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); text-transform: none; letter-spacing: 0; font-size: 14px; padding: 6px 12px; white-space: nowrap; }
.table > tbody > tr > td { border-bottom: 1px solid var(--line2); border-right: 1px solid var(--line2); padding: 6px 12px; color: var(--text); background: transparent; }
.table > thead > tr > th:last-child, .table > tbody > tr > td:last-child { border-right: 0; }
.table > tbody > tr:hover > td { background: var(--hover); }
.table th.text-end, .table td.text-end { font-variant-numeric: tabular-nums; }
.table .badge { vertical-align: top; }      /* a tag does not make its row taller */
.table td.fw-bold, .table td.fw-semibold { font-weight: 400 !important; }
table.dataTable.table-hover > tbody > tr:hover > * { box-shadow: none; }
/* a row's own buttons (Edit, Open, Remove) are links in the row, so a row keeps its 33px; a filled one stays a
   small button. Not the buttons joined to a field. */
.table > tbody > tr > td > .btn, .table > tbody > tr > td :not(.input-group) > .btn { min-height: 20px; padding: 0 6px; border: 0; background: transparent; vertical-align: top; }
.table > tbody > tr > td > .btn:hover, .table > tbody > tr > td :not(.input-group) > .btn:hover { text-decoration: underline; }
.table > tbody > tr > td > .btn.lum-primary, .table > tbody > tr > td :not(.input-group) > .btn.lum-primary { min-height: 24px; padding: 0 12px; margin: -2px 0; background: var(--red); color: #fff; text-decoration: none; }
/* a value that opens its own page (a tenant's name, a meter's serial: class lum-cell-link on the <a>): the link blue,
   on whatever ground its row has - plain, under the pointer or chosen. Nothing else turns blue: a row's buttons stay
   red, and the tags and the white documents keep their own colours (the class is not used there). */
html[data-theme] a.lum-cell-link { color: var(--link); text-decoration: none; }
html[data-theme] a.lum-cell-link:hover, html[data-theme] a.lum-cell-link:focus-visible { color: var(--link-hover); text-decoration: underline; }
/* a list that can be put in order (data-sheet-sort="1", Layout/lum-sheet-sort.js): a small triangle at the right edge of
   each heading - an outline, and filled, pointing up or down, in the column that gives the order. It stands in the
   heading's own right padding (the 12px every heading has) and its margins add up to no width: a heading measures
   with its triangle exactly as it does without, on every line and at any width - no table is a pixel wider, no
   heading wraps sooner and its words still end above their figures. No heading is given a position (they stick to
   the top). More air around the triangle is this padding, and every pixel of it is paid by every column. */
.lum-sort { float: right; display: flex; align-items: center; justify-content: center; width: 12px; height: 20px; margin: 0 -12px 0 0; padding: 0; border: 0; border-radius: 4px;
    background: none; color: var(--dim); font-size: 12px; line-height: 1; cursor: pointer; }
.lum-sort:hover, th[aria-sort] > .lum-sort { color: var(--head); }
.lum-sort:focus-visible { outline-offset: -2px; }
/* a sheet whose columns are dragged has a handle on each heading's right edge (Layout/lum-sheet.css, 4px inside it):
   there the triangle keeps clear of it, in 4px of padding of its own */
html[data-theme] table.lum-sheet[data-sheet-sort]:not([data-sheet-fixed="1"]) > thead > tr > th.lum-sortable { padding-right: 16px !important; }
/* the empty state as a table's one row */
.table > tbody > tr > td.lum-empty, .table > tbody > tr:hover > td.lum-empty { padding: 24px 12px; color: var(--empty); background: transparent; }
/* totals under a table */
.table > tfoot > tr > * { background: var(--box); color: var(--head); border-bottom: 1px solid var(--line2); border-right: 1px solid var(--line2); padding: 6px 12px; }
.table > tfoot > tr > :last-child { border-right: 0; }
.table > tfoot > tr:first-child > * { box-shadow: inset 0 1px 0 var(--line); }
/* a table that fills its container (.table-container): 20px at the container's edges, the headings stay in view when
   the container scrolls, the column of row buttons (.lum-row-actions) stays in view when it scrolls sideways */
.table-container { overflow: hidden; }
.table-container .table > * > tr > :first-child { padding-left: 20px; }
.table-container .table > * > tr > :last-child { padding-right: 20px; }
.table-container .table > thead > tr > th { position: sticky; top: 0; z-index: 2; }
.table-container .table > tbody > tr > td { vertical-align: middle; }
.table-container .table > * > tr > .lum-row-actions { position: sticky; right: 0; background: var(--box); box-shadow: -1px 0 0 var(--line2); }
.table-container .table > thead > tr > th.lum-row-actions { z-index: 3; box-shadow: -1px 0 0 var(--line); }
.table-container .table > tbody > tr:hover > td.lum-row-actions { background: var(--hover); }
/* the chosen row of a table with a row menu (lum-sheet.css paints it light blue in both modes) */
html[data-theme] table[data-row-menu] tbody tr.lum-row-selected > td { --bs-table-bg-state: var(--selected); background-color: var(--selected) !important; }
html[data-theme] table[data-row-menu] tbody tr.lum-row-selected > td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
/* the spreadsheet-like tables (Layout/lum-sheet.css; class lum-sheet lum-dark inside .lum-dash-sheet): a container with
   round corners, no column lines, a line under each row; denser than a plain table, as these lists are long. A page
   loads lum-sheet.css after this file, so these rules start at html[data-theme] to come before its own. */
html[data-theme] .lum-dash-sheet .lum-sheet-wrap { background: var(--box); border: 1px solid var(--line); border-radius: 16px; }
html[data-theme] .table-container .lum-dash-sheet .lum-sheet-wrap { border: 0; border-radius: 0; }      /* a sheet inside a container has the container's frame */
html[data-theme] .lum-dash-sheet .lum-sheet-wrap::-webkit-scrollbar { width: 0; height: 12px; }
html[data-theme] .lum-dash-sheet .lum-sheet-wrap::-webkit-scrollbar-thumb { background: var(--off); border: 3px solid var(--box); }
html[data-theme] .lum-dash-sheet .lum-sheet-wrap::-webkit-scrollbar-track { background: transparent; }
html[data-theme] table.lum-sheet.lum-dark { background: var(--box); color: var(--text); font-size: 14px; }
html[data-theme] table.lum-sheet.lum-dark > * > tr > td, html[data-theme] table.lum-sheet.lum-dark > * > tr > th { color: var(--text); }
html[data-theme] table.lum-sheet.lum-dark > tbody > tr > td { background: var(--box); }
html[data-theme] table.lum-sheet.lum-dark th, html[data-theme] table.lum-sheet.lum-dark td { border-right-color: var(--line2) !important; border-bottom-color: var(--line2) !important; padding: 6px 12px !important; line-height: 20px; }
html[data-theme] table.lum-sheet.lum-dark thead th { border-right-color: var(--line) !important; }
html[data-theme] table.lum-sheet.lum-dark th:last-child, html[data-theme] table.lum-sheet.lum-dark td:last-child { border-right-color: transparent !important; }
html[data-theme] table.lum-sheet.lum-dark th:first-child, html[data-theme] table.lum-sheet.lum-dark td:first-child { padding-left: 20px !important; }
html[data-theme] table.lum-sheet.lum-dark thead th { background: var(--box) !important; color: var(--dim) !important; border-bottom: 1px solid var(--line) !important; vertical-align: middle; }
html[data-theme] table.lum-sheet.lum-dark thead th:hover { color: var(--head) !important; }
html[data-theme] table.lum-sheet.lum-dark .lum-sheet-grip:hover, html[data-theme] body.lum-sheet-resizing table.lum-sheet.lum-dark .lum-sheet-grip.lum-active { background: color-mix(in srgb, var(--accent) 45%, transparent); }
html[data-theme] table.lum-sheet.lum-dark tbody tr:hover > td { background: var(--hover) !important; }
html[data-theme] table.lum-sheet.lum-dark tbody tr.lum-row-selected > td { background: var(--selected) !important; color: var(--text) !important; }
html[data-theme] table.lum-sheet.lum-dark tbody tr.lum-row-selected > td:first-child { box-shadow: inset 2px 0 0 var(--accent) !important; }
html[data-theme] table.lum-sheet.lum-dark td.lum-col-selected, html[data-theme] table.lum-sheet.lum-dark th.lum-col-selected { background: var(--selected) !important; color: var(--text) !important; }
html[data-theme] table.lum-sheet.lum-dark tfoot td { background: var(--box) !important; border-top: 1px solid var(--line) !important; }
html[data-theme] table.lum-sheet.lum-dark .text-secondary, html[data-theme] table.lum-sheet.lum-dark .text-muted { color: var(--empty) !important; }
html[data-theme] table.lum-sheet th.lum-col-edge-right, html[data-theme] table.lum-sheet td.lum-col-edge-right { border-right: 3px solid var(--accent) !important; }
html[data-theme] table.lum-sheet th.lum-col-edge-left, html[data-theme] table.lum-sheet td.lum-col-edge-left { border-left: 3px solid var(--accent) !important; }
html[data-theme] .lum-sheet-drop { background: var(--accent); }
/* menus: a right click on a row or a heading, and Bootstrap's own dropdowns */
html[data-theme] .lum-sheet-menu, .dropdown-menu { min-width: 190px; padding: 4px 0; background: var(--pop); border: 2px solid var(--pop-line); border-radius: 8px; box-shadow: var(--shadow); font-size: 14px; }
html[data-theme] .lum-sheet-menu button, .dropdown-item { color: var(--text); padding: 4px 20px; line-height: 20px; font-weight: 400 !important; }
html[data-theme] .lum-sheet-menu button:hover, html[data-theme] .lum-sheet-menu button.lum-open, .dropdown-item:hover, .dropdown-item:focus { background: var(--hover); color: var(--text); }
.dropdown-divider { border-color: var(--line2); }

/* ---- badges, states, messages ---- */
.badge { border-radius: 4px; font-size: 12px; line-height: 20px; padding: 0 8px !important; letter-spacing: 0; }
.badge.bg-secondary, .badge.bg-dark { background: var(--grey) !important; color: #f9f9fa !important; }
/* a tag: the colour as text and a thin line, on a tint of it */
.badge.lum-tag, .badge.bg-opacity-10 { --tag: var(--dim); background: color-mix(in srgb, var(--tag) 12%, transparent) !important; color: var(--tag) !important; border: 1px solid color-mix(in srgb, var(--tag) 55%, transparent) !important; line-height: 18px; }
.badge.text-success, .badge.lum-tag-good { --tag: var(--good); } .badge.text-warning, .badge.lum-tag-warn { --tag: var(--warn); } .badge.text-danger, .badge.lum-tag-bad { --tag: var(--bad); }
.badge.lum-tag-elec { --tag: var(--elec); } .badge.lum-tag-water { --tag: var(--water); } .badge.lum-tag-solar { --tag: var(--solar); }
.alert { border-radius: 12px; border: 2px solid var(--line); background: var(--shade); color: var(--text); padding: 8px 16px; }
.alert-success { border-color: var(--good); background: var(--good-bg); }
.alert-danger { border-color: var(--bad); background: var(--bad-bg); }
.alert-warning { border-color: var(--warn); background: var(--warn-bg); }
.alert-info, .alert-secondary { border-color: var(--line); background: var(--shade); }
.alert .alert-link { color: var(--accent); }
.alert-dismissible .btn-close { padding: 12px 16px; }

/* ---- dialogs, tabs, tooltips ---- */
.modal-content { background: var(--box); color: var(--text); border: 1px solid var(--edge); border-radius: 16px; box-shadow: var(--shadow); }
.modal-header { border-bottom: 1px solid var(--line); padding: 16px 20px 12px; }
.modal-title { font-size: 20px; line-height: 24px; letter-spacing: -0.015em; color: var(--head); }
.modal-body { padding: 16px 20px; }
.modal-footer { border-top: 0; padding: 4px 20px 16px; gap: 8px; }
.modal-backdrop { background: #232b37; } .modal-backdrop.show { opacity: .7; }
html[data-theme="dark"] .modal-backdrop { background: #000000; }
.nav-tabs { border-bottom: 1px solid var(--line); gap: 4px; }
.nav-tabs .nav-link { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none !important; color: var(--dim); font-size: 16px; line-height: 20px; padding: 8px 16px; }
.nav-tabs .nav-link:hover { color: var(--accent); }
.nav-tabs .nav-link.active { color: var(--accent); border-bottom-color: var(--accent); }
.tooltip { --bs-tooltip-bg: var(--pop-line); }
.tooltip-inner { background: var(--pop); color: var(--text); border: 2px solid var(--pop-line); border-radius: 8px; }
.pagination { --bs-pagination-bg: transparent; --bs-pagination-color: var(--dim); --bs-pagination-border-color: transparent; --bs-pagination-hover-bg: var(--hover); --bs-pagination-hover-color: var(--head);
    --bs-pagination-hover-border-color: transparent; --bs-pagination-active-bg: transparent; --bs-pagination-active-color: var(--accent); --bs-pagination-active-border-color: transparent;
    --bs-pagination-disabled-bg: transparent; --bs-pagination-disabled-color: var(--off); --bs-pagination-disabled-border-color: transparent; --bs-pagination-focus-box-shadow: none; }
.page-item.disabled > span.page-link { color: var(--dim); }      /* "Page 1 of 68" is read, it is not a button that is off */

/* ---- DB tags (Tenant Management/db-tags-panel.php, the Shops page; 26 October 2026): photos small in the row, larger in the form ---- */
img.lum-dt-thumb { height: 27px; width: auto; margin-right: 4px; border-radius: 3px; vertical-align: middle; }
a.lum-dt-act { margin-left: 8px; white-space: nowrap; }
.lum-dt-previews { display: flex; flex-wrap: wrap; gap: 10px; }
.lum-dt-preview { width: 112px; color: var(--text); overflow-wrap: anywhere; }
.lum-dt-preview img { display: block; width: 112px; height: 84px; object-fit: cover; border-radius: 4px; background: var(--shade); }
.lum-dt-preview.lum-dt-bad .small { color: var(--bad); }

/* ---- the sign-in pages (Sec/login.php, signin-page.php, change-password.php): no top bar, one dialog-like container
   in the middle of the page. Its head is the band with the logo, dark in both modes as the top bar is (the logo's
   own ground is black: "screen" lets the band show through it); then the title with a line under it, the fields,
   and the buttons at the right; what stands beside the buttons (Forgot password, Send a new code) at the left of
   their row. ---- */
.login-container { padding: 0; overflow: hidden; box-shadow: var(--shadow); }
.login-container > * { margin: 16px 20px 0; }
.login-container > .lum-signin-head { margin: 0; background: var(--top); border-bottom: 1px solid var(--top-line); }
.logo-img { display: block; width: 100%; max-width: 350px; height: 104px; margin: 0 auto; object-fit: cover; object-position: 50% 56%; mix-blend-mode: screen; }
.login-container > .lum-pw-heading { margin: 0; padding: 14px 20px 12px; border-bottom: 1px solid var(--line); }
.lum-signin-foot { margin-top: 20px; }
.login-container > .lum-signin-aside { margin-top: -32px; min-height: 32px; align-self: flex-start; display: flex; align-items: center; }
.lum-signin-aside a { text-decoration: none; }
.lum-signin-aside a:hover { text-decoration: underline; }
.login-container > .lum-signin-legal { margin-top: 20px; margin-bottom: 16px; font-size: 12px; line-height: 16px; text-align: center; color: var(--dim); }
@media (max-width: 420px) { .login-container > .lum-signin-aside { margin-top: 12px; } }

/* ---- Bootstrap's colour classes, read as this design's colours (the page, not the top bar) ---- */
body .text-white, body .text-light { color: var(--head) !important; }
body .text-white-50, body .text-muted, body .text-secondary, body .muted { color: var(--dim) !important; }
body .text-dark { color: var(--text) !important; }
body .text-danger { color: var(--bad) !important; } body .text-success { color: var(--good) !important; } body .text-warning { color: var(--warn) !important; }
body .text-info, body .text-primary { color: var(--water) !important; }
body .bg-dark, body .bg-black, body .bg-white, body .bg-light { background-color: var(--box) !important; }
body .border-secondary, body .border-dark, body .border { border-color: var(--line) !important; }
body .lynx-brand-hover:hover { color: var(--accent) !important; }
nav.lum-topnav .text-white, nav.lum-topnav .text-light { color: var(--top-text) !important; }
nav.lum-topnav .lynx-brand-hover:hover { color: #ffffff !important; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }