:root {
    --primary-color-light: #04050c;
    --primary-color-medium: #1c1e35;
    --primary-color-darker: #111221;
    --primary-color-dark: #04050c;
    --button-darker: #242849;
    --contrast-color-light: #15a44d;
    --contrast-color-dark: #0d7b38;
    /* Mobile list card colors */
    --bp-card-bg: #12131e;
    --bp-card-header-bg: #1c1e2e;
    --bp-card-active: #1b1d2e;
    --bp-card-border: rgba(255, 255, 255, 0.08);
    --bp-card-title: #ffffff;
    --bp-card-value: #e6e6ea;
    --bp-card-label: #8b8fa3;
    /* The commission chart on the dashboard statistics. Its own step rather than the
       light one dimmed – checked against the dark card surface (#161828). */
    --bp-chart-bar: #15a44d;
    --bp-chart-baseline: rgba(255, 255, 255, 0.15);
    /* The second series, for the revenue chart where a bar is split into margin and cost.
       Its own step for the dark surface rather than the light one dimmed, and checked
       against the first one on the dark card. */
    --bp-chart-bar-secondary: #3987e5;
    /* The partial invoicing notice at the top of a document (PartialInvoicingNotice.ss).
       Its three surfaces are their own dark step rather than the light ones dimmed, since
       MDB's subtle backgrounds are the light palette whichever theme is on – checked
       against the card the notice sits in (#161828) and against the text on them. */
    --bp-notice-text: #e6e6ea;
    /* The coins icon is the notice's mark rather than a word of it, so it is a step quieter
       than the text – the same grey the quiet labels on the mobile list cards use, which
       still clears 3:1 on all three of the surfaces below. */
    --bp-notice-icon: #8b8fa3;
    --bp-notice-link: #4caf50;
    --bp-notice-neutral-bg: #232538;
    --bp-notice-neutral-accent: #8b8fa3;
    --bp-notice-open-bg: #332a1d;
    --bp-notice-open-accent: #e4a11b;
    /* Amber words on the amber surface – the remaining amount on a list row. The light
       theme darkens the amber to hold the cream, the dark one lifts it. */
    --bp-notice-open-text: #e4a11b;
    --bp-notice-finished-bg: #172e22;
    --bp-notice-finished-accent: #15a44d;
    /* Hovering lifts a dark surface rather than pressing it – the light theme goes the other
       way (see the unfinished documents banner in DashboardPage.css) */
    --bp-notice-hover-brightness: 1.15;
    /* The frame around the panes of the tabs on an edit form (Page.css → .bpTabsContent).
       Lifted a step from the card (#161828) rather than sunk below it, the way a dark
       surface reads as raised */
    --bp-tabs-pane-bg: #1c1e31;
    --bp-tabs-pane-border: rgba(255, 255, 255, 0.06);
    /* The documents found in the calendar's event modal, over the form (CalendarPage.css): a
       step lighter than the modal (rgb(22 24 40)) so the list stands off it, and the green of
       the hover strong enough to show on the dark */
    --bp-calendar-results-bg: #23263b;
    --bp-calendar-results-text: #e6e6ea;
    --bp-calendar-results-hover: rgb(21 164 77 / 0.22);
    /* The label in the border of the calendar's document field (CalendarPage.css): on the
       modal's own colour, so the border stops behind it, and white like the other labels */
    --bp-calendar-label-bg: rgb(22 24 40);
    --bp-calendar-label-text: #fff;
}
.alert-danger {
    background-color: #791c2c !important;
    color: #ffb5c1 !important;
}
html {
    background-image: linear-gradient(#13141f, rgb(4 5 12 / 1));
    background-position: top;
    background-repeat: no-repeat;
    background-color:rgb(4 5 12 / 1);
    min-height: 500px;
    background-position-y: 59px;
}
body {
    background-color:initial;
}
.text-primary{
    color:white !important;
}
.text-muted {
    color: #bebebe !important;
}
.btn-darker{
    background-color: var(--button-darker) !important;
}
.dashboard hr{
    border-top: 2px solid;
    opacity: 1;
    color: rgb(114 125 161 / 0.15); 
}
hr{
    border-top: 2px solid;
    opacity: 1;
    color: var(--contrast-color-light);
}
header nav.bg-white{
    background-color: rgb(22 24 40) !important;
    -moz-box-shadow: 0px -2px 20px 1px #000;
    -webkit-box-shadow: 0px -2px 20px 1px #000;
    box-shadow: 0px -2px 20px 1px #000;
}
ul.dropdown-menu {
    background-color: #3566b6 !important;
    border: none;
}
.dashboard-card-dropdown ul.dropdown-menu {
    background-color: var(--contrast-color-dark) !important;
    border: none;
}
div.dropdown-menu {
    background-color: var(--contrast-color-dark) !important;
}
div.dropdown-menu .employeeChip input.form-check-input:checked:focus,
div.dropdown-menu .employeeChip input.form-check-input:focus,
#EmployeeModalSelector .employeeChip input.form-check-input:checked:focus,
#EmployeeModalSelector .employeeChip input.form-check-input:focus {
    border-color: var(--contrast-color-dark) !important;
}
#EmployeeFilterDropdownMenu{
    max-height: 360px;
    overflow-x: hidden;
    overflow-y: auto;
}
ul.dropdown-menu a, div.dropdown-menu a{
    color: white !important;
}
.employeeChip{
    background-color: var(--contrast-color-light);
    color: white;
}
.chip:hover:not(.chip-outline) {
    background-color: #28b55f !important;
}
.dropdown-item.active, .dropdown-item:active, .dropdown-item:focus, .dropdown-item:hover {
    background-color: var(--contrast-color-light);
}
.datatable td.fixed-cell{
    background-color: #161828 !important;
}
.card{
    background-color: rgb(22 24 40) !important;
    border-color: rgb(114 125 161) !important;
    border: 1px solid !important;
    border-radius: 10px;
    color: rgb(114 125 161 / 0.15) !important;
}
.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6,
.card p,
.card label,
table.datatable, 
.datatable table,
.datatable table p,
.datatable-pagination-nav,
.table-editor table,
.select-wrapper input,
.form-outline input,
.form-outline label.form-label,
.table>:not(caption)>*>* {
    color: white !important;
} 
.card h6.text-black{
    color: #000 !important;
}
INPUT:-webkit-autofill, 
SELECT:-webkit-autofill, 
TEXTAREA:-webkit-autofill {
    animation-name: onautofillstart;
    -webkit-background-clip: text;
    box-shadow: inset 0 0 20px 20px rgb(0 0 0 / 0) !important;
    -webkit-box-shadow: 0 0 20px 20px rgb(0 0 0 / 0) inset !important;
}
input.no-autofill-bkg:-webkit-autofill {
    -webkit-background-clip: text;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active,
INPUT:-webkit-autofill
SELECT:-webkit-autofill, 
TEXTAREA:-webkit-autofill,
INPUT:-webkit-autofill:hover, 
INPUT:-webkit-autofill:focus, 
INPUT:-webkit-autofill:active, 
SELECT:-webkit-autofill:hover, 
SELECT:-webkit-autofill:focus, 
SELECT:-webkit-autofill:active, 
TEXTAREA:-webkit-autofill:hover, 
TEXTAREA:-webkit-autofill:focus, 
TEXTAREA:-webkit-autofill:active,
input:-internal-autofill-selected  {
    -webkit-text-fill-color: rgb(255, 255, 255) !important;
    -webkit-background-clip: text;
    animation-name: none !important;
    color: white;
    box-shadow: inset 0 0 20px 20px rgb(0 0 0 / 0) !important;
    -webkit-box-shadow: 0 0 20px 20px rgb(0 0 0 / 0) inset !important;
    transition: all 0s 50000s;
}
.datatable table tr.subRow{
    background-color: #0e0f19 !important;
}
.card .card-header, 
.card .card-footer,
tbody, td, tfoot, th, thead, tr {
    border-color: rgb(114 125 161 / 0.15);
}
.datatable, .table, .table-editor{
    background-color: initial;
}
.datatable, .table {
    --mdb-datatable-border-color:rgb(114 125 161 / 0.15) !important;
}
.select-wrapper{
    color: white;
    background: var(--primary-color-medium);
    border: var(--primary-color-light);
    outline: var(--primary-color-light);
}
.form-outline .form-control~.form-notch div{
    border: 1px solid var(--contrast-color-dark);
}
.btn-outline-primary{
    border-color: #505776 !important;
}
/* An outline button which fills in on hover has to take its text with it. Only the background
   was set here, so the button kept the green it is written in when it is not hovered and the
   two greens cancelled each other out – the "new addition" button of the calculator was a green
   rectangle with nothing readable on it.

   The darker green of the palette fills it rather than the lighter one the primary buttons use:
   white on the dark green is legible, white on the lighter green is thin. The border keeps the
   lighter green so the button is still recognisably the one it was.

   MDBootstrap itself only moves the border colour on hover, which is why the light theme never
   had this – it does not fill at all there.

   The addition buttons of the calculator are outline success buttons too. They have a hover of
   their own further down (.shapeBtn:not(.selected):hover), which is the more specific rule and
   goes on winning. */
.btn-outline-success:hover,
.btn-outline-success:focus{
    background-color: var(--contrast-color-dark);
    border-color: var(--contrast-color-light);
    color: #fff;
}
.datatable.datatable-hover tbody tr:hover, .table.table-hover tbody tr:hover {
    background-color: var(--primary-color-medium) !important;
}
.form-outline .form-control.disabled, .form-outline .form-control:disabled, .form-outline .form-control[readonly] {
    background-color: var(--primary-color-medium);
}
nav.sidenav{
    background-color: #1c1f35 !important;
}
.sidenav-primary .sidenav-item .sidenav-link:hover, 
.sidenav-primary .sidenav-link:active, 
.sidenav-primary .sidenav-link:focus, 
nav.sidenav a, 
textarea, 
div.tab-content, 
.accordion-item,
.fa-calendar:before, 
i.fas,
.datatable.datatable-striped tbody tr:nth-of-type(odd),
.table tbody tr:nth-of-type(odd),
.table-editor i.far{
    color: white !important;
}
/* An alert keeps its own light background in the dark theme, so its icons and words follow the
   alert's text colour instead of the white above and on .card p (the subscription terms notice,
   for one) */
.alert h1,
.alert h2,
.alert h3,
.alert h4,
.alert h5,
.alert h6,
.alert p,
.alert i.fas{
    color: inherit !important;
}
.accordion{
    background: #222739 !important;
    border-color: #11111c !important;
    border-radius: 10px !important;
}
.accordion-button {
    color: gray;
}
.accordion-borderless .accordion-item .accordion-button:not(.collapsed) {
    color: #222739;
}
.sidenav-primary .sidenav-link.active {
    color: var(--contrast-color-light);
}
.form-check-input[type=radio]:checked:after {
    border-color: #4CAF50 !important;
    background-color: #4CAF50 !important;
}
.form-check-input:checked:focus {
    border-color: #4CAF50 !important;
}
.datepicker-footer-btn{
    color: var(--contrast-color-light);
}
.datepicker-cell.selected .datepicker-cell-content,
.datepicker-header {
    background-color: var(--contrast-color-light);
}
#DateFilterRangeOutline{
    border: 1px solid #FFF !important;
    border-radius: 5px !important;
}
#DateFilterMenu button.dateFilterPreset{
    color: white !important;
    border-color: white !important;
    border-width: 1px;
}
#DateFilterClear{
    color: white !important;
}
#DateFilterClear:hover{
    background-color: var(--contrast-color-light) !important;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    background-color: initial;
    border-color: var(--contrast-color-light) !important;
    color: var(--contrast-color-light) !important;
}
.nav-tabs .nav-link.active i.fas{
    color: var(--contrast-color-light) !important;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link {
    background-color: initial;
    border-color: var(--contrast-color-light) !important;
    color: #FFF !important;
}
.nav-tabs .nav-link:hover {
    background-color: var(--contrast-color-dark);
}
#CircumferenceBox {
    border-color: var(--contrast-color-light) !important;
}
.form-check-input[type=checkbox]:checked {
    background-color: var(--contrast-color-light) !important;
    border-color: var(--contrast-color-dark) !important;
}
.form-switch .form-check-input:checked[type=checkbox]:after {
    background-color: var(--contrast-color-light) !important;
}
.toast a{
    color: white !important;
    text-decoration: underline;
}
.toast-success {
    background-color: #29642c !important;
    color: white !important;
    border-color: #2b6f2e !important;
}
.toast-danger {
    background-color: #af233a;
    color: white;
    border-color: #951a2e;
}
.btn-outline-primary:hover,
.shapeBtn.selected,
.btn-outline-light:hover,
.btn-outline-light:focus {
    background-color: var(--contrast-color-light) !important;
    border-color: var(--contrast-color-dark) !important;
    color: white;
}
/* An addition button says it's on the calculation with .selected. :hover must therefore not
   look like .selected: when an addition is deselected the pointer is still on the button, so
   an identical hover style leaves it looking as if it were still on the calculation – and on a
   touch device :hover even sticks until something else is tapped. Hence a hover style of its
   own, only for the buttons which aren't selected and only where there's a real pointer. */
