:root {
    --colour-core-primary: #061331;
    --colour-core-secondary: #003282;
    --colour-core-tertiary: #2387FF;
    --colour-ui-action: #2387FF;
    --colour-gradient-dark: var(--colour-core-primary);
    --colour-gradient-light: #123B97;
    --colour-grey-100: #FAFAFA;
    --colour-grey-300: #EDEDED;
    --colour-grey-400: #D4D4D4; 
    --colour-grey-500: #A9A9A9;
    --colour-grey-600: #828282;
    --colour-grey-800: #595959;
    --colour-ui-line: #EDEDED;
    --colour-status-active: #26BE69;
    --colour-status-active-background: #E4EEE5;
    --colour-status-active-border: #CDE5CE;
    --colour-status-inactive: #F2415A;
    --colour-status-inactive-background: #FEECEF;
    --colour-status-inactive-border: #FCCAD1;
    --colour-critical: #F41656;
    --colour-critical-border: #F416562B;
    --colour-critical-background: #F416561A;
    --colour-urgent: #FF6229;
    --colour-urgent-border: #FF62292B;
    --colour-urgent-background: #FF62291A;
    --colour-info: #3399FF;
    --colour-info-border: #3399FF2B;
    --colour-info-background: #3399FF1A;
    --colour-dark-button-hover: var(--colour-grey-800);
    --colour-dark-button-active: var(--colour-core-secondary);
    --colour-light-button-hover: var(--colour-grey-300);
    --colour-light-button-active: #E4EEFA;
    --colour-semantic-highlight: #9747FF;
    --colour-semantic-success: #26BE69;
    --colour-semantic-information: #2387FF;
    --colour-semantic-warning: #FF6229;
    --colour-semantic-error: #F2415A;
    --colour-supporting-green: #4CAF50;
    --colour-supporting-teal: #026AA2;
    --colour-supporting-violet: #5925DC;
    --colour-supporting-coral: #FF6357;
    --colour-supporting-pink: #E11656;
    --radius-s: 4px;
    --radius-sm: 6px;
    --radius-m: 8px;
    --radius-l: 12px;
    --radius-xl: 16px;
    --radius-xxxl: 24px;

    /* ── Button design tokens — shared by HTML buttons and .dx-button-mode-contained ──
       Values match dx.light.css dx-button-mode-contained (normal type) so both stay
       in sync. Change a token here to update every button in one place. */
    --btn-radius: 4px;
    --btn-padding: 8px 12px;
    --btn-font-size: 14px;
    --btn-bg: #fff;
    --btn-border-color: #ddd;
    --btn-color: #333;
    --btn-bg-hover: #f5f5f5;
    --btn-bg-active: #c2c2c2;
    --btn-bg-disabled: #f8f9fa;
    --btn-color-disabled: #6c757d;
    --btn-opacity-disabled: 0.65;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Manrope, Arial, sans-serif;
    box-sizing: border-box;
}

html {
    background: var(--colour-gradient-light); /* Prevents body background propagating to the canvas */
}

body {
    display: grid;
    grid-template-columns: 80px 1fr; /* Sidebar + main content */
    grid-template-rows: max(100vh, 610px); /* Full viewport height, or 610px minimum */
    height: max(100vh, 610px);
    overflow: hidden;
    background: linear-gradient(to bottom, var(--colour-gradient-dark), var(--colour-gradient-light));
}

/* Sidebar */
.sidebar {
    color: white;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* top items stay top, bottom item stays bottom */
}
.sidebarMenuTop {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center all items horizontally within sidebarMenuTop */
}


/* Main area (rest of page next to sidebar) uses a nested grid for header + content */
.headerAndContent {
    display: grid;
    grid-template-rows: 60px 1fr; /* Header + content */
    border-top-left-radius: 20px; /* top-left corner rounded */
    overflow: hidden;
    height: 100%;
    min-height: 0; /* allow second row to shrink */
}

