: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;
}
.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{
    height: 250px !important;
    overflow: scroll;
}
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;
}
.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;
}
.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;
}