@media (hover: hover) {
    .shapeBtn:not(.selected):hover {
        background-color: rgb(114 125 161 / 0.25) !important;
        border-color: var(--contrast-color-dark) !important;
        color: white !important;
    }
}
.btn-outline-light:hover,
.btn-outline-light:focus{
    color: #FFF !important;
}
#detailedCalculationSheet thead {
    color: var(--contrast-color-light);
}
#detailedCalculationSheet td{
    color: white;
}
#detailedCalculationSheet .dropstart .dropdown-toggle:before {
    content: initial;
}
#ForgotPassword {
    display: flex;
    align-items: start;
    margin-bottom: 0px !important;
    margin-top: 5px;
}
#ForgotPassword a{
    color: var(--contrast-color-dark) !important;
}
.modal-content{
    background-color: rgb(22 24 40) !important;
}
/* The tags of the documents in the calendar's document field a grey which stands out from the
   modal – see CalendarPage.css */
#CalendarEventModal .calendarDocumentChip{
    background-color: rgb(255 255 255 / 0.16);
    color: #e6e6ea;
}
/* Two fields which are plain .form-control rather than MDB's outlined fields, so they kept its
   white: the documents field of the calendar's event modal (a tag input – see CalendarPage.css)
   and the colour fields (ColorPicker.ss, and the one in the event modal). They are drawn the way
   the outlined fields are here – see .form-notch above – with nothing behind them and the green
   border */
