/* ================================================================
   STYLES (MAIN.CSS)
   ================================================================ */

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic&display=swap');

* {
    box-sizing: border-box;
    font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

:root {

    /* From Elementor (waterco.co.uk 2026)*/

    --e-global-color-primary: #153155;
    --e-global-color-secondary: #193B68;
    --e-global-color-text: #8B8B8B;
    --e-global-color-accent: #2D8FC0;
    --e-global-color-9debfa6: #2D8FC0;
    --e-global-color-3c2ad25: #FFFFFF;
    --e-global-color-8b564f1: #F1F1F1;
    --e-global-color-fa71d72: #0C0C0E;
    --e-global-color-875a468: #FFFFFF00;
    --e-global-color-f474fbc: #FFFFFF38;
    --e-global-color-ebb6ff1: #193B68;
    --e-global-color-2ec8624: #EAF1FF;
    --e-global-color-e9643b9: #FAFCFF;
    --e-global-typography-primary-font-family: "Manrope";
    --e-global-typography-primary-font-weight: 700;
    --e-global-typography-primary-text-transform: none;
    --e-global-typography-primary-line-height: 1.22em;
    --e-global-typography-secondary-font-family: "Poppins";
    --e-global-typography-secondary-font-weight: 400;
    --e-global-typography-secondary-text-transform: none;
    --e-global-typography-secondary-line-height: 1.5em;
    --e-global-typography-text-font-family: "Poppins";
    --e-global-typography-text-font-size: 16px;
    --e-global-typography-text-font-weight: 400;

    /* Theme Colour palette */
    --theme-palette-1: #22364A; /*deep navy (redesign 2026; was #193B68 waterco-blue)*/
    --theme-palette-2: #2A93CE; /*brand blue accent (redesign 2026; was #0F7AC8 waterco-cyan2)*/
    --theme-palette-3: #1B6C99; /*header mid-blue (redesign 2026; was #2E94C5 waterco-cyan1)*/
    --theme-palette-4: #183F6D; /*aterco-cerulean*/
    --theme-palette-5: #092A48; /*waterco-darkest-blue*/
    --theme-palette-6: #92CEFF; /*waterco-baby-blue*/
    --theme-palette-7: #0071EB; /*login-footer-bottom-blue*/

    /* Neutral colour palette */
    --neutral-palette-base: #2e3338;
    --neutral-palette-00: #f8f9f9;
    --neutral-palette-10: #eaecee;
    --neutral-palette-20: #dcdfe2;
    --neutral-palette-30: #ced2d7;
    --neutral-palette-40: #c0c6cb;

    --neutral-palette-000: #f1f2f3;
    --neutral-palette-100: #d5d9dc;
    --neutral-palette-200: #b9bfc5;
    --neutral-palette-300: #9da6ae;
    --neutral-palette-400: #818c97;
    --neutral-palette-500: #68737e;
    --neutral-palette-600: #515962;
    --neutral-palette-700: #3a4046;
    --neutral-palette-800: #23262a;
    --neutral-palette-900: #0c0d0e;
    --neutral-palette-950: #0a0e16;

     /* Neutral colour palette old
    --neutral-palette-50: #e4e5e7;
    --neutral-palette-100: #c9cbcf;
    --neutral-palette-200: #b0b2b7;
    --neutral-palette-300: #9699a0;
    --neutral-palette-400: #7e818a;
    --neutral-palette-500: #666a74;
    --neutral-palette-600: #4f545f;
    --neutral-palette-700: #3a3f4b;
    --neutral-palette-800: #252b37;
    --neutral-palette-900: #111825;
    --neutral-palette-950: #0a0e16;
    */

    /* Misc */
    --default-even-row-grey: #F0F0F0;
    --readable-red: #D60000;
    --background-pale-blue: #e6F6FF;
    --background-off-white: #FEFFFF;
    --background-grey: #F5F5F5;
    --login-form-bgr-grey-focused: #989fa8;
    --login-form-bgr-grey: #C1C6Cb;
    --login-footer-bottom-blue: #0071EB;
    --close-button-red: #E41A0C;
    --informative-grey: #435256;
    --subtle-grey: #CCC; /* borders mainly */
    --login-form-border-grey: #DEE1E6;
    --darkened-page-as-bgr: rgba(0,0,0,0.8);

    --form-req-field-bgr-blue: #EAFFFF;
    --form-read-only-field-bgr-red: #FCEDED;

    --traffic-light-red: #FF7F7F;
    --traffic-light-yellow:#FFFF7F;
    --traffic-light-green:#7FFF7F;

    --t1-head: #1E3A5F;
    --t1-a: #D6E4F0;
    --t1-b: #EDF3FA;
    /* --t2-head: #3B4169;
    --t2-a: #DCDFF2;
    --t2-b: #EFF0FA; */
    --t2-head: #595959;
    --t2-a: var(--default-even-row-grey);
    --t2-b: white;

    /* ---- Redesign colour scheme (2026) ---- */
    --header-ink: #FFFFFF;
    --page-bg: #FAFBFC;
    --accent: var(--theme-palette-2);       /* #2A93CE brand blue */
    --accent-deep: var(--theme-palette-1);  /* #22364A deep navy */
    --accent-grey: #5A6167;                 /* mid grey accent */
    --header-bg: var(--theme-palette-3);    /* #1B6C99 mid blue */
    --sidebar-bg: #2E3338;
    --sidebar-ink: #C3CBD3;
    --sidebar-ink-active: #FFFFFF;
    --sidebar-active-bg: rgba(42, 147, 206, 0.22);
    --sidebar-active-alt: #2F4859;          /* table row selected/highlight */
    --sidebar-hover-bg: #3D4146;
    --sidebar-divider: rgba(255, 255, 255, 0.10);
    --footer-bg: var(--theme-palette-1);    /* #22364A navy */
    --footer-ink: #D6D9DC;
    --card-bg: #FFFFFF;
    --card-border: #DDE1E6;
    --card-bar: #8A939B;
    --ink-strong: #1D2A35;
    --ink-body: #4A545E;
    --ink-muted: #68727D;
    --table-head-primarybg: #fafcfd;
    --table-head-primaryink: #8a959b;
    --table-row-primarybg: var(--neutral-palette-00);
    --table-row-highlight: var(--neutral-palette-10);
    --table-border: #e4e9eb;
    
    /* Pill colours */
    --pill-neutral-bg: var(--neutral-palette-10);
    --pill-neutral-ink: var(--neutral-palette-500);
    --pill-strong-bg: var(--neutral-palette-500);

    /* shared card recipe (consistency) */
    --card-radius: 10px;
    --card-shadow: 0 1px 3px rgba(29, 42, 53, 0.06), 0 4px 14px rgba(29, 42, 53, 0.05);
    --card-shadow-hover: 0 2px 5px rgba(29, 42, 53, 0.09), 0 8px 22px rgba(29, 42, 53, 0.12);

    /* status palette (badges + coloured table cells) */
    --status-red-bg: #FBE7E9;
    --status-red-ink: #B01B1B;
    --status-amber-bg: #FBEED9;
    --status-amber-ink: #8A5A00;
    --status-green-bg: #E3F2E9;
    --status-green-ink: #1F7A4D;
    --status-neutral-bg: #ECEFF2;
    --status-neutral-ink: #5A6672;
}

/* ================================================================
   COMMON
   ================================================================ */

body,
html {
    background-color: var(--page-bg);
    margin: 0;
    padding: 0;
    width: 100%;
    height:100%;
}

/* get the footer to stick to the bottom */
body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 100%;
    font-size: 1em;
}

main {
    flex: 1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    color: var(--neutral-palette-700);
    font-family: "Montserrat", Sans-serif;
}

h1 {
    font-size: 20px;
    font-weight: 800;
}

h2 {
    font-size: 16px;
}

a:link {
    color: var(--neutral-palette-700);
    text-decoration: none;
}

a:hover, a:active {
    text-decoration: underline;
}

a:visited {
    color: var(--theme-palette-1);
}

em {
    font-weight: bold;
    font-style: normal;
}

pre {
    margin-top: 0;
}

img {
    border: black solid 1px;
    border-radius: 5px;
}

img.empty-img {
    border: 0px;
}

.icons {
    --icon-primary:#000;
    width: 16px;
    height: 16px;
    opacity:1;
}

span.more-info {
    text-decoration: dotted underline;
}

#CSV-data-output pre {
    margin-bottom: 0px;
}

.split-box {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

#image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
}

#image-grid figure {
    margin: 0px;
}

#permission-display {
    width: 50%
}

/* ================================================================
   HEADER
   ================================================================ */

.header {
    position: fixed;
    top: 0;
    z-index: 10;
    background-color: var(--header-bg);
    height: 48px;
    width: 100%;
    border-color: var(--header-ink);
    border-style: solid;
    border-width: 0px 0px 0px 0px;
    color: var(--header-ink);
    line-height: 1; /* header text uses 1em line boxes (keeps global line-height elsewhere) */
    transition: height 0.5s ease; /* Add a transition effect (when scrolling - and font size is decreased) */
}

.header .wrapper {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin: 0 0 0 0;
    height: 100%;
    padding: 0 20px 0 20px;
}

.header.shrunk {
    height: 30px;
}

.header__appbranding {
    display: flex;
    height: 100%;
    align-items: center;
    gap: 12px;
}

.header__appbranding a {
    color: var(--header-ink);
    text-align: left;
    margin: 0 0 0 0;
}

.header__appbranding a:hover, a:visited, a:active {
    text-decoration: none;
}

.header__logo {
    height: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.header__logo a {
    display: inline-flex;
    align-items: center;
    height: 100%;
}

.header__logo svg {
    height: 32px;
    width: auto;
    display: block;
}

.header__apptagline {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0px;
    pointer-events: none;
}

#partner-logos {
    display: none;
}

.header .wrapper a {
    display: inline-flex;
    align-items: center;
}