/* Header */
.header {
    background-color: white;
    color: black;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px 0;    
    border-bottom: 1px solid var(--colour-ui-line);
}

/* Account selector – shown in the header centre for multi-account (role=User) users */
#accountSelectContainer {
    margin: 0;
}

/* Header dxSelectBox – account selector and company structure scope selectors.
   Same visual style as #chooseGraph2Div selectboxes on the home page. */
#accountSelectContainer .dx-selectbox.dx-editor-outlined,
#accountSelectContainer .dx-selectbox,
#restrictByContainer .dx-selectbox.dx-editor-outlined,
#restrictByContainer .dx-selectbox {
    background: white !important;
    border: 1px solid #ccc !important;
    border-radius: var(--radius-m) !important;
    box-shadow: none !important;
    outline: none !important;
    transition: all 0.2s ease-in-out !important;
    height: 34px !important;
}

#accountSelectContainer .dx-selectbox:hover,
#restrictByContainer .dx-selectbox:hover {
    background-color: #f8f9fa !important;
    border-color: #aaa !important;
}

#accountSelectContainer .dx-selectbox.dx-state-focused,
#restrictByContainer .dx-selectbox.dx-state-focused {
    border-color: var(--colour-ui-action) !important;
    box-shadow: 0 0 0 2px rgba(35, 135, 255, 0.15) !important;
}

#accountSelectContainer .dx-selectbox .dx-texteditor-container,
#restrictByContainer .dx-selectbox .dx-texteditor-container {
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}

#accountSelectContainer .dx-selectbox .dx-texteditor-input-container,
#restrictByContainer .dx-selectbox .dx-texteditor-input-container {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}

#accountSelectContainer .dx-selectbox .dx-texteditor-input,
#restrictByContainer .dx-selectbox .dx-texteditor-input {
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: auto !important;
}

#accountSelectContainer .dx-selectbox .dx-texteditor-buttons-container,
#restrictByContainer .dx-selectbox .dx-texteditor-buttons-container {
    height: 100% !important;
}

#accountSelectContainer .dx-selectbox .dx-dropdowneditor-button,
#restrictByContainer .dx-selectbox .dx-dropdowneditor-button {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    min-width: 24px !important;
    border-radius: 0 var(--radius-m) var(--radius-m) 0 !important;
    overflow: hidden !important;
}

#accountSelectContainer .dx-selectbox .dx-dropdowneditor-button .dx-button-content,
#restrictByContainer .dx-selectbox .dx-dropdowneditor-button .dx-button-content {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}