#CalendarEventModal .calendarDocumentTags,
.form-control.bpColorField{
    background-color: transparent;
    color: #fff;
    border-color: var(--contrast-color-dark);
}
.modal-header, .modal-footer{
    border-color: rgb(114 125 161 / 0.15);
}
.form-check-input:checked:focus {
    border-color: #482685 !important;
}
#EmployeeFilter, #EmployeeFilterDropdownButton{
    border: 1px solid !important
}
#EmployeeFilterDropdownButton{
    border: 1px solid var(--contrast-color-dark) !important;
    color: var(--contrast-color-dark) !important;
}
#EmployeeFilterDropdownButton:hover,
#EmployeeFilterDropdownButton:focus{
    border: 0.1rem solid var(--contrast-color-dark) !important;
    background-color: var(--contrast-color-dark) !important;
    color: #FFF !important;
}
.form-check-input.is-valid, 
.was-validated .form-check-input:valid {
    border-color: #4CAF50;
}
.btn-outline-light{
    border: 1px solid #4CAF50 !important;
    color: #9E9E9E !important;
}
.datatable-pagination-button, .modal-title, .modal-content{
    color: white !important;
}
.btn-close{
    background: transparent url("../images/icons/delete_dark.svg") 50%/1em auto no-repeat;
}
.vr{
    background-color: var(--primary-color-medium) !important;
}
.datatable-pagination-button:hover{
    background-color: #138d43;
}
.loading-backdrop{
    background-color: rgb(13 7 24) !important;
}
#WarningModalDescription a{
    color: #4CAF50 !important;
    text-decoration: underline;
}
.form-switch .form-check-input {
    background-color: #9E9E9E !important;
}
#SaveInOneLine{
    cursor: pointer;
}
.form-check-input:checked:focus:before {
    box-shadow: none !important;
}
#datatable-custom .form-check-input:checked:focus {
    border-color: var(--contrast-color-dark) !important;
}
.form-outline .form-control.circumferenceBoxInput:disabled {
    background-color: #161828 !important;
    color: #161828 !important;
}
.iconPickerIcon:hover{
    background-color: var(--contrast-color-light) !important;
    color: var(--contrast-color-dark);
}
.iconPickerIcon.selected{
    background-color: var(--contrast-color-light) !important;
    color: var(--contrast-color-dark);
}
.statusItem:hover, .statusItem.selected{
    border: 1px solid #FFF !important;
}
.popconfirm{
    background-color: var(--primary-color-medium) !important;
    color: white !important;
}
.pricefactoreditor{
    background-color: var(--primary-color-darker) !important;
}
.card-body ul li {
    color: white !important;
}
#AiImportDropZone{
    border: 2px dashed #ccc; 
    border-radius: 8px; 
    padding: 40px 20px; 
    text-align: center; 
    cursor: pointer; 
    transition: border-color 0.2s, background-color 0.2s;
}
#AiImportDropZone.active{
    border-color: #198754;
    background-color: #2b2d45;
}
@media (max-width: 767.98px) {
    #datatable-custom table tbody tr {
        border-color: rgba(255, 255, 255, 0.1) !important;
    }
    #datatable-custom table td::before {
        color: rgba(255, 255, 255, 0.5);
    }
}
/*
    The AI price table import guide and the import modal.
    Both .card and .list-group-item set their own text color for the light
    theme, and everything nested in them inherits it — so the guide's step
    indicator, table lists and product cards need their colors here.
*/
.list-group-item{
    color: #fff;
}
#GuideStepper,
#GuideProductList{
    color: #fff;
}
#GuideProductList .guideProductCard{
    color: #fff !important;
    background-color: var(--primary-color-medium) !important;
    border-color: rgb(114 125 161 / 0.3) !important;
}
#GuideTableList .list-group-item,
#GuideDoneList .list-group-item{
    background-color: var(--primary-color-medium);
    border-color: rgb(114 125 161 / 0.3);
}
#GuideStepper .guideStepItem.active .guideStepNumber,
#GuideStepper .guideStepItem.done .guideStepNumber{
    background-color: var(--contrast-color-light);
    border-color: var(--contrast-color-light);
}
#GuideStepUpload .form-select,
#GuideStepTables .form-select,
#GuideStepProducts .form-select{
    color: #fff;
    background-color: var(--primary-color-darker);
    border-color: rgb(114 125 161 / 0.4);
}
.aiImportJobWatcherText{
    color: #fff;
}
/* The browser's own date and time fields (the calendar's event modal, for one) draw their
   calendar and clock icons black, which can't be seen on the dark. Telling the browser they are
   on a dark page makes it draw the icons – and the picker they open – light. */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"]{
    color-scheme: dark;
}
/* The calendar (CalendarPage.css) on the dark. FullCalendar draws its days on nothing, with
   light grey lines and the dates and weekdays as links in the primary blue. Here the days are a
   surface a step off the card, the days of the months either side a step back into it, the
   lines quiet and the words in the greys of the rest of the dark theme. `body #Calendar`
   outweighs the #Calendar of CalendarPage.css, which comes after this file. */