.header .wrapper .menu {
    display: flex;
    align-items: center;
}

.header .wrapper .menu a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 100%;
    padding: 5px 16px;
    margin: 0 0px;
    text-decoration: none;
    color: white;
    font-weight: 400;
    font-size: 16px;
    line-height: 16px;
    border: 1px, solid, #FFFFFF00;
}

.header .wrapper .menu a svg {
    fill: white;
    stroke: none;
    width: 16px;
    height: 16px;
}

.header .wrapper .menu a:hover,
.header .wrapper .menu a:active {
    border-color: #FFFFFF42;
}

.header .wrapper .menu a:last-child {
    margin-right: 0;
}

.header .wrapper .menu a.profile-link svg {
    fill: white;
    stroke: white;
}

/* ================================================================
   BANNER / HERO (HOME PAGE)
   ================================================================ */

.banner {
    margin: 0 0px;
    padding: 5px;
    height: 400px; 
    line-height: 0em;
    background-image: url("../media/home-banner.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: contain;
}

/* ================================================================
   PAGE (GRID / MAIN)
   ================================================================ */

.page__grid {
    display: flex;
    flex: 100%;
    margin-top: 48px; /* clear the fixed header */
}

/* Simple pages whose <main> is itself .page__main (no grid) still clear the header */
main.page__main {
    margin-top: 48px;
}

.page__main {
    width: calc(100% - 60px);
    position: relative;
    min-width: 33.3%;
    margin: 0 30px 0 30px;
}

.page__main dl {
    font-size: 14px;
    margin: 0px;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.6rem 1.6rem;
}

.page__main dl dt {
    color: var(--theme-palette-2);
    font-weight: 700;
    text-align: right;
}

.page__main dl dd {
    margin: 0px;
}

.page__main .date-range {
    display: flex;
    flex-direction: column;
    /* stack rows */
    gap: 4px;
}

.page__main .date-input {
    display: flex;
    flex-direction: column;
}

.page__main .date-input input {
    border: 1px solid;
    border-radius: 3px;
}

/* ================================================================
   PAGE (BREADCRUMB)
   ================================================================ */

.page__breadcrumb {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin: 0px;
    padding: 16px 0px 14px 35px;
}

.page__breadcrumb * {
    font-size: 14px !important;
}

.page__breadcrumb li+li::before {
    /* content: "›"; */
    content: "\203A";
    /* Hopefully \203A always prints as a right arrow. */
    padding: 0 8px;
    color: var(--informative-grey);
}

.page__breadcrumb li a {
    text-decoration: none;
    color: var(--informative-grey);
}

.page__breadcrumb li a:hover {
    text-decoration: underline;
}

.page__breadcrumb li[aria-current="page"] {
    color: var(--informative-grey);
    font-weight: bold;
}

/* ================================================================
   PAGE (TITLE)
   ================================================================ */

.page__title {
    align-items: center;
    padding: 5px 0px 12px 35px;
}

.page__title h1 {
    margin: 0;
    padding: 0;
    font-weight: 600;
    color: var(--neutral-palette-800);
}

.page__title p {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: var(--informative-grey);
}

/* ================================================================
   SECTION (GRID)
   ================================================================ */

.section__grid {
    width:100%;
    margin: 0;
    padding: 0px 0px 16px 0px;
}

.section__grid p {
    padding: 0;
    margin: 0;
}

/* ================================================================
   SECTION (COLUMNS)
   ================================================================ */

.section__cols {
    display: flex;
    flex-wrap: wrap;
    margin: 0px;
    padding: 0px;
    gap: 4px;
}

.section__col--full {
    flex-grow: 2;
    flex: 60%;
    width: 100%;
    margin: 0 0 0 0px;
    padding: 0px 0px 0px 0px;
    border-radius: 5px;
}

.section__col--zero {
    flex-grow: 1;
    flex:10%;
    min-width: 257px;
    width:257px;
    margin: 0px 0;
    padding: 0px;
    border-radius: 5px;
}

.section__col--first {
    flex-grow: 1;
    flex: 30%;
    min-width:257px;
    margin: 0 0 0 0px;
    padding: 10px;
    border-radius: 5px;
}

.section__col--map {
    flex: 2;
    min-width: 260px;
}

.section__col--table {
    flex: 3;
    min-width: 300px;
}

.section__col--second {
    flex-grow: 2;
    flex: 40%;
    min-width:257px;
    margin: 0 0 0 10px;
    padding: 10px;
    border-radius: 5px;
}

/* ================================================================
   SECTION (CONTENT)
   ================================================================ */

.section__content {
    width:auto;
    margin: 5px 0 0 0;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    border: 1px solid var(--card-border);
    background: var(--card-bg);
}

.section__content--noborder {
    border-radius: 0px;
    border: none;
}

.border___styled-top {
    border-top: 3px solid var(--card-bar);
}

.border___styled-left {
    border-left: 5px solid var(--card-bar);
}

.accordion__arrow {
    flex-shrink: 0;
    transition: transform 0.2s ease;
    transform: rotate(180deg);
    width: 24;
    height: 24;
}

.section__content.accordion--collapsed .accordion__arrow {
    transform: rotate(0deg);
}

.section__content.accordion--collapsed > *:not(.section__header) {
    display: none;
}

/* ================================================================
   SECTION (HEADER)
   ================================================================ */

.section__header {
    display: grid;
    grid-template-columns: auto auto;
    margin: 0 0 0 0;
}

.section__title {
    display: flex;
    flex-direction: column;
    justify-content: left;
}

.section__title h2 {
    margin: 0;
    padding: 0px 0px 4px 10px;
}

.section__title .section__tagline {
    padding-left: 10px;
    text-align: left;
    font-size: 0.85em;
}

.section__toggle {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    text-align: right;
    cursor: pointer;
    user-select: none;
}

/* ================================================================
   FILTER SECTION
   ================================================================ */

.filter-section {
    padding: 14px 20px;
    border-radius: 8px;
}

.filter-section .section__header {
    cursor: pointer;
    user-select: none;
    align-items: center;
}

.filter-section .section__title {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.filter-icon {
    color: var(--theme-palette-1);
    flex-shrink: 0;
    opacity: 0.75;
}

.filter-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--neutral-palette-500);
    white-space: nowrap;
}

.filter-summary {
    font-size: 12px;
    color: var(--neutral-palette-400);
}

.filter-section__body {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 14px;
}

.filter-section__body > .section__content {
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0;
    min-width: 180px;
}

.filter-section__body > .section__content:first-child {
    flex: 2;
}

.filter-section__body > .section__content:last-child {
    flex: 3;
}

.filter-section__body h2 {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--neutral-palette-500);
    margin: 0 0 10px 0;
    padding: 0;
}

.filter-section__body #schemeSelect {
    width: 100%;
    padding: 8px 12px;
    border-radius: 7px;
    border: 1px solid var(--subtle-grey);
    font-size: 13px;
    font-family: inherit;
    color: var(--neutral-palette-700);
    background: var(--background-off-white);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.filter-section__body #schemeSelect:focus {
    border-color: var(--theme-palette-2);
    box-shadow: 0 0 0 2px rgba(42, 147, 206, 0.12);
}

.filter-section__body #deselectScheme {
    display: block;
    margin-top: 10px;
    background: none;
    border: none;
    color: var(--header-ink);
    background: var(--theme-palette-2);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}

.filter-section__body #deselectScheme:hover, #deselectScheme::selection, #deselectScheme:active {
    text-decoration: none;
    background: var(--accent-deep);
}

.filter-section__body .custom-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--neutral-palette-500);
    cursor: pointer;
}

.filter-section__body .filter-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.filter-section__body .filter-table thead {
    display: none;
}

.filter-section__body .filter-table tbody tr {
    border-bottom: 1px solid var(--neutral-palette-50);
}

.filter-section__body .filter-table tbody td {
    padding: 4px 2px;
    color: var(--neutral-palette-700);
}

.filter-section__body .filter-table input[type="checkbox"] {
    accent-color: var(--theme-palette-2);
    width: 14px;
    height: 14px;
    cursor: pointer;
}

/* ================================================================
   STYLED TABLE
   ================================================================ */

.styled-table {
    border-collapse: separate;
    /*border: var(--neutral-palette-700) 1px solid;*/
    border-spacing: 0;
    width:100%;
}

/* All cells: black border and padding */
.styled-table td,
.styled-table th {
    padding: 4px 4px 4px 10px;
    text-align: left;
    vertical-align: top;
}

/* Header row styling */
.styled-table thead th {
    background-color: white;
    color: var(--neutral-palette-700);
    font-weight: 600;
    position: sticky;
    top: 0;
    line-height: 1.2em;
    border-bottom: var(--neutral-palette-300) 1px solid;
}

.styled-table>tbody>tr:nth-child(odd) {
    background-color: white;
}

.styled-table>tbody>tr:nth-child(even) {
    background-color: var(--default-even-row-grey);
}

.styled-table tbody tr.odd-row {
    background-color: white;
}

.styled-table tbody tr.even-row {
    background-color: var(--default-even-row-grey);
}

.styled-table tbody .selected-row {
    background-color: var(--sidebar-active-alt) !important;
    color: white;
    font-weight: 600;
}

.styled-table tbody .highlight {
    background-color: var(--sidebar-active-alt) !important;
    color: white;
}

/* Bright-blue left accent bar, mirroring the active sidebar nav item.
   inset box-shadow renders reliably with border-collapse: separate and
   avoids the layout shift a real border-left would cause. */
.styled-table tbody .selected-row td:first-child,
.styled-table tbody .highlight td:first-child {
    box-shadow: inset 3px 0 0 0 var(--accent);
}

.styled-table tbody td.mid-cell-text {
    text-align: center;
}

.styled-table>tbody>tr.clickable:hover,
.styled-table>tbody>tr.clickable:focus {
    background-color: var(--theme-palette-6);
}