.contentWrapper {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.content {
    overflow: auto;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Inner wrapper that carries the grey background and the scroll-relative bottom-left radius.
   min-height:100% ensures it fills the full scroller height when content is short.
   When content is taller it grows naturally, so the rounded corner sits at the true
   bottom of the page content and is only visible once scrolled all the way down. */
.contentInner {
    background-color: var(--colour-grey-100);
    padding-top: 0.5em;
    padding-left: 3em;
    padding-right: 3em;
    border-bottom-left-radius: 20px;
    min-height: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

    .content h1 {
        font-size: xx-large;
        font-weight: 700;
        margin-block-start: 0;
        margin-block-end: 1em;
    }


.hidden {
    display: none !important;
}



div.nameValue {
    break-inside: avoid-column;
    clear: both;
}

    div.nameValue .name, div.nameValue .value {
        float: left;
        padding: .5em 0em .5em 0em; 
    }

    div.nameValue .name {
        width: 8em;
    }


/* ── HTML buttons styled to match .dx-button-mode-contained (normal type) ──
   All values come from --btn-* tokens defined in :root above.
   Changing a token here automatically updates dxButton overrides too. */
button,
input[type=submit],
input[type=button],
a.ui-button {
    font-size: var(--btn-font-size);
    padding: var(--btn-padding);
    border-radius: var(--btn-radius);
    border: 1px solid var(--btn-border-color);
    background-color: var(--btn-bg);
    color: var(--btn-color);
    cursor: pointer;
    line-height: 1.35715;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

    button:disabled,
    input[type=submit]:disabled,
    input[type=button]:disabled,
    a.ui-button:disabled {
        background-color: var(--btn-bg-disabled);
        color: var(--btn-color-disabled);
        border-color: #ddd;
        opacity: var(--btn-opacity-disabled);
        cursor: default;
    }

    button:not([type=submit]):not(.submit):not(:disabled):hover,
    input[type=button]:not(.submit):not(:disabled):hover {
        background-color: var(--btn-bg-hover);
        border-color: #bbb;
    }

    button:not([type=submit]):not(.submit):not(:disabled):active,
    input[type=button]:not(.submit):not(:disabled):active {
        background-color: var(--btn-bg-active);
        border-color: #bbb;
    }

    /* Primary / submit buttons use the site action colour */
    button[type=submit],
    input[type=submit],
    input[type=button].submit,
    button.submit {
        background-color: var(--colour-ui-action);
        border-color: var(--colour-ui-action);
        color: white;
    }

        button[type=submit]:not(:disabled):hover,
        input[type=submit]:not(:disabled):hover,
        input[type=button].submit:not(:disabled):hover,
        button.submit:not(:disabled):hover {
            background-color: var(--colour-dark-button-hover);
            border-color: var(--colour-dark-button-hover);
            color: white;
        }

        button[type=submit]:not(:disabled):active,
        input[type=submit]:not(:disabled):active,
        input[type=button].submit:not(:disabled):active,
        button.submit:not(:disabled):active {
            background-color: var(--colour-dark-button-active);
            border-color: var(--colour-dark-button-active);
            color: white;
        }

        button[type=submit]:focus,
        input[type=submit]:focus,
        input[type=button].submit:focus,
        button.submit:focus {
            background-color: var(--colour-ui-action);
            border-color: var(--colour-ui-action);
            color: white;
        }

/* ── Button icons ── */
button .btn-icon,
input[type=button] .btn-icon {
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
    margin-right: 4px;
    pointer-events: none;
}

/* White-out icons inside primary / submit buttons so they stay visible on the blue bg */
button.submit .btn-icon,
button[type=submit] .btn-icon,
input[type=submit] .btn-icon {
    filter: brightness(0) invert(1);
}

/* White-out SVG icons inside DevExtreme Default (blue) buttons */
.dx-button-default .dx-icon img,
.dx-button-default .dx-button-content img {
    filter: brightness(0) invert(1);
}

/* White-out SVG icons inside DevExtreme Success (green) buttons */
.dx-button-success .dx-icon img,
.dx-button-success .dx-button-content img {
    filter: brightness(0) invert(1);
}

/* ── FAR action buttons spacing ── */
#ActionsDiv {
    margin-top: 12px;
    margin-bottom: 24px;
}

    #ActionsDiv button {
        margin-right: 6px;
    }

    div.contentBox {
        display: inline-block;
        border-radius: var(--radius-xxxl);
        background-color: white;
        border-style: none;
        color: black;
        padding: 15px;
        margin-bottom: 2em;
        margin-right: 1em;
        float: left;
    }

    div.contentBox.fullWidth {
        display: block;
        box-sizing: border-box;
        width: 100%;
        float: none;
        margin-right: 0;
    }

    div.contentBox h3 {
        margin-block-start: 0;
    }

.noSpaceBelow {
    margin-block-end: 0;
}

.spaceBelow {
    margin-block-end: 1em;
}

div.bottomButtons {
    margin-top:1em;
}

.rightButtonsDiv {
    display: flex;
    justify-content: flex-end; /* Aligns buttons to the right */
    gap: 10px; /* Adds space between the buttons */
    margin-top: 2em; /* Space above the buttons */
    margin-bottom: 1em; /* Space below the buttons */
    clear: both; /* Clears any floated elements above */
}

.leftButtonsDiv {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 2em;
    margin-bottom: 1em;
    clear: both;
}


div.numberInBox {
    display: inline;
    padding: 0 5px;    
    border-radius: var(--radius-s);
}

    div.numberInBox.critical {
        color: var(--colour-critical);
        border: 1px solid var(--colour-critical-border);
        background-color: var(--colour-critical-background);
    }
    div.numberInBox.urgent {
        color: var(--colour-urgent);
        border: 1px solid var(--colour-urgent-border);
        background-color: var(--colour-urgent-background);
    }
    div.numberInBox.info {
    color: var(--colour-info);
    border: 1px solid var(--colour-info-border);
    background-color: var(--colour-info-background);
}

/* sliding a div open and closed */
.slider {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease-out;
}

    .slider.open {
        transition: max-height 0.3s ease-out;
    }

    .slider.closing {
        transition: max-height 0.3s ease-in;
    }

/* Child / detail row inner table */
tr.detail-padding > td.detail-padding {
    padding: 0 !important;
    border-top: 2px solid var(--colour-core-secondary) !important;
}

.slider > div[id$="_wrapper"] {
    background-color: var(--colour-grey-100);
    border-bottom: 1px solid var(--colour-ui-line);
    padding: 12px 16px;
}

    .slider > div[id$="_wrapper"] table.dataTable thead th {
        background-color: var(--colour-grey-300);
        font-size: 0.8em;
        color: var(--colour-grey-800);
        border-bottom: 1px solid var(--colour-ui-line);
    }

    .slider > div[id$="_wrapper"] table.dataTable tbody tr:last-child td {
        border-bottom: none;
    }

/* Global select styling - matches dt-button appearance */
select {
    background-color: white;
    border: 1px solid #ccc;
    border-radius: var(--radius-m);
    padding: 5px 8px;
    font-size: 14px;
    /*color: #ccc;*/
    transition: all 0.2s ease-in-out;
}

    select:hover {
        background-color: #f8f9fa;
        border-color: #aaa;
    }

/* Company structure definition page */

div#companyStructure {
    max-width: 35em;
}

ul#companyStructureList {
    padding-left: 0;
    list-style: none;
}

    ul#companyStructureList li {
        display: flex;
        align-items: center;
        margin-top: 5px;
        margin-bottom: 5px;
        padding: 8px 10px;
        background-color: var(--colour-grey-300);
        color: black;
        border: 1px solid var(--colour-ui-line);
        border-radius: var(--radius-m);
        min-height: 2.5em;
        cursor: grab;
    }

        ul#companyStructureList li.sortable-disabled {
            opacity: 0.5;
            cursor: default;
        }

    ul#companyStructureList li.dx-sortable-source {
        opacity: 0.3;
    }

    ul#companyStructureList .display {
        flex: 1;
        cursor: pointer;
    }

    ul#companyStructureList .edit {
        flex: 1;
    }

    ul#companyStructureList .levelButtons {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-left: auto;
    }

        ul#companyStructureList .levelButtons input[type=image] {
            width: 20px;
            height: 20px;
            cursor: pointer;
            border: none;
            background: none;
            padding: 0;
            border-radius: var(--radius-s);
        }

            ul#companyStructureList .levelButtons input[type=image]:hover {
                background-color: var(--colour-light-button-hover);
            }


