/*
 * The dark theme : the hand made fixes on dark.generated(.rtl).css (see Tools/DarkTheme/generate-dark-css.js).
 * The colors are the ones of the generator, the rules are under html[data-theme=dark].
 */
html[data-theme=dark] {
    --dk-body: #151521;
    --dk-card: #1E1E2D;
    --dk-light: #1B1B29;
    --dk-gray200: #2B2B40;
    --dk-gray300: #323248;
    --dk-gray400: #474761;
    --dk-text: #CDCDDE;
    --dk-text-strong: #FFFFFF;
    --dk-text-muted: #6D6D80;
    color-scheme: dark;
}

html[data-theme=dark] body {
    background-color: var(--dk-body);
    color: var(--dk-text);
}

/* ---------------------------------------------------------------- the switches : the white knob is dark in the generated css, it is not seen on the track */
html[data-theme=dark] .switch input:empty:not(:checked) ~ span:after {
    background-color: var(--dk-text-muted);
}

/* ---------------------------------------------------------------- the outline checkboxes (all the colors) : the generated border of the not checked ones is near the card color, it is not seen */
html[data-theme=dark] .checkbox.checkbox-outline > input:not(:checked) ~ span {
    border-color: var(--dk-text-muted);
}

/* ---------------------------------------------------------------- the "dark" checkboxes (e.g. the tags with the dark color) : the generated checked colors are the card color, they are not seen */
html[data-theme=dark] .checkbox.checkbox-dark > input:checked ~ span:after {
    border-color: var(--dk-text-strong);
}

html[data-theme=dark] .checkbox.checkbox-outline.checkbox-dark > input:checked ~ span {
    border-color: var(--dk-text);
}

html[data-theme=dark] .checkbox.checkbox-outline.checkbox-dark > input:checked ~ span:after {
    border-color: var(--dk-text);
}

/* ---------------------------------------------------------------- FullCalendar 6 (its css is put in the page by its js, its colors are variables) */
html[data-theme=dark] {
    --fc-page-bg-color: var(--dk-card);
    --fc-border-color: var(--dk-gray300);
    --fc-neutral-bg-color: rgba(255, 255, 255, 0.04);
    --fc-neutral-text-color: var(--dk-text-muted);
    --fc-list-event-hover-bg-color: var(--dk-gray200);
    --fc-non-business-color: rgba(0, 0, 0, 0.25);
    --fc-highlight-color: rgba(54, 153, 255, 0.2);
}

/* ---------------------------------------------------------------- the wizard-2 steps (the tutorials of the dashboard)
   the current step is one color with its arrow, lighter than the card so it is seen */
html[data-theme=dark] .wizard.wizard-2 .wizard-nav .wizard-steps .wizard-step[data-wizard-state=current] {
    background-color: var(--dk-gray200);
}

/* ---------------------------------------------------------------- ApexCharts (the theme is set by js/Common/Theme.js)
   the white border of the slices of the pies and donuts (stroke.colors of the chart is also the color of the lines) */
html[data-theme=dark] .apexcharts-pie-series path {
    stroke: var(--dk-card);
}

/* ---------------------------------------------------------------- the dental chart (lib/dental)
   its colors are in the inline styles of the svg : it is inverted, the hue is turned back to keep the colors of the teeth */
html[data-theme=dark] .dental-charting .chart {
    background: transparent;
}

html[data-theme=dark] .dental-charting svg {
    filter: invert(1) hue-rotate(180deg);
}

/* ---------------------------------------------------------------- the contextual table rows (.table-warning, ...)
   the generator left their borders and hover backgrounds (and the background of .table-success) light, the light text is not read on them */
html[data-theme=dark] .table-primary,
html[data-theme=dark] .table-primary > th,
html[data-theme=dark] .table-primary > td {
    background-color: hsl(211, 40%, 18%);
}

html[data-theme=dark] .table-primary th,
html[data-theme=dark] .table-primary td,
html[data-theme=dark] .table-primary thead th,
html[data-theme=dark] .table-primary tbody + tbody {
    border-color: hsl(211, 30%, 28%);
}

html[data-theme=dark] .table-hover .table-primary:hover,
html[data-theme=dark] .table-hover .table-primary:hover > th,
html[data-theme=dark] .table-hover .table-primary:hover > td {
    background-color: hsl(211, 40%, 24%);
}

html[data-theme=dark] .table-success,
html[data-theme=dark] .table-success > th,
html[data-theme=dark] .table-success > td {
    background-color: hsl(176, 40%, 18%);
}

html[data-theme=dark] .table-success th,
html[data-theme=dark] .table-success td,
html[data-theme=dark] .table-success thead th,
html[data-theme=dark] .table-success tbody + tbody {
    border-color: hsl(176, 30%, 28%);
}

html[data-theme=dark] .table-hover .table-success:hover,
html[data-theme=dark] .table-hover .table-success:hover > th,
html[data-theme=dark] .table-hover .table-success:hover > td {
    background-color: hsl(176, 40%, 24%);
}

html[data-theme=dark] .table-info,
html[data-theme=dark] .table-info > th,
html[data-theme=dark] .table-info > td {
    background-color: hsl(260, 40%, 18%);
}

html[data-theme=dark] .table-info th,
html[data-theme=dark] .table-info td,
html[data-theme=dark] .table-info thead th,
html[data-theme=dark] .table-info tbody + tbody {
    border-color: hsl(260, 30%, 28%);
}

html[data-theme=dark] .table-hover .table-info:hover,
html[data-theme=dark] .table-hover .table-info:hover > th,
html[data-theme=dark] .table-hover .table-info:hover > td {
    background-color: hsl(260, 40%, 24%);
}

html[data-theme=dark] .table-warning,
html[data-theme=dark] .table-warning > th,
html[data-theme=dark] .table-warning > td {
    background-color: hsl(40, 40%, 18%);
}

html[data-theme=dark] .table-warning th,
html[data-theme=dark] .table-warning td,
html[data-theme=dark] .table-warning thead th,
html[data-theme=dark] .table-warning tbody + tbody {
    border-color: hsl(40, 30%, 28%);
}

html[data-theme=dark] .table-hover .table-warning:hover,
html[data-theme=dark] .table-hover .table-warning:hover > th,
html[data-theme=dark] .table-hover .table-warning:hover > td {
    background-color: hsl(40, 40%, 24%);
}

html[data-theme=dark] .table-danger,
html[data-theme=dark] .table-danger > th,
html[data-theme=dark] .table-danger > td {
    background-color: hsl(354, 40%, 18%);
}

html[data-theme=dark] .table-danger th,
html[data-theme=dark] .table-danger td,
html[data-theme=dark] .table-danger thead th,
html[data-theme=dark] .table-danger tbody + tbody {
    border-color: hsl(354, 30%, 28%);
}

html[data-theme=dark] .table-hover .table-danger:hover,
html[data-theme=dark] .table-hover .table-danger:hover > th,
html[data-theme=dark] .table-hover .table-danger:hover > td {
    background-color: hsl(354, 40%, 24%);
}