/* Scheme manager: scheme rows */
.styled-table tbody tr.scheme-row {
    background-color: #ffffff !important;
    font-weight: 600;
}

/* Scheme manager: site rows nested under each scheme */
.styled-table tbody tr.site-row {
    background-color: var(--default-even-row-grey) !important;
}

.styled-table tbody tr.site-row td.site-indent {
    padding-left: 28px;
}

.styled-sub-table {
    /*border: solid 1px var(--neutral-palette-700);*/
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

.styled-sub-table td,
.styled-sub-table th {
    padding: 2px;
    text-align: left;
    vertical-align: text-top;
    font-size: 14px;
}

.table-container {
    width: 100%;
    /* max-height: 638px; */
    /* Set vertical scroll */
    /* overflow-y: auto; */
    /*box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.4), -5px 0 5px -5px rgba(0, 0, 0, 0.4);*/
    /*border: solid var(--neutral-palette-700) 1px;*/
}

.table-wrapper {
    margin: 25px 0 0 0;
}


.table-compact {
    font-size: 13px;
    padding: 6px 8px;
}

.status-inactive {
    color: var(--neutral-palette-300);
}

#status-inactive {
    color: var(--neutral-palette-300);
}

.hidden-row {
    display: none;
}

/* Status chips */
.status-chip {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.status-chip.active {
    background: rgba(42, 147, 206, 0.12);
    color: var(--theme-palette-2);
}

.status-chip.inactive {
    background: var(--neutral-palette-50);
    color: var(--neutral-palette-400);
}

/* Expandable location rows */
.location-summary {
    cursor: pointer;
    user-select: none;
}

.location-summary:hover td {
    background: var(--neutral-palette-100);
}

.location-detail {
    display: none;
}

.location-detail.open {
    display: table-row;
}

.location-detail > td {
    padding: 0;
    background: var(--background-grey);
    border-bottom: 1px solid var(--neutral-palette-50);
}

.location-detail__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    padding: 10px 14px 10px 64px;
}

.detail-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--neutral-palette-400);
    margin-right: 5px;
}

.detail-value {
    font-size: 12px;
    color: var(--neutral-palette-700);
}

.expand-toggle {
    color: var(--neutral-palette-300);
    text-align: right;
    padding-right: 8px;
    user-select: none;
}

.expand-arrow {
    transition: transform 0.2s ease;
    display: block;
    margin-left: auto;
}

.location-summary.open .expand-arrow {
    transform: rotate(180deg);
}

#info-table-container {
    display: flex;
    gap: 10px;
}

#summary-table {
    width: 60%;
    height: fit-content;
}

.bottom-row {
    display: flex;
    gap: 20px;
    align-items: flex-end;
    flex-wrap: wrap;
}

/* ================================================================
   MAP MARKUP
   ================================================================ */

#key-table * {
    font-size: small !important;
    padding: 0px;
}

.map-wrapper {
    position: relative;
    margin: 16px 0 0 0;
}

#map-div {
    border: solid var(--neutral-palette-100) 1px;
    width: 100%;
    min-width: 257px;
    height: 480px;
    border-radius: 5px;
}

.map-overlay {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.8em;
}

.map-key {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 1em;
}

.table-marker {
    display:inline-block;
    width:16px;
    height:16px;
    border-radius:50%;
    padding: 0;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.6), 0 2px 4px 0 rgba(0, 0, 0, 0.19);
    /*background color is filled in via php in DOM*/
}

.key-icon {
    width:16px;
    height:16px;
    border-radius:50%;
    padding: 0;
    margin: 0 8px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.6), 0 2px 4px 0 rgba(0, 0, 0, 0.19);
}

.key-label {
    font-size: 1em;
}

#coords {
    font-size: 1em;
    white-space: nowrap;
}

/* ================================================================
   PAGINATION
   ================================================================ */

.pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}

.pagination-info {
    width: 100%;
    margin-top: 8px;
    font-size: 14px;
    color: var(--informative-grey);
    text-align: center;
}

.pagination-dots {
    padding: 0 6px;
    color: var(--informative-grey);
    display: inline-flex;
    align-items: center;
}

.pagination-jump-group {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.pagination-jump-group input {
    margin: auto;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-link:focus {
    position: static;
    width: auto;
    height: auto;
    padding: 8px;
    background: black;
    color: white;
    z-index: 1000;
}

/* ================================================================
   DATA FORM
   ================================================================ */

.data-form {
    width:33%;
}

.data-form .data-form-part {
    margin-top: 10px;
}

.data-form .data-form-part label,
.data-form .data-form-part input,
.data-form .data-form-part select,
.data-form .data-form-part textarea {
    display: block;
    margin-bottom: 8px;
}

.data-form .data-form-part label {
    font-weight: 500;
    font-size: 14px;
    margin: 0;
}

.data-form .data-form-part .form-tag {
    padding: 0;
    font-weight: 400;
    font-size: smaller;
    font-style: italic;
    color: var(--neutral-palette-800);
}

.data-form .data-form-part input, select, textarea {
    border: solid 1px var(--subtle-grey);
    border-radius: 3px;
    width: 100%;
}

.data-form textarea {
    resize: vertical;
}

.data-form .data-form-part input:required,
.data-form .data-form-part select:required {
    background-color: var(--form-req-field-bgr-blue);
}

.data-form .data-form-part input:read-only {
    background-color: var(--form-read-only-field-bgr-red);
}

.data-form .data-form-part input[type="file"] {
    /*I have no idea why this is necessary but file input is treated as readonly even when it is not and i cant find any mention of this online but i know that that is what is happening.*/
    background-color: var(--form-req-field-bgr-blue);
}

.data-form span.req-indicator {
    color: var(--readable-red);
}

.data-form span.extra-info {
    font-weight: bold;
    font-size: larger
}

.data-form fieldset {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Creates 4 equal-width columns */
    gap: 4px;
}

.form-row {
    display: flex;
    gap: 1em;
}

/* ================================================================
   FORM (FOR LOGIN)
   ================================================================ */

.form {
    display: flex;
    flex-flow: column;
    width: 100%;
}

.form .form-label {
    display: block;
    padding: 20px 0 10px 0;
    font-weight: 500;
    color: var(--neutral-palette-800);
}

.form .form-group {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.form .form-group .form-icon-left {
    fill: var(--login-form-bgr-grey);
    width: 40px;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    pointer-events: none;
}

.form .form-group .form-icon-left {
    left: 0;
}

.form .form-group .form-icon-left+.form-input {
    padding-left: 40px;
}

.form .form-group:focus-within .form-icon-left {
    fill: var(--login-form-bgr-grey-focused);
}

.form-group--last {
    margin-bottom: 25px;
}

.form .form-input {
    width: 100%;
    height: 43px;
    border: 1px solid var(--login-form-border-grey);
    padding: 0 15px;
    border-radius: 4px;
    color: black;
}

.form .form-input::placeholder {
    color: var(--login-form-bgr-grey);
}

/* Location picker: grey the select like a placeholder while the disabled
   "-- Select location --" option is the current value; normal colour once a
   real location is chosen. Real options in the open list stay dark. */
#selected_location:has(option[value=""]:checked) {
    color: var(--login-form-bgr-grey);
}

#selected_location option {
    color: black;
}

/* ================================================================
   SIDEBAR
   ================================================================ */

.sidebar {
    margin: 0px 0;
    padding: 10px;
    border-radius: 0;
    box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.4);
    /* scrolls with the page; the dark panel stretches to the full column height.
       overflow stays visible so the inner .sidebar__sticky can pin to the viewport
       (the collapse clip is handled per-item on the toggle btn and nav links). */
    font-size: 0.9em;
    background-color: var(--sidebar-bg);
    color: var(--sidebar-ink);

    /* animation */
    transition: width 0.3s ease, transform 0.3s ease;
}

.sidebar-state {
    text-align: right;
}

.sidebar--expanded {
    width: 257px;
    min-width: 257px;
}

.sidebar--collapsed {
    width: 57px;
    min-width: 57px;
}

.sidebar--collapsed .section__content {
    display: none;
}


.sidebar .icons {
    --icon-primary: var(--sidebar-ink);
    transition: 0.3s ease;
    width: 32px;
    height: 32px;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ================================================================
   SIDEBAR STICKY NAV CLUSTER
   ================================================================ */

/* Pins the toggle + nav links just below the 48px fixed header so they stay
   visible as the page (and the rest of the sidebar) scrolls. Opaque so the
   widgets scrolling beneath it don't show through. */
.sidebar__sticky {
    position: sticky;
    top: 48px;
    z-index: 1;
    background-color: var(--sidebar-bg);
    /* pull out to the sidebar edges so the opaque band covers the full width */
    margin: -10px -10px 0;
    padding: 10px 10px 0;
}

/* ================================================================
   SIDEBAR TOGGLE BUTTON
   ================================================================ */

.sidebar__toggle-btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 6px 10px 10px;
    width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    border-bottom: 1px solid var(--sidebar-divider);
    margin-bottom: 4px;
    border-radius: 0;
    overflow: hidden;
    white-space: nowrap;
}

.sidebar__toggle-btn .icons {
    --icon-primary: var(--sidebar-ink);
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: --icon-primary 0.15s ease;
}

.sidebar__toggle-btn:hover .icons {
    --icon-primary: var(--sidebar-ink-active);
}

.sidebar__toggle-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--sidebar-ink);
    letter-spacing: 0.02em;
}

.sidebar--collapsed .sidebar__toggle-btn {
    justify-content: center;
}

.sidebar--collapsed .sidebar__toggle-label {
    display: none;
}

/* ================================================================
   SIDEBAR NAV
   ================================================================ */

.sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 3px;   /* uniform spacing between every top-level item (links + accordion groups) */
    padding: 4px 0 8px;
    border-bottom: 1px solid var(--sidebar-divider);
    margin-bottom: 6px;
}