.dx-sortable-dragging.dx-sortable-clone > li {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    background-color: var(--colour-grey-300);
    color: black;
    border: 1px solid var(--colour-ui-line);
    border-radius: var(--radius-m);
    min-height: 2.5em;
    list-style: none;
    box-sizing: border-box;
    cursor: grabbing;
}

.dx-sortable-dragging.dx-sortable-clone > li .display {
    flex: 1;
}

.dx-sortable-dragging.dx-sortable-clone > li #levelButtons {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* ── Asset Condition drag-and-drop list ──────────────────────────────────── */

ul#assetConditionList {
    padding-left: 0;
    list-style: none;
    max-width: 35em;
}

    ul#assetConditionList li {
        display: flex;
        align-items: center;
        margin-top: 5px;
        margin-bottom: 5px;
        padding: 8px 10px;
        background-color: var(--colour-grey-300);
        color: black;
        border: 1px solid var(--colour-ui-line);
        border-radius: var(--radius-m);
        min-height: 2.5em;
        cursor: grab;
    }

    ul#assetConditionList li.dx-sortable-source {
        opacity: 0.3;
    }

    ul#assetConditionList .conditionSwatch {
        width: 1.5em;
        height: 1.5em;
        border-radius: var(--radius-s);
        border: 1px solid rgba(0,0,0,0.2);
        flex-shrink: 0;
        margin-right: 0.7em;
    }

    ul#assetConditionList .display {
        flex: 1;
        cursor: pointer;
    }

    ul#assetConditionList .conditionButtons {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-left: auto;
    }

        ul#assetConditionList .conditionButtons input[type=image] {
            width: 20px;
            height: 20px;
            cursor: pointer;
            border: none;
            background: none;
            padding: 0;
            border-radius: var(--radius-s);
        }

            ul#assetConditionList .conditionButtons input[type=image]:hover {
                background-color: var(--colour-light-button-hover);
            }

