/* ========================================================================== */
/* Tools Theme Overrides                                                        */
/*                                                                            */
/* Shared Material-page theme layer for tools such as ManageContainers,         */
/* ManageDevices, ManageUsers, ReportGrabber, and similar pages. This file      */
/* intentionally avoids dashboard widget-specific selectors.                    */
/* ========================================================================== */

body[data-dashboard-mode] main.main-content,
body[data-dashboard-mode] main.main-content > .container-fluid,
body[data-dashboard-mode] main.main-content form {
    background-color: var(--toolbox-dashboard-page-bg) !important;
    color: var(--toolbox-dashboard-text) !important;
}

body[data-dashboard-mode] main.main-content h1,
body[data-dashboard-mode] main.main-content h2,
body[data-dashboard-mode] main.main-content h3,
body[data-dashboard-mode] main.main-content h4,
body[data-dashboard-mode] main.main-content h5,
body[data-dashboard-mode] main.main-content h6,
body[data-dashboard-mode] main.main-content p,
body[data-dashboard-mode] main.main-content label {
    color: var(--toolbox-dashboard-heading) !important;
}

body[data-dashboard-mode] main.main-content .text-muted,
body[data-dashboard-mode] main.main-content .text-secondary,
body[data-dashboard-mode] main.main-content small,
body[data-dashboard-mode] main.main-content .running-text {
    color: var(--toolbox-dashboard-muted) !important;
}

/* .form-text is instructional/help copy, not secondary chrome - it needs to read as plain body
   text, not as de-emphasized muted text, so it gets its own brighter variable. */
body[data-dashboard-mode] main.main-content .form-text {
    color: var(--toolbox-dashboard-hint) !important;
}

body[data-dashboard-mode] main.main-content .card,
body[data-dashboard-mode] main.main-content .card-header,
body[data-dashboard-mode] main.main-content .card-body,
body[data-dashboard-mode] main.main-content .card-footer {
    background-color: var(--toolbox-dashboard-surface) !important;
    color: var(--toolbox-dashboard-text) !important;
    border-color: var(--toolbox-dashboard-border) !important;
}

body[data-dashboard-mode] main.main-content .card {
    box-shadow: var(--toolbox-dashboard-shadow) !important;
}

body[data-dashboard-mode] main.main-content hr,
body[data-dashboard-mode] main.main-content .border,
body[data-dashboard-mode] main.main-content .border-top,
body[data-dashboard-mode] main.main-content .border-bottom {
    border-color: var(--toolbox-dashboard-border) !important;
}

body[data-dashboard-mode] main.main-content .form-control,
body[data-dashboard-mode] main.main-content .form-select,
body[data-dashboard-mode] main.main-content .input-group-text,
body[data-dashboard-mode] main.main-content .input-group-outline .form-control,
body[data-dashboard-mode] main.main-content .input-group-static .form-control,
body[data-dashboard-mode] main.main-content .input-group-static .form-select {
    background-color: transparent !important;
    color: var(--toolbox-dashboard-text) !important;
    border-color: var(--toolbox-dashboard-border) !important;
}

/* <InputFile> is used bare, without the .input-group-outline wrapper that gives text inputs
   their boxed look - on its own it's a transparent fill with a ~12%-opacity border, which reads
   as no field at all. Give it its own clearly visible border and a tinted fill instead. */
body[data-dashboard-mode] main.main-content input[type="file"].form-control {
    background-color: var(--toolbox-dashboard-surface-soft) !important;
    border: 1px solid var(--toolbox-dashboard-muted) !important;
    border-radius: 0.375rem !important;
    padding: 0.5rem 0.75rem !important;
}

body[data-dashboard-mode="night"] main.main-content input.form-control,
body[data-dashboard-mode="night"] main.main-content textarea.form-control,
body[data-dashboard-mode="night"] main.main-content .input-group-outline input.form-control,
body[data-dashboard-mode="night"] main.main-content .input-group-outline textarea.form-control,
body[data-dashboard-mode="night"] main.main-content .input-group-static input.form-control,
body[data-dashboard-mode="night"] main.main-content .input-group-static textarea.form-control {
    background-color: transparent !important;
    color: var(--toolbox-dashboard-text) !important;
    -webkit-text-fill-color: var(--toolbox-dashboard-text) !important;
    caret-color: var(--toolbox-dashboard-text) !important;
}

body[data-dashboard-mode] main.main-content select.form-control option,
body[data-dashboard-mode] main.main-content .form-select option {
    background-color: var(--toolbox-dashboard-surface) !important;
    color: var(--toolbox-dashboard-text) !important;
}