.sidebar__nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 5px;
    text-decoration: none;
    color: var(--sidebar-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;   /* shared by plain links AND accordion toggles so their heights match */
    white-space: nowrap;
    overflow: hidden;
    border-left: 3px solid transparent;
    transition: background 0.15s ease, color 0.15s ease;
}

.sidebar__nav-link .icons {
    --icon-primary: var(--sidebar-ink);
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.sidebar__nav-link:link,
.sidebar__nav-link:visited {
    color: var(--sidebar-ink);
}

.sidebar__nav-link:hover,
.sidebar__nav-link:active {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-ink-active);
    text-decoration: none;
}

.sidebar__nav-link:hover .icons,
.sidebar__nav-link:active .icons {
    --icon-primary: var(--sidebar-ink-active);
    opacity: 1;
}

.sidebar__nav-link--active,
.sidebar__nav-link--active:link,
.sidebar__nav-link--active:visited {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-ink-active);
    border-left-color: var(--accent);
    font-weight: 600;
}

.sidebar__nav-link--active .icons {
    --icon-primary: var(--sidebar-ink-active);
    opacity: 1;
}

.sidebar--collapsed .sidebar__nav-link {
    justify-content: center;
    padding: 7px 0;
    gap: 0;
}

.sidebar--collapsed .sidebar__nav-label {
    display: none;
}

/* ================================================================
   SIDEBAR ACCORDION (nested sub-nav)
   Generic: works for any .sidebar__nav-group (Config now; Sites/
   Maintenance/Resources later). Toggle reuses .sidebar__nav-link.
   ================================================================ */

.sidebar__nav-group {
    display: flex;
    flex-direction: column;
}

/* the collapsible parent: a <button> wearing .sidebar__nav-link's look.
   NB: do NOT use `font: inherit` here — the shorthand resets line-height and
   font-size, inflating the button's line box so it renders taller than the
   plain <a> nav-links. Match the link's font metrics explicitly instead, and
   pin a small line-height so the 20px icon governs the row height for both. */
.sidebar__nav-toggle {
    width: 100%;
    margin: 0;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;   /* match nav-link active-bar geometry */
    cursor: pointer;
    appearance: none;
    font-family: inherit;
    font-size: 14px;                       /* match .sidebar__nav-link */
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
}

.sidebar__nav-caret {
    margin-left: auto;                     /* push chevron to the far right */
    display: inline-flex;
    align-items: center;
    transition: transform 0.25s ease;
}

.sidebar__nav-caret .icons {
    width: 16px;
    height: 16px;
    --icon-primary: var(--sidebar-ink);
}

.sidebar__nav-group--open > .sidebar__nav-toggle .sidebar__nav-caret {
    transform: rotate(90deg);              /* points down when expanded */
}

/* collapsible container — animate height with the grid 0fr->1fr trick
   (no JS height measuring; works for any item count) */
.sidebar__subnav {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
}

.sidebar__nav-group--open > .sidebar__subnav {
    grid-template-rows: 1fr;
}

.sidebar__subnav-inner {
    overflow: hidden;                      /* required for the grid animation */
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* ONLY horizontal spacing here. Any vertical padding/margin gives the box a
       non-zero border-box height when collapsed, so the left guide-line border
       renders as a stub ("bleed"). Open-state top/bottom spacing comes from the
       child headings'/links' own padding; between-item spacing is .sidebar__nav's gap. */
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid var(--sidebar-divider);   /* nesting guide line */
}

.sidebar__subnav-heading {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sidebar-ink);
    opacity: 0.55;
    padding: 8px 10px 2px;
}

.sidebar__subnav-link {
    display: block;
    padding: 6px 10px 6px 16px;   /* extra left indent so links sit in from their heading */
    border-radius: 5px;
    font-size: 13px;
    color: var(--sidebar-ink);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-left: 3px solid transparent;
    transition: background 0.15s ease, color 0.15s ease;
}

.sidebar__subnav-link:link,
.sidebar__subnav-link:visited {
    color: var(--sidebar-ink);
}

.sidebar__subnav-link:hover,
.sidebar__subnav-link:active {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-ink-active);
    text-decoration: none;
}

.sidebar__subnav-link--active,
.sidebar__subnav-link--active:link,
.sidebar__subnav-link--active:visited {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-ink-active);
    border-left-color: var(--accent);
    font-weight: 600;
}

/* icons-only mode: no caret, no sub-nav */
.sidebar--collapsed .sidebar__nav-caret,
.sidebar--collapsed .sidebar__subnav {
    display: none;
}

/* ================================================================
   BUTTONS
   ================================================================ */

.my-button, a.my-button:link, a.my-button:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    appearance: none;
    cursor: pointer;
    background-color: var(--accent);
    color: white;
    fill: white;
    font-weight: 600;
    font-size: 14px;
    gap: 7px;
    box-shadow: none;
    border-radius: 8px;
    border: 1px solid transparent;
    margin: 0px;
    padding: 6px 14px;
    line-height: 1em;
    transition: filter .12s, background-color .12s, color .12s, border-color .12s;
}

.my-button.dark {
    background-color: var(--theme-palette-1);
}

.my-button:hover, a.my-button:hover, a.my-button:active {
    filter: brightness(0.92);
    color: white;
    fill: white;
}

.my-button svg {
    width: 15px;
    height: 15px;
    margin: 0;
}

/* Ghost / outline variant — used for Edit and secondary actions
   (mirrors the schemeManager .sb-icon-btn look). */
.my-button--ghost, a.my-button--ghost:link, a.my-button--ghost:visited {
    background-color: #fff;
    color: #54616a;
    fill: #54616a;
    border-color: var(--table-border);
}
.my-button--ghost:hover, a.my-button--ghost:hover, a.my-button--ghost:active {
    filter: none;
    background-color: #f1f8fc;
    border-color: #9cc8de;
    color: var(--accent);
    fill: var(--accent);
}

/* Standalone compact icon button — mirrors the working schemeManager
   .sb-icon-btn (deliberately NOT built on .my-button, so it never inherits
   the filled-button's white text/fill). Use for table row actions. */
.icon-btn, a.icon-btn:link, a.icon-btn:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--table-border);
    border-radius: 7px;
    background: #fff;
    color: #54616a;
    fill: none;
    cursor: pointer;
    text-decoration: none;
    transition: border-color .12s, color .12s, background-color .12s;
}
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn:hover, a.icon-btn:hover, a.icon-btn:active {
    border-color: #9cc8de;
    color: var(--accent);
    background: #f1f8fc;
}
.icon-btn--accent, a.icon-btn--accent:link, a.icon-btn--accent:visited {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}
.icon-btn--accent:hover, a.icon-btn--accent:hover, a.icon-btn--accent:active {
    filter: brightness(0.9);
    background: var(--accent);
    color: #fff;
}

.my-button.chunky {
    height: 30px;
    padding: 0 14px;
}

.my-button.stretchy {
    width: 100%;
    height: auto;
}

.my-button.disabled {
    background-color: var(--neutral-palette-100);
    color: var(--neutral-palette-400);
    fill: var(--neutral-palette-400);
}

.my-button--danger {
    background-color: #c0392b;
    color: #fff;
    border-color: #c0392b;
}

.my-button--danger:hover {
    background-color: #a93226;
    border-color: #a93226;
}

.other-buttons {
    /*this is a container for the row of buttons on payload page*/
    /* I don't think this actually does anything. I have no idea how those buttons stay how they are */
    display: flex;
    flex-direction: row;
    gap: 10px;
}

/* ================================================================
   SETTINGS (FORM)
   ================================================================ */

/* Settings-style sectioned form layout */
.settings-form hr {
    border: none;
    border-top: 1px solid var(--subtle-grey);
    margin: 0;
}

.settings-section {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 24px;
    align-items: start;
    padding: 22px 4px;
}

.settings-section__label h2 {
    font-size: 13px;
    font-weight: 700;
    color: var(--neutral-palette-800);
    margin: 0;
    padding: 0;
}

.settings-section__label p {
    font-size: 12px;
    color: var(--neutral-palette-500);
    margin: 6px 0 0;
    line-height: 1.5;
}

.settings-section__fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.settings-section__fields .data-form-part {
    margin: 0;
}

.settings-section__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.settings-section--actions {
    padding-top: 16px;
    padding-bottom: 8px;
}

@media (max-width: 700px) {
    .settings-section {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .settings-section__row {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   MEASUREMENTS
   ================================================================ */

/* Measurement picker checkboxes */
.measurement-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--subtle-grey);
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.12s ease;
    text-decoration: none;
    color: inherit;
}

.measurement-option:hover {
    background-color: rgba(42, 147, 206, 0.06);
    border-color: var(--theme-palette-3);
}

.measurement-option input[type="checkbox"] {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    accent-color: var(--theme-palette-2);
    cursor: pointer;
}

.measurement-option strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-palette-800);
}

.measurement-option span {
    font-size: 11px;
    color: var(--neutral-palette-500);
    margin-top: 1px;
    display: block;
}

/* Muted inline text (e.g. "Unassigned" placeholders in tables) */
.muted {
    color: var(--neutral-palette-500);
}

/* Model grouping heading within a measurement picker */
.measurement-group__heading {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--neutral-palette-500);
    margin: 14px 0 2px;
}

.measurement-group__heading:first-child {
    margin-top: 0;
}

/* ================================================================
   SENSOR ROW EDITOR (model manager)
   ================================================================ */

.sensor-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sensor-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--subtle-grey);
    border-radius: 6px;
}

.sensor-row__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    flex: 1;
}

.sensor-row__grid label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--neutral-palette-800);
}

.sensor-row__grid input {
    font-size: 13px;
    padding: 6px 8px;
    border: 1px solid var(--subtle-grey);
    border-radius: 4px;
    font-weight: 400;
}

.sensor-row__remove {
    flex-shrink: 0;
    white-space: nowrap;
}

.sensor-rows__hint {
    font-size: 12px;
    color: var(--neutral-palette-500);
    margin: 8px 0 0;
}