body #Calendar{
    --fc-page-bg-color: #161828;
    --fc-neutral-bg-color: #1c1e31;
    --fc-border-color: rgb(255 255 255 / 0.08);
    --fc-today-bg-color: rgb(21 164 77 / 0.14);
    --fc-list-event-hover-bg-color: rgb(255 255 255 / 0.06);
    --fc-highlight-color: rgb(21 164 77 / 0.2);
    --fc-non-business-color: rgb(0 0 0 / 0.2);
}
body #Calendar .fc-daygrid-day,
body #Calendar .fc-timegrid-col,
body #Calendar .fc-timeline-lane,
body #Calendar .fc-list{
    background-color: #1c1e31;
}
body #Calendar .fc-day-other{
    background-color: #161828;
}
/* Today and the day a link is about (.calendarFocusDay – CalendarPage.css) are see-through
   tints, laid over the day's own surface rather than over the card */
body #Calendar .fc-daygrid-day.fc-day-today,
body #Calendar .fc-timegrid-col.fc-day-today{
    background: linear-gradient(var(--fc-today-bg-color), var(--fc-today-bg-color)), #1c1e31;
}
body #Calendar .fc-daygrid-day.calendarFocusDay,
body #Calendar .fc-timegrid-col.calendarFocusDay{
    background: linear-gradient(rgb(59 113 202 / 0.18), rgb(59 113 202 / 0.18)), #1c1e31;
}
/* The weekdays at the top quieter than the dates – the grey of the labels */
body #Calendar .fc-col-header-cell-cushion,
body #Calendar .fc-timegrid-axis-cushion,
body #Calendar .fc-timegrid-slot-label-cushion,
body #Calendar .fc-timeline-slot-cushion{
    color: #8b8fa3;
}
body #Calendar .fc-daygrid-day-number,
body #Calendar .fc-list-day-cushion a,
body #Calendar .fc-datagrid-cell-cushion,
body #Calendar .fc-daygrid-more-link{
    color: #e6e6ea;
}
body #Calendar .fc-day-other .fc-daygrid-day-number{
    color: #5c6078;
}
/* The events drawn as a dot and a line of text rather than a bar of their colour */
body #Calendar .fc-daygrid-dot-event,
body #Calendar .fc-list-event a{
    color: #e6e6ea;
}
body #Calendar .fc-daygrid-dot-event:hover{
    background-color: rgb(255 255 255 / 0.06);
}
/* The lists which scroll inside the page – the icon picker, the status and employee pickers,
   the employee filter and the calendar's document search – with the browser's dark scrollbar
   rather than its white one, and a thumb a quiet grey on no track of its own */