.assetConditionAddForm {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    padding: 0.5em 0;
}

/* ── DataTablePreFilter – devExtreme layout ─────────────────────────────── */

#AssetRegisterSummaryDiv .DataTablePreFilter,
#AssetRegisterChangelogDiv .DataTablePreFilter,
#AssetRegisterItemsDiv .DataTablePreFilter,
#EventHistoryDiv .DataTablePreFilter,
#LeaseSummaryDiv .DataTablePreFilter,
#LeaseItemsDiv .DataTablePreFilter {
    background: white;
    border: 1px solid var(--colour-ui-line);
    border-radius: var(--radius-m);
    padding: 0.85em 1.25em;
    margin-bottom: 1em;
    display: inline-block;
    min-width: 30em;
}

/* Full-width variant for AssetList / AssetTracking filter panel */
#assetsListDiv #filtersDiv,
#assetTrackingDiv #filtersDiv {
    background: white;
    border: 1px solid var(--colour-ui-line);
    border-radius: var(--radius-m);
    padding: 0.85em 1.25em;
    margin-top: 0;
    margin-bottom: 1em;
    display: block;
    box-sizing: border-box;
    width: 100%;
}

#AssetRegisterSummaryDiv #filter-table,
#AssetRegisterChangelogDiv #filter-table,
#AssetRegisterItemsDiv #DataTablePreFilter,
#EventHistoryDiv #filter-table,
#LeaseSummaryDiv #DataTablePreFilter,
#LeaseItemsDiv #DataTablePreFilter {
    border-collapse: separate;
    border-spacing: 0 0.3em;
}

#AssetRegisterSummaryDiv #filter-table td,
#AssetRegisterChangelogDiv #filter-table td,
#AssetRegisterItemsDiv #DataTablePreFilter td,
#EventHistoryDiv #filter-table td,
#LeaseSummaryDiv #DataTablePreFilter td,
#LeaseItemsDiv #DataTablePreFilter td {
    vertical-align: middle;
    padding: 0.15em 0.75em 0.15em 0;
}

#AssetRegisterSummaryDiv #filter-table td:first-child,
#AssetRegisterChangelogDiv #filter-table td:first-child,
#AssetRegisterItemsDiv #DataTablePreFilter td:first-child,
#EventHistoryDiv #filter-table td:first-child,
#LeaseSummaryDiv #DataTablePreFilter td:first-child,
#LeaseItemsDiv #DataTablePreFilter td:first-child {
    white-space: nowrap;
    font-weight: 500;
    min-width: 9em;
    padding-right: 1em;
}

/* Align label with the top control when a row has stacked controls */
#EventHistoryDiv #filter-table tr#AssignedUserRow td:first-child {
    vertical-align: top;
    padding-top: 0.4em;
}