@media (max-width: 700px) {
    .sensor-row {
        flex-direction: column;
        align-items: stretch;
    }
    .sensor-row__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ================================================================
   CONFIG HUB
   ================================================================ */

/* Config hub - mega-menu style navigation grid */
.config-hub {
    display: grid;
    gap: 0;
}

.config-hub--3col { grid-template-columns: repeat(3, 1fr); }
.config-hub--4col { grid-template-columns: repeat(4, 1fr); }

.config-section {
    padding: 8px 18px 18px;
}

.config-section:not(:last-child) {
    border-right: 1px solid var(--subtle-grey);
}

.config-section--admin {
    background-color: rgba(42, 147, 206, 0.16);
    border-radius: 0 4px 4px 0;
}

.config-section__title {
    font-size: 12px;
    font-weight: 700;
    color: var(--neutral-palette-500);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 12px 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--subtle-grey);
}

.config-section--admin .config-section__title {
    border-bottom-color: var(--accent-grey);
}

.config-card {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 9px 10px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--neutral-palette-800);
    transition: background-color 0.12s ease;
    margin-bottom: 2px;
}

.config-card:hover {
    background-color: rgba(42, 147, 206, 0.09);
}

.config-section--admin .config-card:hover {
    background-color: rgba(255, 255, 255, 0.6);
}

.config-card__icon {
    --icon-primary: var(--theme-palette-2);
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.config-card__icon svg {
    display: block;
    width: 18px !important;
    height: 18px !important;
    fill: var(--theme-palette-2);
}

.config-card__body strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-palette-800);
    line-height: 1.2;
}

.config-card:hover .config-card__body strong {
    color: var(--theme-palette-1);
}

.config-card__body p {
    font-size: 12px;
    color: var(--neutral-palette-500);
    margin: 3px 0 0;
    line-height: 1.4;
}

@media (max-width: 860px) {
    .config-hub--3col,
    .config-hub--4col {
        grid-template-columns: 1fr 1fr;
    }
    .config-section--admin {
        border-radius: 0 0 4px 4px;
    }
}

@media (max-width: 540px) {
    .config-hub--3col,
    .config-hub--4col {
        grid-template-columns: 1fr;
    }
}

/* DONE */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    /* Deprecated but still used for compatibility */
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

.hidden {
    display:none;
    overflow: hidden;
    padding: 0; /*force remove any surrounding space*/
    margin: 0; /*force remove any surrounding space*/
    line-height: 0; /*force remove any surrounding space*/
}

.deselect {
    margin-top: 20px;
}

/* ================================================================
   POPUP
   ================================================================ */

#customPopup {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--darkened-page-as-bgr);
}

.popup-content {
    background-color: white;
    padding: 20px;
    margin: 15% auto;
    border-radius: 8px;
    width: 75%;
    box-shadow: 0 0 10px black;
    text-align: center;
}

.popup-content .message {
    display: flex;
    width: 100%;
}

.popup-content .message>div {
    flex: 1;
    /* Each child takes up equal space */
    box-sizing: border-box;
    /* Ensures padding/border don't affect width */
}

/* ================================================================
   WARNING BOX
   ================================================================ */

.warning-box {
    background-color: var(--card-bg);
}

.warning-box > h2 {
    color: var(--accent-deep);
    margin-bottom: 16px;
}

.warning-tables-grid {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.warning-table-section {
    flex: 1;
    min-width: 0;
}

.warning-table-section > h3 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--informative-grey);
    padding-bottom: 8px;
    margin-bottom: 0;
    border-bottom: 2px solid var(--accent-grey);
}

.warning-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.warning-table th {
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--informative-grey);
    text-align: left;
    border-bottom: 1px solid var(--subtle-grey);
}

.warning-table td {
    padding: 13px 14px;
    border-bottom: 1px solid #E4E9EE;
    vertical-align: middle;
    color: var(--ink-body);
}

.warning-table td:first-child {
    font-weight: 500;
    color: var(--ink-strong);
}

.warning-table td:nth-child(3) {
    color: var(--informative-grey);
    font-size: 13px;
}

.warning-table tbody tr:last-child td {
    border-bottom: none;
}

.warning-table tbody tr:hover {
    background-color: #F4F6F7;
}

.no-warnings {
    padding: 16px 14px;
    color: var(--informative-grey);
    font-size: 13px;
}

.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.status-overdue {
    background-color: var(--status-red-bg);
    color: var(--status-red-ink);
}

.status-due {
    background-color: var(--status-amber-bg);
    color: var(--status-amber-ink);
}

.status-never {
    background-color: var(--status-neutral-bg);
    color: var(--status-neutral-ink);
}

.close-btn {
    background-color: var(--close-button-red);
    color: white;
}

/* CUSTOM CHECKBOX MK2 */

.filter__checkbox {
    padding: 2px 16px;
}

/* Toggle All Checkmark
#check-all .custom-checkbox input:checked + .checkmark {
  background-color: var(--accent);
}*/

/* The container */
.custom-checkbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  gap: 10px;
  position: relative;
  user-select: none;
}

/* Hide native checkbox */
.custom-checkbox input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Custom checkmark box */
.checkmark {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-color: #eee;
  border-radius: 4px;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2);
  transition: background-color 0.2s;
}

/* Hover effect */
.custom-checkbox:hover .checkmark {
  background-color: #ccc;
}

/* Checked state - add blue background if checked*/
.custom-checkbox input:checked + .site-name + .checkmark {
  background-color: #fff;
}

/* White tick */
.checkmark::after {
  content: "";
  position: absolute;
  display: none;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid var(--theme-palette-2);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* Show tick when checked */
.custom-checkbox input:checked + .site-name + .checkmark::after {
  display: block;
}

/* ================================================================
   FOOTER
   ================================================================ */

.footer {
    margin: 0;
    background-color: var(--sidebar-hover-bg);
    color: var(--footer-ink);
    /*padding: 30px 0px 20px 0px; previous */
    padding: 15px 0px 15px 0px;
    width: 100%;
    /*box-sizing:border-box;*/ /* ensures padding doesn’t exceed width */
}

.footer a {
    color: var(--footer-ink);
}

.footer .copyright {
    font-size: small;
    padding: 0 35px 0px 35px;
    text-align: center;
}

.footer .copyright-marker {
    width: 100%;
}

.footer hr {
    margin: 0 75px;
}

.footer .wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* align-items: center; */
    /*position: relative;*/
    width: 100%;
    margin: 0;
    padding: 0px 75px 0px 75px;
}

.footer #the-logo {
    width: 200px;
}

.footer .logo-and-stuff {
    flex: 33.3%;
    min-width: 33.3%;
}

.footer .logo-and-stuff p {
    width: 80%;
}

.footer .company-details {
    flex: 33.3%;
    min-width: 33.3%;
}

.footer h2 {
    color: white;
    margin-bottom: 20px;
}

.footer p {
    margin: 0;
}

/* Set out as a grid to display as table */
.footer .company-details dl {
  display: grid;
  grid-template-columns: minmax(0, max-content) auto; /* allows first column to shrink without collapsing entire grid */
}

.footer .company-details dt {
  grid-column-start: 1;
}

.footer .company-details dd {
  grid-column-start: 2;
}
/* End grid */

.footer dl dt {
    font-weight: bold;
    padding: 0 20px 0 0;
}

.footer dl dd {
    display: flex;
    align-items: left;
    /* vertically centers items */
}

.footer dl dt svg {
    width: 16px;
    height: 16px;
    margin-right: 4px;
}

.footer dl dd {
    margin: 0px;
}

.follow-us {
    flex: 33.3%;
    min-width: 300px;
    display: inline-flex;
    flex-direction: column;
    align-items: left;
    /* center children horizontally */
    text-align: center;
    padding: 0 0 15px 0;
}

.follow-us h2 {
    position: relative;
    display: inline-block;
}

.follow-us a {
    display: inline-block;
    /* This centers the SVG based on the text width */
    transform: translateX(calc(50% - 50%));
}

.footer svg {
    margin: 0px;
    padding: 0px;
    fill: white;
}

.footer .text-link {
    border-radius: 10px;
    background-color: none;
    padding: 0 5px;
}

.footer .img-link {
    border-radius: 15px;
    background-color: none;
    padding: 5px 5px;
    margin: 0px;
    height: fit-content;
    font-size: 0;
}

.footer .text-link:hover,
.footer .img-link:hover {
    background-color: var(--theme-palette-6);
    color: var(--theme-palette-1);
}

.footer .img-link:hover svg {
    fill: var(--theme-palette-1);
}

/* ================================================================
   FOOTER (LOGIN PAGE)
   ================================================================ */

/* Login layout: header in normal flow, card centred, footer below (never overlaps) */
.page-login .header {
    position: static;
}

.page-login main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

.login__footer {
    flex-shrink: 0; /* don't let the column layout squash the footer */
    display: flex;
    flex-direction: column; /* contain hr + copyright (they were overflowing the box onto white) */
    background-color: var(--sidebar-hover-bg);
    color: white;
    padding: 0px;
    width: 100%;
}

.login__footer dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap:0px 12px;
    margin: 0;
}

.login__footer dl dt {
    font-weight: bold;
    text-align: right;
}

.login__footer dl dd {
    margin: 0px;
}

.login__footer dl dd a {
    padding: 0px;
}

.login__footer a {
    color: white;
}

.login__footer .wrapper {
    display: flex;
    justify-content: space-between;
    height: 100%;
    padding: 20px 20px 0px 20px;
    align-items: center;
    /* background-color: var(--accent-deep);*/
}

.login__footer .wrapper .logo-and-stuff {
    width: 200px;
}

.login__footer .contact-details {
    margin: 0;
    padding: 0;
}

.login__footer .copyright {
    font-size: small;
    padding: 0 35px 0px 35px;
    text-align: center;
}

.login__footer .copyright-marker {
    width: 100%;
}