body[data-dashboard-mode="night"] main.main-content select.form-control option:checked,
body[data-dashboard-mode="night"] main.main-content select.form-control option:hover,
body[data-dashboard-mode="night"] main.main-content select.form-control option:focus,
body[data-dashboard-mode="night"] main.main-content .form-select option:checked,
body[data-dashboard-mode="night"] main.main-content .form-select option:hover,
body[data-dashboard-mode="night"] main.main-content .form-select option:focus {
    background-color: var(--toolbox-theme-base) !important;
    color: var(--toolbox-theme-base-contrast) !important;
}

body[data-dashboard-mode] main.main-content .form-control::placeholder {
    color: var(--toolbox-dashboard-muted) !important;
}

body[data-dashboard-mode] main.main-content .input-group-outline label,
body[data-dashboard-mode] main.main-content .input-group-outline .form-label,
body[data-dashboard-mode] main.main-content .input-group-static label,
body[data-dashboard-mode] main.main-content .form-control-label {
    color: var(--toolbox-dashboard-muted) !important;
}

body[data-toolbox-theme] main.main-content .form-control:focus,
body[data-toolbox-theme] main.main-content .form-select:focus {
    border-color: var(--toolbox-theme-base) !important;
    box-shadow: 0 0 0 0.2rem var(--toolbox-theme-base-soft) !important;
}

body[data-dashboard-mode="night"] main.main-content .form-control:focus,
body[data-dashboard-mode="night"] main.main-content .form-select:focus,
body[data-dashboard-mode="night"] main.main-content .form-select.has-value,
body[data-dashboard-mode="night"] main.main-content .form-control.modified,
body[data-dashboard-mode="night"] main.main-content .form-select.modified {
    background-color: transparent !important;
    color: var(--toolbox-dashboard-text) !important;
    border-color: var(--toolbox-theme-base) !important;
}

body[data-dashboard-mode="night"] main.main-content .form-control:focus::placeholder {
    color: var(--toolbox-dashboard-muted) !important;
}

body[data-dashboard-mode="night"] main.main-content input.form-control:-webkit-autofill,
body[data-dashboard-mode="night"] main.main-content input.form-control:-webkit-autofill:hover,
body[data-dashboard-mode="night"] main.main-content input.form-control:-webkit-autofill:focus,
body[data-dashboard-mode="night"] main.main-content input.form-control:-webkit-autofill:active,
body[data-dashboard-mode="night"] main.main-content .input-group input.form-control:-webkit-autofill,
body[data-dashboard-mode="night"] main.main-content .input-group input.form-control:-webkit-autofill:hover,
body[data-dashboard-mode="night"] main.main-content .input-group input.form-control:-webkit-autofill:focus,
body[data-dashboard-mode="night"] main.main-content .input-group input.form-control:-webkit-autofill:active {
    background-color: transparent !important;
    -webkit-text-fill-color: var(--toolbox-dashboard-text) !important;
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
    caret-color: var(--toolbox-dashboard-text) !important;
    color: var(--toolbox-dashboard-text) !important;
    border-color: var(--toolbox-theme-base) !important;
    transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s !important;
}

body[data-dashboard-mode] main.main-content .table,
body[data-dashboard-mode] main.main-content table {
    color: var(--toolbox-dashboard-text) !important;
    border-color: var(--toolbox-dashboard-border) !important;
}

body[data-dashboard-mode] main.main-content .table thead,
body[data-dashboard-mode] main.main-content .table thead.bg-light,
body[data-dashboard-mode] main.main-content .table thead th,
body[data-dashboard-mode] main.main-content table thead th {
    background-color: var(--toolbox-dashboard-table-header-bg) !important;
    color: var(--toolbox-dashboard-muted) !important;
    border-color: var(--toolbox-dashboard-border) !important;
}

body[data-dashboard-mode] main.main-content .table td,
body[data-dashboard-mode] main.main-content .table th,
body[data-dashboard-mode] main.main-content table td,
body[data-dashboard-mode] main.main-content table th {
    color: var(--toolbox-dashboard-text) !important;
    border-color: var(--toolbox-dashboard-border) !important;
}

body[data-dashboard-mode] main.main-content .accordion-item,
body[data-dashboard-mode] main.main-content .accordion-header,
body[data-dashboard-mode] main.main-content .accordion-body,
body[data-dashboard-mode] main.main-content .accordion-collapse {
    background-color: var(--toolbox-dashboard-surface) !important;
    color: var(--toolbox-dashboard-text) !important;
    border-color: var(--toolbox-dashboard-border) !important;
}

body[data-dashboard-mode] main.main-content .accordion-button,
body[data-dashboard-mode] main.main-content .accordion-button.bg-light,
body[data-dashboard-mode] main.main-content .accordion-button.bg-gradient-dark,
body[data-dashboard-mode] main.main-content .accordion-button.collapsed {
    background: var(--toolbox-dashboard-surface-soft) !important;
    background-color: var(--toolbox-dashboard-surface-soft) !important;
    color: var(--toolbox-dashboard-text) !important;
    border-color: var(--toolbox-dashboard-border) !important;
}

