@import url(../lib/fontsource/roboto/300.css);
@import url(../lib/fontsource/roboto/400.css);
@import url(../lib/fontsource/roboto/500.css);

:root {
    --dm-main-content-background: #DCE0E5;
    --mud-palette-action-default-hover: rgba(0, 0, 0, 0.04);
    --dm-highlight-selected-color: rgba(2, 136, 209, 0.08);
    --color-slate-25: #3D4651;
    --color-slate-35: #4F5A69;
    --color-slate-65: #8B97A7;
    --color-primary-500: #2196F3; /* current app primary */
    --color-primary-700: #1976D2; /* optional for higher contrast */
    --color-white: #FFFFFF;
    /* Sidebar Tokens */
    --sidebar-container-bg: #4F5A69; /* slate/35 */
    --sidebar-bg-default: #4F5A69;
    --sidebar-bg-hover: #3D4651;
    --sidebar-bg-selected: #2196F3;
    --sidebar-bg-disabled: #4F5A69;
    --sidebar-fg-default: #FFFFFF;
    --sidebar-fg-hover: #FFFFFF;
    --sidebar-fg-selected: #FFFFFF;
    --sidebar-fg-disabled: #8B97A7;
    --sidebar-parent-expanded-bg: #3D4651;
}

.mud-main-content {
    min-height: calc(100vh - var(--mud-appbar-height));
}

/* MudBlazor overrides */
/* this takes care that the table toolbar has an equal padding to the left and right */
/* and slet the mud table height grow according to its content */
.mud-toolbar.mud-toolbar-gutters.mud-table-toolbar {
    padding-left: 8px !important;
    padding-top: 8px;
    height: auto !important;
}

/* override the default MudGrid spacing of 3 to a smaller size */
.mud-grid-spacing-xs-3 {
    width: calc(100% + 8px);
    margin: -4px;
}

    .mud-grid-spacing-xs-3 > .mud-grid-item {
        padding: 4px;
    }

mark {
    background-color: transparent !important;
    font-weight: bold;
}

.mud-tab.dense-tab-48px {
    min-width: 48px !important;
}

.readonly-select input {
    cursor: default !important;
}

.readonly-textfield input {
    cursor: default !important;
}

.dm-continuity-embedded-footer {
    background-color: white;
    width: 100% !important;
    top: auto !important;
    bottom: 0 !important;
    position: fixed;
}

/* highlight a table row */
.table-item-selected {
    background-color: var(--sidebar-bg-selected) !important;
    color: var(--sidebar-fg-default) !important;
}
/* when selected a row, the text is white */
    .table-item-selected > td {
        color: var(--sidebar-fg-default) !important;
    }
        .table-item-selected > td .mud-input {
            color: var(--sidebar-fg-default) !important;
        }

        .table-item-selected .mud-icon-button {
            color: var(--sidebar-fg-default) !important;
        }

/*
    User Story 313243: Update Project Detailed View
    https://tfs.omicron.at/tfs/OMICRON/PrimSoftwareX/_workitems/edit/313243
*/
.navitem-drawer-open { /* NavItem padding */
    padding-left: 24px;
    padding-right: 24px;
}

.group-title { /* NavItems group title padding */
    padding-left: 24px;
}

.mud-nav-link.active:not(.mud-nav-link-disabled) /* Selected NavItem Text */ {
    color: var(--sidebar-fg-default) !important;
    background-color: var(--sidebar-bg-selected) !important;
    font-weight: 400 !important; /* override default font weight 500*/
}

/* normal background */
.mud-nav-link:not(.mud-nav-link-disabled) {
    color: var(--sidebar-fg-default) !important;
    background-color: var(--sidebar-bg-default) !important;
}

    /* icon color in sidebar */
    .mud-nav-link:not(.mud-nav-link-disabled) .mud-nav-link-icon.mud-nav-link-icon-default {
        color: var(--sidebar-fg-default) !important;
    }

/* hover */
.mud-nav-link:hover {
    background-color: var(--sidebar-bg-hover) !important; /* background on hover */
    color: var(--sidebar-fg-default) !important; /* text color on hover */
}

.mud-nav-item > .active svg /* Selected NavItem Icon */ {
    color: var(--mud-palette-primary) !important;
}

.tap-content {
    margin-top: 8px;
}

.mud-tab.mud-tab-active {
    color: var(--mud-palette-primary);
}

.mud-tabs-toolbar {
    color: var(--mud-palette-primary);
}

.mud-tab {
    color: var(--mud-palette-text-primary);
}

.mud-tab-slider {
    background-color: var(--mud-palette-primary);
}

.horizontal-centered-flex-container {
    display: flex;
    justify-content: center;
    color: grey;
}
/*
END User Story 313243
*/

.asset-nameplate-info {
    background-color: var(--mud-palette-drawer-background);
}

/*User Story 311713: Implement Report Details View*/
.report-setting-expansion-panel {
    border-radius: 0px !important;
    margin: 0px !important;
}

.reportsetting-panel-header {
    padding: 0px !important;
}

.reportsetting-active {
    background-color: #ebf6fb;
    margin-right: 16px;
}

.reportsetting-expandable {
    cursor: pointer;
    margin-right: 16px;
    margin-left: 16px
}

.reportsetting-expanded-content {
    cursor: pointer;
    margin-right: 10px;
    margin-left: 10px;
}

.reportsetting-not-expandable {
    cursor: default;
    margin-right: 16px;
    margin-left: 16px;
    visibility: hidden;
}

.reportsetting-detail-view-header {
    padding-left: 20px;
    padding-top: 10px;
}
/*
END User Story 311713
*/

.edit-form {
    background-color: white !important;
}

.primary-checkbox .mud-checkbox span {
    color: var(--mud-palette-primary);
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

/* makes a table cell (in a disable row) look disabled */
.testconfig-disabled-row .mud-table-cell {
    color: lightgray !important;
}

/* make an icon (in a disable row) look disabled */
.testconfig-disabled-row td > .mud-svg-icon {
    opacity: 0.3;
}

/* used in mudtable to disable/hide a checkbox based on a condition */
.disabled-checkbox-row .mud-table-cell .mud-table-cell-checkbox {
    display: none;
    opacity: 0;
    pointer-events: none;
}

/* to be used for MudSelect, when the popup should autofit the longest item width */
.select-popover-autosize {
    width: auto !important;
    max-width: initial !important;
    min-width: 200px !important;
}

/* sidebar styles */

.omicron-sidebar {
    background-color: var(--sidebar-bg-default);
    color: var(--sidebar-fg-default); /* text color */
}