/* ================================================================
   NO BULLET LIST
   ================================================================ */

.no-bullet-list {
    list-style-type: none;
    margin: 0;
    padding: 0 0 5px 0;
}

.no-bullet-list li.tagline-info {
    font-size: 10px;
    line-height: 2em;
    color: var(--informative-grey);
}

/* ================================================================
   COLOURED CELL
   ================================================================ */

.coloured-cell {
    color: black;
    text-decoration-color: black;
}

.selected-row .coloured-cell {
    text-decoration-color: black;
    text-decoration: underline;
}

.coloured-cell.red {
    background-color: var(--traffic-light-red);
}

.coloured-cell.yellow {
    background-color: var(--traffic-light-yellow);
}

.coloured-cell.green {
    background-color: var(--traffic-light-green);
}

/* ================================================================
   PHOTO UPLOAD - SITE VISITS
   ================================================================ */

.photo-upload textarea {
    max-width: 500px;
}

.photo-upload .line {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.photo-upload .line .my-button {
    margin-bottom: 8px;
}

.photo-upload .line .data-form-part {
    margin-top: 0px;
}

.warning-message {
    color:var(--readable-red);
}

/* ================================================================
   TOGGLE SWITCH (ROUNDED BUTTON)
   ================================================================ */

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 20px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: var(--accent);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--accent);
}

input:checked + .slider:before {
  -webkit-transform: translateX(10px);
  -ms-transform: translateX(10px);
  transform: translateX(10px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 20px;
}

.slider.round:before {
  border-radius: 50%;
}

/*Custom*/

/* -- Filter Table (widget) -- */

.filter-table {
    border-collapse: separate;
    border-spacing: 0;
    width:100%;
}

/* All cells */
.filter-table td,
.filter-table th {
    padding: 4px 10px;
    text-align: left;
}

/* Header row styling */
.filter-table thead th {
    color: var(--neutral-palette-700);
    font-weight: 600;
    position: sticky;
    top: 0;
    line-height: 1.2em;
    border-bottom: var(--neutral-palette-300) 1px solid;
}

.filter-table tbody .highlight {
    background-color: var(--theme-palette-2) !important;
}

.filter-table tbody td.mid-cell-text {
    text-align: center;
}

.filter-table>tbody>tr.clickable:hover,
.filter-table>tbody>tr.clickable:focus {
    background-color: var(--theme-palette-6);
}

/* ================================================================
   STAT CARDS (DASHBOARD)
   ================================================================ */

.stat-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 4px 0;
    margin-bottom: 32px;
}

.stat-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex: 1 1 180px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    border: 1px solid var(--card-border);
    border-top: 3px solid var(--card-bar);
}

.stat-card-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stat-card-label {
    font-size: 13px;
    color: var(--ink-muted);
    margin: 0;
    font-weight: 500;
}

.stat-card-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--ink-strong);
    margin: 0;
    line-height: 1;
}

.stat-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-card-icon .icons {
    width: 24px;
    height: 24px;
}

/* Redesign 2026: uniform brand-blue chips (was purple/blue/orange/green) */
.stat-card-icon--purple,
.stat-card-icon--blue,
.stat-card-icon--orange,
.stat-card-icon--green  { background: var(--accent); --icon-primary: #FFFFFF; }

/* Home page: all icons render white (they sit on dark chrome / blue chips) */
.page-home svg.icons { --icon-primary: #FFFFFF; }

/* ================================================================
   MAINTENANCE PAGE — modern table styles (scoped to #siteTable)
   ================================================================ */

#siteTable {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
    width: 100%;
}

#siteTable td,
#siteTable th {
    padding: 6px 16px;
    vertical-align: middle;
}

#siteTable thead th {
    background-color: #f8fafc;
    color: #374151;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    border-bottom: 1px solid #e5e7eb;
}

/* Remove alternating background — use row dividers instead */
#siteTable > tbody > tr:nth-child(odd),
#siteTable > tbody > tr:nth-child(even) {
    background-color: #ffffff;
}

#siteTable tbody tr {
    border-bottom: 1px solid #f3f4f6;
}

/* Site rows */
#siteTable .site-row {
    font-weight: 500;
    color: #111827;
}

#siteTable .site-row:hover,
#siteTable .site-row:focus {
    background-color: rgba(42, 147, 206, 0.08) !important;
    outline: none;
}

#siteTable .expand-arrow {
    color: var(--theme-palette-2);
    font-size: 0.65rem;
    margin-right: 6px;
    display: inline-block;
}

/* Location rows */
#siteTable .site-loc-row td {
    background-color: #f8fafc !important;
    font-size: 0.875rem;
    color: #374151;
    border-bottom: 1px solid #eef0f3;
}

#siteTable .loc-indent {
    padding-left: 2.5rem !important;
    border-left: 3px solid var(--theme-palette-6);
}

/* Softer traffic-light colours — overrides global coloured-cell colours */
#siteTable .coloured-cell.red {
    background-color: var(--status-red-bg) !important;
    color: var(--status-red-ink);
}

#siteTable .coloured-cell.green {
    background-color: var(--status-green-bg) !important;
    color: var(--status-green-ink);
}

#siteTable .coloured-cell.yellow {
    background-color: var(--status-amber-bg) !important;
    color: var(--status-amber-ink);
}

#siteTable .coloured-cell {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

/* View button inside the maintenance table */
#siteTable .my-button.stretchy {
    border-radius: 6px;
    font-size: 0.78rem;
    padding: 5px 14px;
    height: auto;
    width: auto;
    white-space: nowrap;
}

/* "No locations" placeholder row */
#siteTable .no-locations {
    color: #9ca3af;
    font-size: 0.85rem;
    font-style: italic;
}

/* ================================================================
   SITE VISITS PAGE — modern styles + accordion behaviour
   ================================================================ */

#visits-table {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
    width: 100%;
}

#visits-table td,
#visits-table th {
    padding: 11px 16px;
    vertical-align: middle;
}

#visits-table thead th {
    background-color: #f8fafc;
    color: #374151;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    border-bottom: 1px solid #e5e7eb;
}

#visits-table > tbody > tr:nth-child(odd),
#visits-table > tbody > tr:nth-child(even) {
    background-color: #ffffff;
}

#visits-table tbody tr {
    border-bottom: 1px solid #f3f4f6;
}

#visits-table > tbody > tr.clickable:hover,
#visits-table > tbody > tr.clickable:focus {
    background-color: rgba(42, 147, 206, 0.08) !important;
    outline: none;
}

#visits-table .my-button.stretchy {
    border-radius: 6px;
    font-size: 0.78rem;
    padding: 5px 14px;
    height: auto;
    width: auto;
    white-space: nowrap;
}

/* Expanded visit row — highlight like maintenance accordion */
#visits-table .visit-row-expanded {
    background-color: rgba(42, 147, 206, 0.08) !important;
}

#visits-table .visit-arrow {
    color: var(--theme-palette-2);
    font-size: 0.65rem;
    margin-right: 6px;
    display: inline-block;
}

/* Expansion rows — inset background + blue left border to show relationship */
#visits-table .maintenance-row > td,
#visits-table .photo-row > td {
    background-color: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    border-left: 3px solid var(--theme-palette-2);
}

/* Photo panel — thumbnails left, upload form right */
#visits-table .photo-display {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding: 8px 0;
}

#visits-table .photo-display .photos {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
}

#visits-table .photo-form {
    border-left: 2px solid #e5e7eb;
    padding-left: 20px;
    flex-shrink: 0;
}

/* Form fields in a row */
#visits-table .photo-upload.data-form .line {
    flex-direction: row;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}

#visits-table .photo-upload .data-form-part {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#visits-table .photo-upload label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #374151;
}

#visits-table .photo-upload textarea {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.875rem;
    resize: vertical;
    width: 200px;
}

/* Per-visit location sub-table */
.maintenance-table {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    width: 100%;
    margin: 4px 0;
}

.maintenance-table td,
.maintenance-table th {
    padding: 8px 16px;
    vertical-align: middle;
}

.maintenance-table thead th {
    background-color: #f8fafc;
    color: #374151;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    border-bottom: 1px solid #e5e7eb;
}

.maintenance-table > tbody > tr:nth-child(odd),
.maintenance-table > tbody > tr:nth-child(even) {
    background-color: #ffffff;
}

.maintenance-table tbody tr {
    border-bottom: 1px solid #f3f4f6;
}

/* ================================================================
   LOCATION MAINTENANCE PAGE — same modern style as #siteTable
   ================================================================ */

#locMaintenanceTable,
#assetsTable {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
    width: 100%;
}

#locMaintenanceTable td,
#locMaintenanceTable th,
#assetsTable td,
#assetsTable th {
    padding: 11px 16px;
    vertical-align: middle;
}

#locMaintenanceTable thead th,
#assetsTable thead th {
    background-color: #f8fafc;
    color: #374151;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    border-bottom: 1px solid #e5e7eb;
}

#locMaintenanceTable > tbody > tr:nth-child(odd),
#locMaintenanceTable > tbody > tr:nth-child(even),
#assetsTable > tbody > tr:nth-child(odd),
#assetsTable > tbody > tr:nth-child(even) {
    background-color: #ffffff;
}

#locMaintenanceTable tbody tr,
#assetsTable tbody tr {
    border-bottom: 1px solid #f3f4f6;
}

#locMaintenanceTable .coloured-cell.red,
#assetsTable .coloured-cell.red {
    background-color: var(--status-red-bg) !important;
    color: var(--status-red-ink);
}

#locMaintenanceTable .coloured-cell.green,
#assetsTable .coloured-cell.green {
    background-color: var(--status-green-bg) !important;
    color: var(--status-green-ink);
}

#locMaintenanceTable .coloured-cell.yellow,
#assetsTable .coloured-cell.yellow {
    background-color: var(--status-amber-bg) !important;
    color: var(--status-amber-ink);
}

#locMaintenanceTable .coloured-cell,
#assetsTable .coloured-cell {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