#EventHistoryDiv #filter-table .assigned-user-checkbox {
    margin-top: 0.4em;
}

/* Date range – horizontal pair */
.date-range-fields {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.date-range-separator {
    white-space: nowrap;
    color: var(--colour-grey-800);
    font-size: 0.9em;
    flex-shrink: 0;
}

.date-range-fields .dx-datebox,
.date-range-fields .dx-numberbox {
    width: auto !important;
    flex: 1;
    min-width: 8em;
    max-width: 12em;
}

/* Clickable rows styling for Asset Register Items list */
#assetRegisterItemsTable tbody tr {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#assetRegisterItemsTable tbody tr:hover {
    background-color: #f5f5f5 !important;
}

#assetRegisterItemsTable tbody tr:active {
    background-color: #e8e8e8 !important;
}

/* ── filter-buttons / btn-icon – shared across all filter panels ─────────── */

/* Button icon sizing – applies everywhere a .btn-icon is used */
.btn-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    vertical-align: middle;
}

/* Submit buttons in filter panels: flex to align icon + text */
.filter-buttons button.submit {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

/* Icon inside any .submit button must be white to match the button text */
.filter-buttons button.submit .btn-icon {
    filter: brightness(0) invert(1);
}

/* Notification popup */

.ThreeNotices {
    overflow-y: auto;
    max-height: 420px;
    padding-right: 4px; /* room for scrollbar */
}

.noticeDiv {
    border-radius: var(--radius-m);
    border: 1px solid var(--colour-info-border);
    background-color: var(--colour-info-background);
    padding: 1em;
    margin-bottom: 0.75em;
}

    .noticeDiv:last-child {
        margin-bottom: 0;
    }

    .noticeDiv a {
        color: var(--colour-info);
        text-decoration: underline;
    }

.noticeDateDiv {
    float: right;
    font-size: 0.8em;
    color: var(--colour-grey-800);
    padding-left: 1em;
    margin-top: 2px;
}

.noticeTitleDiv {
    font-weight: 700;
    font-size: 1.05em;
    margin-bottom: 0.6em;
    overflow: hidden; /* clear the float from noticeDateDiv */
}

#NotificationControll {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-top: 1em;
    padding-top: 0.75em;
    border-top: 1px solid var(--colour-ui-line);
    font-size: 0.9em;
    color: var(--colour-grey-800);
}

td.notificationTitle a {
    cursor: pointer;
}

/* Oversubscribed license banner */
.oversubscribed-banner {
    background-color: var(--colour-critical-background);
    border: 1px solid var(--colour-critical-border);
    color: var(--colour-critical);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

    .oversubscribed-banner img {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

    .oversubscribed-banner a {
        color: var(--colour-critical);
        font-weight: 600;
        text-decoration: underline;
        margin-left: auto;
        white-space: nowrap;
    }

        .oversubscribed-banner a:hover {
            opacity: 0.8;
        }

/* Available column – negative value error highlight */
td.Available.NegativeAvailable {
    color: var(--colour-critical) !important;
    background-color: var(--colour-critical-background) !important;
}

/* ── DataTable dt-length dxSelectBox – match dt-button / AssetStatusDropdown appearance ── */
.dt-length-dxselectbox.dx-selectbox.dx-editor-outlined,
.dt-length-dxselectbox.dx-selectbox {
    background: white !important;
    border: 1px solid #ccc !important;
    border-radius: var(--radius-m) !important;
    box-shadow: none !important;
    outline: none !important;
    transition: all 0.2s ease-in-out !important;
    height: 30px !important;
}

.dt-length-dxselectbox.dx-selectbox:hover {
    background-color: #f8f9fa !important;
    border-color: #aaa !important;
}

.dt-length-dxselectbox.dx-selectbox.dx-state-focused {
    border-color: var(--colour-ui-action) !important;
    box-shadow: 0 0 0 2px rgba(35, 135, 255, 0.15) !important;
}

.dt-length-dxselectbox .dx-texteditor-container {
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}

.dt-length-dxselectbox .dx-texteditor-input-container {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}

.dt-length-dxselectbox .dx-texteditor-input {
    font-size: 14px !important;
    line-height: 20px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: auto !important;
}

.dt-length-dxselectbox .dx-placeholder {
    top: 50% !important;
    transform: translateY(-44%) !important;
    height: auto !important;
    line-height: 20px !important;
    font-size: 14px !important;
}

.dt-length-dxselectbox .dx-placeholder::before {
    padding: 0 9px !important;
    vertical-align: baseline !important;
}

.dt-length-dxselectbox .dx-placeholder::after {
    display: none !important;
}

.dt-length-dxselectbox .dx-texteditor-buttons-container {
    height: 100% !important;
}

.dt-length-dxselectbox .dx-dropdowneditor-button {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    min-width: 24px !important;
    border-radius: 0 var(--radius-m) var(--radius-m) 0 !important;
    overflow: hidden !important;
}

.dt-length-dxselectbox .dx-dropdowneditor-button .dx-button-content {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

/* Header selector group – account selector and (when visible) company structure scope selectors */
#restrictByContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin: 0 1em;
}

#restrictByLevelSelectContainer,
#restrictByValueSelectContainer {
    display: none;
}

#restrictByContainer.visible #restrictByLevelSelectContainer,
#restrictByContainer.visible #restrictByValueSelectContainer {
    display: block;
}