.iconpicker-holder,
#StatusPickerModalSelector,
#EmployeeModalSelector,
#EmployeeFilterDropdownMenu,
#CalendarEventModal .calendarDocumentResults{
    color-scheme: dark;
    scrollbar-color: rgb(255 255 255 / 0.25) transparent;
}
/* The export modal and the import guide of the product list (ProductTransferModals.ss). Their
   dropdowns are plain selects rather than MDB's outlined fields, so they kept the light
   surface: they are drawn the way the outlined fields are here, with nothing behind them, the
   green border and a light arrow. The open list is the dark surface of the modal. The progress
   bars are given a quiet track instead of the white one. */
#ProductImportModal .form-select{
    --mdb-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e6e6ea' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-color: transparent;
    color: #fff;
    border-color: var(--contrast-color-dark);
}
#ProductImportModal .form-select option{
    background-color: var(--primary-color-darker);
    color: #fff;
}
#ProductExportModal .progress,
#ProductImportModal .modal-body .progress{
    background-color: rgb(255 255 255 / 0.12);
}
/* The tiles of the dashboard settings modal are cards, and a card's own text here is all but
   transparent (see .card above) – only its headings, paragraphs and labels are made white. The
   tile's name and the small texts in it are neither, so they are given the light text of the
   theme, and the handle the same quieter grey as the other quiet labels (DashboardSettings.js) */