body[data-toolbox-theme] main.main-content .accordion-button:not(.collapsed),
body[data-toolbox-theme] main.main-content .accordion-button.bg-gradient-dark:not(.collapsed) {
    background: var(--toolbox-theme-base) !important;
    background-color: var(--toolbox-theme-base) !important;
    color: var(--toolbox-theme-base-contrast) !important;
    border-color: var(--toolbox-theme-base) !important;
}

body[data-toolbox-theme] main.main-content .btn-primary,
body[data-toolbox-theme] main.main-content .bg-gradient-primary,
body[data-toolbox-theme] main.main-content .btn.bg-gradient-primary {
    background: var(--toolbox-theme-base) !important;
    color: var(--toolbox-theme-base-contrast) !important;
    border-color: var(--toolbox-theme-base) !important;
}

body[data-toolbox-theme] main.main-content .btn-primary:hover,
body[data-toolbox-theme] main.main-content .btn-primary:focus-visible,
body[data-toolbox-theme] main.main-content .bg-gradient-primary:hover,
body[data-toolbox-theme] main.main-content .bg-gradient-primary:focus-visible,
body[data-toolbox-theme] main.main-content .btn.bg-gradient-primary:hover,
body[data-toolbox-theme] main.main-content .btn.bg-gradient-primary:focus-visible {
    background: var(--toolbox-theme-base-hover) !important;
    color: var(--toolbox-theme-base-contrast) !important;
    border-color: var(--toolbox-theme-base-hover) !important;
}

body[data-toolbox-theme] main.main-content a:not(.btn),
body[data-toolbox-theme] main.main-content .request-link,
body[data-toolbox-theme] main.main-content .text-primary {
    color: var(--toolbox-theme-base) !important;
}

body[data-toolbox-theme] main.main-content .step-icon,
body[data-toolbox-theme] main.main-content .label,
body[data-toolbox-theme] main.main-content .step-list-p,
body[data-toolbox-theme] main.main-content .log-progress {
    color: var(--toolbox-theme-base) !important;
}

body[data-toolbox-theme] main.main-content .step,
body[data-toolbox-theme] main.main-content .step-last {
    background-color: var(--toolbox-theme-base-soft) !important;
    color: var(--toolbox-theme-base) !important;
}

body[data-toolbox-theme] main.main-content .step::after {
    background-color: var(--toolbox-theme-base-soft) !important;
}

body[data-toolbox-theme] main.main-content .step.active,
body[data-toolbox-theme] main.main-content .step-last.active {
    background-color: var(--toolbox-theme-base) !important;
    color: var(--toolbox-theme-base-contrast) !important;
}

body[data-toolbox-theme] main.main-content .step.active::after {
    background-color: var(--toolbox-theme-base) !important;
}

body[data-dashboard-mode="night"] main.main-content .step-icon,
body[data-dashboard-mode="night"] main.main-content .label,
body[data-dashboard-mode="night"] main.main-content .step-list-p,
body[data-dashboard-mode="night"] main.main-content .log-progress {
    color: var(--toolbox-theme-bright) !important;
}

body[data-dashboard-mode="night"] main.main-content .step,
body[data-dashboard-mode="night"] main.main-content .step-last {
    background-color: var(--toolbox-theme-bright-soft) !important;
    color: var(--toolbox-theme-bright) !important;
    box-shadow: 0 0 0 1px var(--toolbox-theme-bright-border) !important;
}

body[data-dashboard-mode="night"] main.main-content .step::after {
    background-color: var(--toolbox-theme-bright-soft) !important;
}

body[data-dashboard-mode="night"] main.main-content .step.active,
body[data-dashboard-mode="night"] main.main-content .step-last.active {
    background-color: var(--toolbox-theme-base) !important;
    color: var(--toolbox-theme-base-contrast) !important;
}

body[data-dashboard-mode="night"] main.main-content .step.active::after {
    background-color: var(--toolbox-theme-base) !important;
}

body[data-dashboard-mode] main.main-content .log-container,
body[data-dashboard-mode] main.main-content .information-container {
    background-color: var(--toolbox-dashboard-input-bg) !important;
    color: var(--toolbox-dashboard-text) !important;
    border-color: var(--toolbox-dashboard-border) !important;
}

body[data-dashboard-mode] main.main-content .log-row:hover {
    background-color: var(--toolbox-dashboard-surface-soft) !important;
}

body[data-dashboard-mode] main.main-content .log-line-number {
    background-color: var(--toolbox-dashboard-surface-muted) !important;
    color: var(--toolbox-dashboard-text) !important;
}

body[data-dashboard-mode] main.main-content .log-info,
body[data-dashboard-mode] main.main-content .log-message {
    color: var(--toolbox-dashboard-text) !important;
}