/* Search buttons in FAR asset cells — inline after the label */
.asset-search-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Search button sits inline with the text input inside the Proposed FAR edit cell */
.far-edit-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.far-edit-cell input[type="text"] {
    flex: 1;
    min-width: 0;
}

#AssetSearchButton,
#AssetIdSearchButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1px 8px;
    background-color: var(--colour-ui-action);
    color: white;
    border: none;
    border-radius: var(--radius-xl);
    font-size: 0.8em;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

#AssetSearchButton:hover,
#AssetIdSearchButton:hover {
    background-color: var(--colour-dark-button-hover);
}

#AssetSearchButton:active,
#AssetIdSearchButton:active {
    background-color: var(--colour-dark-button-active);
}

/* ── Row group visual indicators ─────────────────────────── */

/* Grey left stripe on rows that belong to a group */
table.dataTable tr.dtrg-group ~ tr:not(.dtrg-group):not(.dtrg-group-end) td:first-child {
    border-left: 8px solid rgba(0, 0, 0, 0.1);
}

/* Reset stripe for rows after the group footer (they don't belong to the group) */
table.dataTable tr.dtrg-group-end ~ tr:not(.dtrg-group):not(.dtrg-group-end) td:first-child {
    border-left: none;
}

/* Re-apply stripe when a new group starts after the footer */
table.dataTable tr.dtrg-group-end ~ tr.dtrg-group ~ tr:not(.dtrg-group):not(.dtrg-group-end) td:first-child {
    border-left: 4px solid rgba(0, 0, 0, 0.1);
}

/* Match group footer background to group header */
table.dataTable tr.dtrg-group-end td {
    background-color: rgba(0, 0, 0, 0.1);
}

html.dark table.dataTable tr.dtrg-group ~ tr:not(.dtrg-group):not(.dtrg-group-end) td:first-child {
    border-left: 4px solid rgba(255, 255, 255, 0.1);
}

/* Reset stripe for rows after the group footer (they don't belong to the group) */
html.dark table.dataTable tr.dtrg-group-end ~ tr:not(.dtrg-group):not(.dtrg-group-end) td:first-child {
    border-left: none;
}

/* Re-apply stripe when a new group starts after the footer */
html.dark table.dataTable tr.dtrg-group-end ~ tr.dtrg-group ~ tr:not(.dtrg-group):not(.dtrg-group-end) td:first-child {
    border-left: 4px solid rgba(255, 255, 255, 0.1);
}

html.dark table.dataTable tr.dtrg-group-end td {
    background-color: rgba(255, 255, 255, 0.1);
}