#DashboardSettingsModal .dashboardSettingsTile,
#DashboardSettingsModal .dashboardSettingsTile strong,
#DashboardSettingsModal .dashboardSettingsTile span,
#DashboardSettingsModal .dashboardSettingsTile .btn-link {
    color: #e6e6ea !important;
}
#DashboardSettingsModal .dashboardSettingsTile .dashboardSettingsHandle {
    color: #8b8fa3 !important;
}
/* The gear under the dashboard's tables (DashboardSettingsModal.ss). MDB's outline-secondary is
   drawn for the light theme – a dark grey ring, and on hover a fill the icon disappears into – so
   here the ring and the gear are a quiet grey, and hovering puts a faint fill behind them rather
   than turning the button one solid colour */
#dashboardSettingsButton {
    color: #727480 !important;
    border-color: #727480 !important;
    background-color: transparent !important;
}
#dashboardSettingsButton:hover,
#dashboardSettingsButton:focus-visible {
    border-color: #727480 !important;
    background-color: rgb(255 255 255 / 0.1) !important;
}
#dashboardSettingsButton:active {
    background-color: rgb(255 255 255 / 0.18) !important;
}
/* The gear itself – every i.fas is made white above, which would win over the button's grey */
#dashboardSettingsButton i.fas.fa-gear,
#dashboardSettingsButton:hover i.fas.fa-gear,
#dashboardSettingsButton:focus-visible i.fas.fa-gear {
    color: #727480 !important;
}
/* The drag handle of a tile in the dashboard settings – a light tint on hover here, where the
   dark one of DashboardPage.css wouldn't show */
