:root {
    --primary-color-light: #04050c;
    --primary-color-medium: #1c1e35;
    --primary-color-dark: #04050c;
    --contrast-color-light: #107e15;
    --contrast-color-dark: #4CAF50;
    /* Mobile list card colors */
    --bp-card-bg: #f7f7f7;
    --bp-card-header-bg: #f4f5f7;
    --bp-card-active: #f3f4f6;
    --bp-card-border: #e2e5ea;
    --bp-card-title: #4f4f4f;
    --bp-card-value: #3e3e3e;
    --bp-card-label: #6b7280;
    /* The commission chart on the dashboard statistics. One series, one colour –
       checked against the white card surface for contrast and chroma. */
    --bp-chart-bar: #107e15;
    --bp-chart-baseline: #d7dbe0;
    /* The second series, for the revenue chart where a bar is split into margin and cost.
       Checked against the first one and the white card surface: they stay apart for a
       colourblind reader as well, and both clear 3:1 on the card. */
    --bp-chart-bar-secondary: #2a78d6;
    /* The partial invoicing notice at the top of a document (PartialInvoicingNotice.ss).
       These are the colours MDB's subtle backgrounds and the card's own text gave it, now
       written down so the dark theme can have its own without changing this one. */
    --bp-notice-text: #4f4f4f;
    --bp-notice-icon: #4f4f4f;
    --bp-notice-link: #3b71ca;
    --bp-notice-neutral-bg: #eeeeee;
    --bp-notice-neutral-accent: #9fa6b2;
    --bp-notice-open-bg: #fbf1dd;
    --bp-notice-open-accent: #e4a11b;
    --bp-notice-open-text: #896110;
    --bp-notice-finished-bg: #dcf1e4;
    --bp-notice-finished-accent: #14a44d;
    --bp-notice-hover-brightness: 0.97;
    /* The frame around the panes of the tabs on an edit form (Page.css → .bpTabsContent) */
    --bp-tabs-pane-bg: #f5f6f8;
    --bp-tabs-pane-border: #e6e8ec;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: var(--contrast-color-dark);
    border-color: var(--contrast-color-dark);
    background-color: #eaecef;
}
/* The line under the tabs on an edit form (Tabs.ss) – the dark theme draws it green under every
   tab, this one a light grey under the tabs which aren't open, the open one keeping its green */
.bpTabsNav .nav-link:not(.active) {
    border-bottom-color: #dfe2e6;
}
#InsulatedTabs {
    border-bottom: 1px solid #eaecef;
}
.addition {
    background-color: #eaecef !important;
    border-color: #b8b8b8 !important;
    color: #000 !important;
}
#detailedCalculationSheet .dropstart .dropdown-toggle:before {
    content: initial;
}
/* 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: #d5d8dc !important;
        color: black !important;
        border: 1px solid #737070 !important;
    }
}
.toast-danger {
    background-color: #af233a !important;
    color: white !important; 
    border-color: #770114 !important;
}
.loading-backdrop {
    background-color: rgb(25 25 25) !important;
}
.text-primary{
    color:#595959 !important;
}
#WarningModalDescription a{
    color: #595959 !important;
    text-decoration: underline;
}
div.datatable.fancylist table {
    background: #ececec !important;
}
div.datatable.fancylist table thead{
    background: #dedede !important;
}
div.datatable.fancylist table tr.subRow{
    background-color: #fff !important;
}
.select-input.form-control[readonly]:not([disabled]), .form-outline .form-control {
    background-color: #fff !important;
}
/* The square metre table colours its cells from the cheapest to the dearest on the field around
the input (colorCells in SquareMetreTablePage.js). The white above covered it, so those inputs are
see-through – the dark theme shows the colour already. A price table's prices are plain fields,
coloured on the field itself; its measurements are see-through like this. */
#PriceTable .form-outline .form-control,
#SquareMetreTable .form-outline .form-control,
#LengthTable .form-outline .form-control {
    background-color: transparent !important;
}
.statusItem:hover, .statusItem.selected{
    border: 3px solid #fff !important;
}
/* Icon picker icons (e.g. the status edit page) carry Bootstrap's text-white in
   their markup, which is invisible on the light background. Override for the light
   theme; Dark.css handles the dark-theme colours. */
.iconPickerIcon{
    color: #4f4f4f !important;
}
.iconPickerIcon:hover,
.iconPickerIcon.selected{
    background-color: var(--contrast-color-light) !important;
    color: #fff !important;
}
.btn-outline-light{
    border: 1px solid #4CAF50 !important;
    color: #9E9E9E !important;
}
.btn-outline-primary:hover,
.btn-outline-light:hover,
.btn-outline-light:focus {
    background-color: var(--contrast-color-light) !important;
    border-color: var(--contrast-color-dark) !important;
    color: white !important;
}
/* An addition on the calculation. Grey rather than the green of the outline buttons, and
   darker than the light grey an addition which isn't selected gets on hover (above), so the
   two never look alike – see the note on .shapeBtn:not(.selected):hover. Hover and focus keep
   it, or the green of btn-outline-success would come back while the pointer is on it. */
.shapeBtn.selected,
.shapeBtn.selected:hover,
.shapeBtn.selected:focus,
.shapeBtn.selected:active {
    background-color: #abadaf !important;
    border-color: #7f8386 !important;
    color: white !important;
}
.btn-outline-light:hover,
.btn-outline-light:focus{
    color: #FFF !important;
}
.action-row-button{
    color: #1f1f1f !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: #e7e7e7;
}
.datatable.datatable-striped tbody tr:nth-of-type(even) td.fixed-cell{
    background-color: #ffffff !important
}
.datatable.datatable-striped tbody tr:nth-of-type(odd) td.fixed-cell{
    background-color: #fafafa !important;
}
/*
    The AI price table import guide and the import modal — the price table cards
    are nested inside the page card, so they get a slightly tinted background to
    stand out from it
*/
#GuideProductList .guideProductCard{
    background-color: #fafafa;
}
#GuideTableList .list-group-item,
#GuideDoneList .list-group-item{
    background-color: #fafafa;
}
/* The gear under the dashboard's tables (DashboardSettingsModal.ss) – the same quiet ring and
   gear as in the dark theme (see Dark.css), a step darker to hold the light background, and on
   hover a faint fill behind them rather than MDB's solid one */
#dashboardSettingsButton {
    color: #a3a1a1 !important;
    border-color: #a3a1a1 !important;
    background-color: transparent !important;
}
#dashboardSettingsButton:hover,
#dashboardSettingsButton:focus-visible {
    border-color: #5c5e69 !important;
    background-color: rgb(0 0 0 / 0.06) !important;
}
#dashboardSettingsButton:active {
    background-color: rgb(0 0 0 / 0.12) !important;
}
#dashboardSettingsButton i.fas.fa-gear,
#dashboardSettingsButton:hover i.fas.fa-gear,
#dashboardSettingsButton:focus-visible i.fas.fa-gear {
    color: #a3a1a1 !important;
}
/* The front page (HomePage.ss): the light picture of the calculator, a little stronger than the
   dark one as it is pale on its own, and dark text over it */
#promotion::before {
    background-image: url('../images/promotions/promotion_dk_light.webp');
    opacity: 0.5;
}
#promotion .promotionText {
    color: #464646;
}