#locMaintenanceTable .my-button.stretchy,
#assetsTable .my-button.stretchy {
    border-radius: 6px;
    font-size: 0.78rem;
    padding: 5px 14px;
    height: auto;
    width: auto;
    white-space: nowrap;
}

/* ================================================================
   LOGIN
   ================================================================ */

.login__wrapper {
    display: flex;
    flex-flow: column;
    width: 400px;
    max-width: 95%;
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
    border-radius: 12px;
    padding: 35px;
}

.login__wrapper h1 {
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    padding: 15px 0;
    margin: 0;
}

/* ================================================================
   MISC
   ================================================================ */

.figure {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}

figure.chart-holder {
    height: 400px;
    min-height: 400px;
    width: 100%;
    padding: 0;
    margin: 0;
    border: solid 1px #00000011
}

.plain-flex {
    width: 100%;
    display: flex;
    gap: 10px;
}

.plain-flex>* {
    flex: 1;
    /* Or another value like flex-grow: 1 */
    min-width: 0;
    /* Prevents overflow in some cases */
}

#visits-table>tbody>tr.visit-row {
    border-top: 2px solid #e5e7eb;
}

#visits-table .maintenance-row>td {
    padding: 0;
}

.maintenance-table .device-column {
    width: 20%;
}

.clickable {
    cursor: pointer;
}

.thumbnail {
    width: 50px;
    cursor: pointer;
    border: 2px solid var(--subtle-grey);
}

/* Lightbox overlay */
.lightbox {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--darkened-page-as-bgr);
    justify-content: center;
    align-items: center;
}

/* Full-size image */
.lightbox img {
    max-width: 90vw;
    /* max 90% of viewport width */
    max-height: 90vh;
    /* max 90% of viewport height */
    width: auto;
    height: auto;
    box-shadow: 0 0 20px white;
}

.lightbox figcaption {
    background-color: white;
    border: 1px solid var(--subtle-grey);
    color: black;
    border-radius: 5px;
    box-shadow: 0 0 20px white;
    margin-top: 10px
}

.lightbox-corner-link {
    position: absolute;
    bottom: 20px;
    right: 40px;
    z-index: 1001;
}

.payload-gap-form textarea {
    border: solid 1px var(--subtle-grey);
    border-radius: 3px;
    width: 90%;
    margin: 0px;
    resize: vertical;
}

.payload-gap-form {
    display: flex;
}

.filled-gap-row {
    color: var(--readable-red);
    font-weight: bold;
}

.flexy-grid {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 10px;
}

.payload-selectors {
    background-color: #f1f1f1;
    border: 1px solid var(--subtle-grey);
}

.payload-top-right table tbody td {
    text-align: right;
}

.payload-top-right table tbody th {
    text-align: left;
}

input {
    cursor: pointer;
}
/* ================================================================
   SCHEMES & SITES BOARD (schemeManager) — imported design
   Scoped under .schemes-board. Accent uses the app theme var;
   neutral greys follow the source design.
   ================================================================ */
.schemes-board { --sb-accent: var(--accent); display: block; }

/* The board sits inside the global .section__content card. The title and
   toolbar are normal padded card content; the table rows live in a framed
   inner wrapper (.sb-table) so they read as a contained table, not full-bleed. */
.schemes-board .sb-table {
    border: 1px solid var(--table-border);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 2px;
}

/* Shared 7-column grid */
.schemes-board .sb-grid {
    display: grid;
    grid-template-columns: 38px 96px minmax(200px, 1.25fr) minmax(120px, .7fr) minmax(150px, .9fr) 96px 82px;
    align-items: center;
    min-width: 700px;
}