#DashboardSettingsModal .dashboardSettingsHandle:hover {
    background-color: rgb(255 255 255 / 0.08);
}
/* The frame of the status and the employee fields, and of the totals – the same quiet line as
   the cards here */
.pickerFieldBox,
.totalFieldBox {
    border-color: rgb(114 125 161 / 0.35);
}

/* The UploadCare widgets (UploadCareWidget.ss, the logo on the Settings page and in the
   onboarding, the table imports) dark as well. UploadCare's blocks work every colour out from
   one variable, --darkmode, which they set to 0 on these same elements with :where() – so
   no specificity, and any selector here wins. They never follow the system's own setting,
   which is why Light.css needs nothing. The widget on the table pages draws itself in a
   shadow root (css-src), which still takes the variable from its element out here. */
.lr-wgt-theme,
.lr-wgt-common,
lr-file-uploader-regular,
lr-file-uploader-minimal,
lr-file-uploader-inline {
    --darkmode: 1;
}

/* The options of a product of the calculation type Options (BetterPricingOptions.ss). A card of
   an option is a step lighter than the tab pane it sits in, the way a dark surface reads as
   raised – the .card rule above would give it the colour of the page's own card, which is
   darker than the pane. The picture's box is the same step, since MDB's light grey stays light. */
.productOptions .productOption.card{
    background-color: var(--primary-color-medium) !important;
    border-color: rgb(114 125 161 / 0.3) !important;
}
.productOptions .productOptionImage{
    background-color: var(--primary-color-darker);
    border-color: rgb(114 125 161 / 0.3) !important;
}

/* The options to choose from in the complex calculator (ComplexCalculatorPage.ss). MDB's hover
   is its light grey, which white text can't be read on – a lift instead, and the option chosen
   in the green the calendar's results use */
#ProductOptionsModal .list-group-item{
    border-color: rgb(114 125 161 / 0.15);
}
#ProductOptionsModal .list-group-item-action:hover,
#ProductOptionsModal .list-group-item-action:focus{
    background-color: rgb(255 255 255 / 0.06);
    color: #fff;
}
#ProductOptionsModal .productOptionsModalItem:has(input:checked){
    background-color: rgb(21 164 77 / 0.22);
}

/* The modal which chooses the main product's groups of additional products – the same as the
   options modal above */
#AdditionsGroupsChooseModal .list-group-item{
    border-color: rgb(114 125 161 / 0.15);
}
#AdditionsGroupsChooseModal .list-group-item-action:hover,
#AdditionsGroupsChooseModal .list-group-item-action:focus{
    background-color: rgb(255 255 255 / 0.06);
    color: #fff;
}
#AdditionsGroupsChooseModal .additionsGroupsChooseItem:has(input:checked){
    background-color: rgb(21 164 77 / 0.22);
}