/* Toolbar (title-area controls; sits within the card padding) */
.schemes-board .sb-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 4px 0 14px 10px;
    flex-wrap: wrap;
}
.schemes-board .sb-toolbar__meta { display: flex; flex-direction: column; gap: 6px; margin-right: auto; }
.schemes-board .sb-eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: #8a959b;
}
.schemes-board .sb-summary { font-size: 13px; line-height: 1.3; color: #8a959b; }

/* Ghost button group (Expand / Collapse all) */
.schemes-board .sb-btngroup {
    display: inline-flex; border: 1px solid #dbe2e5; border-radius: 8px; overflow: hidden;
}
.schemes-board .sb-btngroup .sb-btn-ghost { border: none; border-right: 1px solid #dbe2e5; border-radius: 0; }
.schemes-board .sb-btngroup .sb-btn-ghost:last-child { border-right: none; }
.schemes-board .sb-btn-ghost {
    height: 38px; padding: 0 13px; background: #fff; color: #54616a;
    font-size: 12.5px; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid transparent; border-radius: 8px;
    transition: background .12s, color .12s, border-color .12s;
}
.schemes-board .sb-btn-ghost:hover { background: #f1f8fc; color: var(--sb-accent); }
.schemes-board .sb-btn-ghost--bordered { border-color: #dbe2e5; height: 34px; }
.schemes-board .sb-btn-ghost--bordered:hover { border-color: #9cc8de; }

/* Accent button (Add scheme) */
.schemes-board .sb-btn-accent {
    display: inline-flex; align-items: center; gap: 7px;
    height: 38px; padding: 0 16px; border-radius: 8px;
    background: var(--sb-accent); color: #fff; text-decoration: none;
    font-size: 13px; font-weight: 600; cursor: pointer; transition: filter .12s;
}
.schemes-board .sb-btn-accent:hover { filter: brightness(.92); color: #fff; }
.schemes-board .sb-btn-accent svg,
.schemes-board .sb-btn-ghost svg { width: 16px; height: 16px; flex: none; }

/* County filter pills */
.schemes-board .sb-filter {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 0 0 12px 10px;
}
.schemes-board .sb-filter__label {
    font-size: 10.5px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase;
    color: #9aa4a9; margin-right: 2px;
}
/* County pills use greys derived from the sidebar palette (not the accent). */
.schemes-board .sb-pill {
    display: inline-flex; align-items: center; height: 24px; padding: 0 11px;
    border-radius: 999px; border: 1px solid var(--neutral-palette-100);
    background: var(--neutral-palette-50); color: var(--neutral-palette-500);
    font-size: 11.5px; font-weight: 600; cursor: pointer; transition: all .12s;
}
.schemes-board .sb-pill:hover { border-color: var(--neutral-palette-300); }
.schemes-board .sb-pill.is-active {
    border-color: var(--accent); background: var(--accent); color: var(--sidebar-ink-active);
}

/* Column header (first row of the framed table; wrapper supplies the top edge) */
.schemes-board .sb-head {
    padding: 11px 22px; background: var(--table-head-primarybg);
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--table-head-primaryink);
}
.schemes-board .sb-head .sb-col-actions { justify-self: end; }
.schemes-board .sb-sort {
    justify-self: start; display: inline-flex; align-items: center; gap: 4px;
    border: none; background: none; padding: 0; cursor: pointer;
    font: inherit; color: inherit; letter-spacing: 1px; text-transform: uppercase;
}
.schemes-board .sb-sort:hover { color: var(--sb-accent); }
.schemes-board .sb-arrow { color: var(--table-head-primaryink); min-width: 8px; }

/* Scheme (accordion) rows */
.schemes-board .sb-scheme { border-bottom: 1px solid #eef2f3; }
.schemes-board .sb-scheme-row {
    padding: 13px 22px; background: var(--table-row-primarybg); cursor: pointer; transition: background .12s;
}
.schemes-board .sb-scheme-row:hover { background: var(--table-row-highlight); }
.schemes-board .sb-scheme-row:focus-visible { outline: 2px solid var(--sb-accent); outline-offset: -2px; }
.schemes-board .sb-chev {
    display: inline-flex; align-items: center; justify-content: center;
    width: 17px; height: 17px; color: #8a959b;
    transform: rotate(-90deg); transform-origin: center; transition: transform .18s;
}
.schemes-board .sb-chev svg { width: 17px; height: 17px; }
.schemes-board .sb-scheme.is-open .sb-chev { transform: rotate(0deg); }

.schemes-board .sb-number {
    justify-self: start; display: inline-flex; align-items: center; justify-content: center;
    min-width: 60px; height: 24px; padding: 0 9px; border-radius: 6px;
    background: var(--pill-strong-bg); color: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; font-weight: 600;
}
.schemes-board .sb-name-cell { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.schemes-board .sb-name {
    font-size: 15px; font-weight: 600; color: #1f2b38; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.schemes-board .sb-count-pill {
    display: inline-flex; align-items: center; height: 22px; padding: 0 10px;
    border-radius: 999px; background: var(--pill-neutral-bg); color: var(--pill-neutral-ink);
    font-size: 11.5px; font-weight: 600; flex: none;
}
.schemes-board .sb-active-pill {
    display: inline-flex; align-items: center; height: 22px; padding: 0 10px;
    border-radius: 999px; background: #eaf3f8; color: var(--sb-accent);
    font-size: 11.5px; font-weight: 600; flex: none;
}
.schemes-board .sb-org { font-size: 13px; color: #6b767c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Status dot */
.schemes-board .sb-status { display: inline-flex; align-items: center; gap: 8px; }
.schemes-board .sb-status__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.schemes-board .sb-status__text { font-size: 12px; font-weight: 600; }
.schemes-board .sb-status.is-on .sb-status__dot { background: #2e9d5b; box-shadow: 0 0 0 3px rgba(46,157,91,.15); }
.schemes-board .sb-status.is-on .sb-status__text { color: #1f7a49; }
.schemes-board .sb-status.is-off .sb-status__dot { background: #d64545; box-shadow: 0 0 0 3px rgba(214,69,69,.14); }
.schemes-board .sb-status.is-off .sb-status__text { color: #b83a3a; }

/* Actions */
.schemes-board .sb-actions { justify-self: end; display: inline-flex; gap: 6px; }
.schemes-board .sb-icon-btn {
    width: 32px; height: 30px; border: 1px solid #dbe2e5; border-radius: 7px;
    background: #fff; color: #54616a; display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .12s; text-decoration: none;
}
.schemes-board .sb-icon-btn svg { width: 15px; height: 15px; }
.schemes-board .sb-icon-btn:hover { border-color: #9cc8de; color: var(--sb-accent); background: #f1f8fc; }
.schemes-board .sb-icon-btn--accent { border-color: var(--sb-accent); background: var(--sb-accent); color: #fff; }
.schemes-board .sb-icon-btn--accent:hover { filter: brightness(.9); background: var(--sb-accent); color: #fff; }

/* Site rows */
.schemes-board .sb-scheme-body { background: #fff; }
.schemes-board .sb-site-row {
    padding: 11px 22px; border-bottom: 1px solid #f1f5f6; transition: background .12s;
}
.schemes-board .sb-site-row:hover { background: #fafcfd; }
.schemes-board .sb-site-name { font-size: 14px; color: #2b3338; padding-left: 2px; }
.schemes-board .sb-muted { font-size: 13px; color: #6b767c; }

/* Empty / no-results states */
.schemes-board .sb-empty {
    padding: 13px 22px 13px 60px; font-style: italic; font-size: 13px; color: #aab3b8;
    border-bottom: 1px solid #f1f5f6;
}
.schemes-board .sb-empty--pad { padding: 16px 22px; border-bottom: none; }
.schemes-board .sb-empty b { font-style: normal; color: #8a959b; }
.schemes-board .sb-noresults { padding: 16px 22px; font-style: italic; font-size: 13px; color: #aab3b8; }

/* JS state helpers */
.schemes-board .sb-hidden { display: none !important; }

/* The framed wrapper clips the last row, so drop its trailing border. */
.schemes-board #sbSchemesList .sb-scheme:last-child { border-bottom: none; }

/* Let the table scroll horizontally rather than crush columns on narrow screens */
@media (max-width: 860px) {
    .schemes-board .sb-table { overflow-x: auto; }
}

/* ================================================================
   THEMED TABLE — opt-in recolour of .styled-table to the new
   palette. Add class "styled-table--themed" to a table to adopt it;
   layout is unchanged. Shared helper: .tbl-badge (dark id/code badge).
   ================================================================ */
.styled-table--themed { 
    margin-top: 2px;
    font-size: 13px;
    border: 1px solid var(--table-border);
    border-radius: 10px;
 }

.styled-table--themed thead th {
    background-color: var(--table-head-primarybg);
    color: var(--table-head-primaryink);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid #eef2f3;
    padding: 11px 14px;
    vertical-align: middle;   /* base .styled-table th is vertical-align:top */
}
.styled-table--themed td {
    padding: 10px 14px;
    color: #2b3338;
    border-bottom: 1px solid #f1f5f6;
    vertical-align: middle;
}
/* Flat white rows + subtle hover (override grey zebra + baby-blue hover) */
.styled-table--themed > tbody > tr,
.styled-table--themed > tbody > tr:nth-child(odd),
.styled-table--themed > tbody > tr:nth-child(even),
.styled-table--themed tbody tr.odd-row,
.styled-table--themed tbody tr.even-row {
    background-color: #fff;
}
.styled-table--themed > tbody > tr:hover,
.styled-table--themed > tbody > tr.clickable:hover,
.styled-table--themed > tbody > tr.clickable:focus {
    background-color: #f6f9fb;
}

/* Round the four corner cells so the table's border-radius stays visible
   (border-collapse: separate paints cell backgrounds over the rounded corners
   otherwise). Drop the last row's separator so it doesn't cut across the curve. */
.styled-table--themed thead tr:first-child th:first-child { border-top-left-radius: 10px; }
.styled-table--themed thead tr:first-child th:last-child  { border-top-right-radius: 10px; }
.styled-table--themed tbody tr:last-child td:first-child  { border-bottom-left-radius: 10px; }
.styled-table--themed tbody tr:last-child td:last-child   { border-bottom-right-radius: 10px; }
.styled-table--themed tbody tr:last-child td { border-bottom: none; }

/* Action column (Edit/Add buttons) collapses to its content and sits flush
   with the table's right edge — the table is width:100%, so without this the
   last column takes a share of the width and the button floats left of a gap. */
.styled-table--themed thead th:last-child,
.styled-table--themed tbody td:last-child {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* --- Themed variants for the permissionManager tables --------------------
   That page has three structurally distinct tables, so the plain themed look
   needs two opt-in modifiers.

   .styled-table--grouped — the Organisations/Users tables use rowspan blocks
   (one permittee, many permission rows) and rely on odd-row/even-row shading
   to keep each block legible. The base themed look flattens rows to white, so
   re-enable the alternating tint here. */
.styled-table--themed.styled-table--grouped tbody tr.even-row,
.styled-table--themed.styled-table--grouped tbody tr.even-row > td {
    background-color: #f4f8fb;
}
.styled-table--themed.styled-table--grouped tbody tr.odd-row,
.styled-table--themed.styled-table--grouped tbody tr.odd-row > td {
    background-color: #fff;
}

/* In grouped tables the last cell of a *continuation* row is data, not the
   Edit button, so the generic "last column = action" collapse above misfires.
   Target the action column explicitly via .col-action instead. */
.styled-table--themed.styled-table--grouped td:last-child:not(.col-action),
.styled-table--themed.styled-table--grouped th:last-child:not(.col-action) {
    width: auto;
    white-space: normal;
    text-align: left;
}
/* Explicitly-marked action column — collapses to content and sits flush right.
   Works in any themed table; use it when position-based last-child is not a
   reliable action signal (locationManager has two action columns plus a
   conditional Records column; grouped tables have rowspan continuation rows). */
.styled-table--themed td.col-action,
.styled-table--themed th.col-action {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* .styled-table--readonly — the "All Permissions (Display only)" table is a
   non-editable overview. Mute it (greyer header, softer ink, inert field, no
   hover affordance) so it reads as distinct from the editable tables. Its last
   column is data, so undo the action-column collapse. */
.styled-table--themed.styled-table--readonly {
    background-color: #fbfcfd;
}
.styled-table--themed.styled-table--readonly thead th {
    background-color: #f1f4f6;
    color: #9aa4a9;
}
.styled-table--themed.styled-table--readonly td {
    color: #6b747a;
}
.styled-table--themed.styled-table--readonly > tbody > tr,
.styled-table--themed.styled-table--readonly > tbody > tr:nth-child(odd),
.styled-table--themed.styled-table--readonly > tbody > tr:nth-child(even),
.styled-table--themed.styled-table--readonly > tbody > tr:hover {
    background-color: transparent;
}
.styled-table--themed.styled-table--readonly td:last-child,
.styled-table--themed.styled-table--readonly th:last-child {
    width: auto;
    white-space: normal;
    text-align: left;
}

/* locationManager: dense rows with multi-line cells (asset lists, dataset
   sub-tables) read better top-aligned than the themed default (middle). */
#locationTable.styled-table--themed td {
    vertical-align: top;
}

/* On/off status indicator — green dot = active, neutral grey = inactive.
   Reusable in themed tables; mirrors the schemeManager status dot but uses
   grey (not red) for the off state. */
.tbl-status { display: inline-flex; align-items: center; gap: 8px; }
.tbl-status__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.tbl-status__text { font-size: 12px; font-weight: 600; }
.tbl-status.is-on .tbl-status__dot { background: #2e9d5b; box-shadow: 0 0 0 3px rgba(46,157,91,.15); }
.tbl-status.is-on .tbl-status__text { color: #1f7a49; }
.tbl-status.is-off .tbl-status__dot { background: #b6bfc4; box-shadow: 0 0 0 3px rgba(182,191,196,.18); }
.tbl-status.is-off .tbl-status__text { color: #8a959b; }

/* Dark id/code badge (mirrors the schemes number badge) */
.tbl-badge {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 2px 9px; border-radius: 6px;
    background: var(--pill-strong-bg); color: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px; font-weight: 600; white-space: nowrap;
    height:24px;
}

/* Themed tables use the schemeManager primary-row hover colour for the
   selected/highlight state (light grey, dark text) rather than the base
   navy --sidebar-active-alt + white. The accent left bar from the base
   .styled-table rule is kept. Scoped to --themed so unconverted pages
   keep their existing navy highlight. */
.styled-table--themed tbody .selected-row,
.styled-table--themed tbody .highlight {
    background-color: var(--table-row-highlight) !important;
    color: inherit;
    font-weight: inherit;
}

/* ================================================================
   TABLE FILTER PILLS — reusable filter bar above a themed table
   (mirrors the schemeManager county pills: grey, active = sidebar grey).
   ================================================================ */
.tbl-filter { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 16px; }
.tbl-filter__group { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.tbl-filter__label {
    font-size: 10.5px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase;
    color: #9aa4a9; min-width: 92px;
}
.tbl-pill {
    display: inline-flex; align-items: center; height: 24px; padding: 0 11px;
    border-radius: 999px; border: 1px solid var(--neutral-palette-100);
    background: var(--neutral-palette-50); color: var(--neutral-palette-500);
    font-size: 11.5px; font-weight: 600; cursor: pointer; transition: all .12s;
}
.tbl-pill:hover { border-color: var(--neutral-palette-300); }
/* Active pill matches the county filter (accent blue). */
.tbl-pill.is-active {
    border-color: var(--accent); background: var(--accent); color: var(--sidebar-ink-active);
}
/* The Model sub-filter uses a lighter blue to differentiate it from Manufacturer. */
.tbl-filter__group[data-group="model"] .tbl-pill.is-active {
    border-color: var(--accent); background: #eaf3f8; color: var(--accent);
}

.tbl-hidden { display: none !important; }

/* "All" select-all/none toggle within a filter group */
.tbl-pill--all { text-transform: uppercase; letter-spacing: .4px; margin-right: 4px; }