﻿/* Texwin Figma specific changes to default Mud/Radzen components */

.fui-button-group {
    padding: 0.25rem;
    background-color: var(--fui-bg2);
    border-radius: 0.5rem;
    border: none !important;
}

.fui-button-group .mud-button-filled {
    border-radius: 0.5rem;
}

.fui-button-group .mud-button-label {
    padding: 0 1rem;
}

.fui-button-group :not(.mud-button-filled) {
    background: transparent !important;
    border-left-width: 0 !important;
}

.fui-button-group .mud-toggle-item {
    padding: 0.15rem 1rem;
}

.case-selection-bar .rz-button {
    text-align: center;
}

.case-selection-bar .rz-button-text {
    font-weight: 500;
    margin-left: 0.25rem;
}

.fui-timeline {
    height: min-content;
}

.fui-timeline .rz-timeline-item::before {
    left: calc(var(--rz-timeline-item-padding) + var(--rz-timeline-axis-size) / 2 - var(--rz-timeline-line-width) / 2 - 0.75rem) !important;
    top: 0.25rem !important;
    bottom: -0.25rem !important;
}

.fui-timeline .rz-timeline-point {
    box-shadow: none !important;
    padding: 0.9rem;
}

.fui-timeline .rzi {
    color: var(--rz-base-darker) !important;
}

.fui-timeline button:hover .rzi {
    color: var(--rz-on-secondary-lighter) !important;
}

.fui-timeline .fieldset-nopadding .rz-fieldset-content {
    padding: 0 !important;
    margin: 0.5rem 0 0 0;
}

.fui-timeline .rz-timeline-item {
    padding: 1.25rem 0.2rem !important;
}

.fui-timeline .rz-timeline-item:first-child {
    padding-top: 0 !important;
}

.fui-timeline .rz-timeline-item:last-child {
    padding-bottom: 0 !important;
}

.fui-card-label {
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    color: #333 !important;
    margin-bottom: 0.1rem;
}

.fui-card-text {
    font-weight: 400 !important;
    font-size: 0.85rem !important;
    color: #555 !important;
}

.bg-texwin-red {
    background-color: var(--rz-primary) !important;
}

.welcome-text {
    color: var(--rz-secondary-light) !important;
    font-size: 3rem !important;
}

.header-breadcrumbs-container nav {
    display: flex;
}

.fui-selectbar.rz-selectbar {
    background-color: var(--fui-bg2);
    padding: 0.25rem;
    border-radius: 0.5rem;
    user-select: none;
    gap: 0.25rem;
    --rz-selectbar-border: 1px solid transparent; /* Layout shift hack */
    --rz-selectbar-selected-background-color: white;
    --rz-selectbar-selected-color: var(--rz-text-color);
}

.rz-button.rz-variant-outlined.rz-secondary:not(.rz-state-disabled):hover {
    --rz-on-secondary-lighter: white;
}

/* No text selection for navigation and header */
.mud-breadcrumbs,
.rz-sidebar {
    user-select: none;
}

.date-range-selector-container {
    --date-range-selection-bg-minor: color-mix(in srgb, var(--rz-base-500) 10%, transparent);
    --date-range-selection-bg-active: var(--rz-base-700);
}

.date-range-selector-preset-button.mud-theme-primary {
    color: var(--mud-palette-primary-text) !important;
    background-color: var(--mud-palette-primary) !important;
}

.date-range-selector-container .mud-picker-calendar .mud-day.mud-range.mud-range-start-selected,
.date-range-selector-container .mud-picker-calendar .mud-day.mud-range.mud-range-end-selected,
.date-range-selector-container .mud-picker-calendar .mud-range-selection-primary:hover {
    background-color: var(--date-range-selection-bg-minor) !important;
    border-radius: 0 !important;
}

.date-range-selector-container .mud-picker-calendar .mud-day.mud-range.mud-range-start-selected *,
.date-range-selector-container .mud-picker-calendar .mud-day.mud-range.mud-range-end-selected *,
.date-range-selector-container .mud-picker-calendar .mud-range-selection-primary:hover * {
    z-index: 1;
}

.date-range-selector-container .mud-picker-calendar .mud-day.mud-range.mud-range-start-selected::before,
.date-range-selector-container .mud-picker-calendar .mud-day.mud-range.mud-range-end-selected::before,
.date-range-selector-container .mud-picker-calendar .mud-range-selection-primary:hover::before {
    background-color: var(--date-range-selection-bg-active) !important;
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0.5rem !important;
}
/* Current date outline */
.date-range-selector-container .mud-button-outlined.mud-button-outlined-primary {
    border-color: var(--date-range-selection-bg-active);
    color: var(--date-range-selection-bg-active) !important;
}

.rz-switch.rz-switch-checked .rz-switch-circle:hover:not(.rz-disabled)::before,
.rz-switch .rz-switch-circle:hover:not(.rz-disabled)::before {
    box-shadow: none !important;
}

.rz-switch-circle {
    width: 2.6rem;
    height: 1.55rem;
}

.rz-switch:not(.rz-switch-checked) .rz-switch-circle::before {
    transform: translateX(0.2rem) !important;
}

.rz-switch.rz-switch-checked .rz-switch-circle::before {
    transform: translateX(1.2rem) !important;
}

.grid-stack.grid-stack {
    display: grid !important;
    width: 100%;
}

.grid-stack-2col {
    grid-template-columns: 1fr 1fr;
    gap: 2rem 0 !important;
}

.grid-stack-2col .rz-form-field {
    position: relative;
}

.grid-stack-2col .rz-textbox {
    margin-top: 0.5rem;
}

.grid-stack-2col .rz-form-field:nth-child(even):not(:last-child)::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -1rem;
    height: 1px;
    left: -100%;
    right: 0;
    opacity: 0.25;
    background-color: var(--rz-base-800);
}

.filter-popover .mud-paper {
    box-shadow: none !important;
    position: relative;
}

.filter-popover .mud-typography-subtitle2 {
    line-height: 2rem;
}

.filter-popover .mud-paper::after {
    content: "";
    position: absolute;
    right: -1rem;
    top: 0;
    bottom: 0;
    width: 1px;
    opacity: 0.25;
    background-color: var(--rz-base-800);
}

.filter-popover-actions {
    padding-top: 0;
    position: relative;
}

.filter-popover-actions::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: -0.75rem;
    left: 0.75rem;
    right: -0.75rem;
    background: var(--fui-bg2);
}

.filter-popover-actions .mud-button-outlined,
.filter-popover-actions .mud-button-outlined:hover {
    background-color: white;
    border-color: color-mix(in srgb, var(--rz-base-500) 50%, transparent);
    border-radius: 0.5rem;
}

.filter-popover-actions .mud-button-filled-primary,
.filter-popover-actions .mud-button-filled.mud-button-filled-primary:hover {
    background-color: var(--rz-secondary);
    color: var(--rz-on-secondary);
    border-radius: 0.5rem;
}

.filter-popover-actions .mud-button-filled.mud-button-filled-primary:hover,
.filter-popover-actions .mud-button-outlined:hover {
    box-shadow: var(--rz-button-hover-shadow);
}

.rz-button.rz-variant-flat {
    background-color: transparent !important;
}

.rz-state-highlight.rz-menuitem,
.rz-state-highlight.rz-autocomplete-list-item,
.rz-state-highlight.rz-multiselect-item,
.rz-autocomplete-items li.rz-state-highlight,
.rz-dropdown-items li.rz-state-highlight,
.rz-multiselect-items li.rz-state-highlight,
.rz-dropdown-item.rz-state-highlight {
    font-weight: 600;
}

.timeline-datetime.timeline-datetime {
    font-size: 0.75rem !important;
    line-height: 1rem !important;
    font-weight: 400 !important;
    color: var(--rz-base-800) !important;
    display: flex;
    align-items: center;
}

.fixed-height-table .rz-data-grid-data {
    max-height: calc(100vh - 400px);
}

.active-stage-gate-icon {
    color: var(--rz-info-darker) !important;
    font-variation-settings: 'FILL' 1 !important;
    font-weight: 700 !important;
}

.case-fieldset .rz-fieldset-legend {
    width: 100%;
}

.case-fieldset .rz-fieldset-legend a {
    justify-content: space-between;
    font-weight: 600;
    font-size: 0.875rem;
}

.rz-fieldset.legend-left .rz-fieldset-legend {
    text-align: left !important;
    padding: 0.5rem 0 0 0;
    color: var(--rz-text-color) !important;
    font-weight: bold;
    font-size: 0.875rem;
}

.rz-fieldset.legend-left .rz-fieldset-content {
    padding: 0;
}

.rz-fieldset.legend-left .rz-form-field-label {
    color: var(--rz-text-color) !important;
    font-weight: bold;
}

.main-layout {
    background-color: var(--cust-background) !important;
}


.rz-tooltip {
    transform: translateX(calc(-50% + 14px)) !important;
}

.rz-tooltip .rz-top-tooltip-content::after {
    left: 50% !important;
}

.fixed-width-page-container {
    width: 1351px;
    margin-left: auto;
    margin-right: auto;
}

.fui-profile-menu {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    /* height: var(--rz-header-min-height); */
    background-color: white !important;
}

.fui-profile-menu .rz-navigation-menu {
    min-width: 16rem !important;
    border-radius: 0.5rem !important;
    padding: 0 !important;
}

.fui-profile-menu .rz-open .rz-navigation-item-link {
    padding: 1rem !important;
}

.fui-profile-menu .rz-open .rz-dropdown {
    margin: 1rem !important;
}

.fui-profile-menu .rz-open .rz-navigation-item {
    position: relative;
}

.fui-profile-menu .rz-open .rz-navigation-item::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    height: 1px;
    left: 0;
    right: 0;
    opacity: 0.25;
    background-color: var(--rz-base-800);
}

/* uglyfy Mud file input */
.compact-upload-input .mud-file-upload .file-upload-input {
    min-height: auto !important;
}

.compact-upload-input .mud-file-upload .mud-paper {
    /* width: max-content !important; */
    background-color: transparent !important;
    margin: 0 !important;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.upload-files-container .mud-chip {
    width: 100%;
    min-width: 16rem;
    padding: 1rem;
}

.upload-files-container .mud-chip > .mud-chip-content {
    justify-content: space-between;
    width: 100%;
}

.upload-files-container .mud-chip.mud-chip-size-medium {
    height: 3.25rem;
    background-color: var(--fui-bg1);
    border-radius: 0.625rem;
    color: var(--rz-secondary-light);
    font-weight: 600;
    font-size: 0.875rem;
}

/* .rz-navigation-item .rz-navigation-item-link {
    position: relative;
    border-radius: 50%;
}

.rz-navigation-item.active-sidebar-menu-item .rz-navigation-item-link {
    /* width: 2rem;
    height: 2rem;
} */

    .rz-sidebar .rz-navigation-item {
    border: 0 !important;
    --rz-panel-menu-item-hover-background-color: transparent !important;
}

.rz-sidebar .rz-panel-menu .rz-navigation-item-link {
    background: transparent !important;
}

.rz-sidebar .rz-navigation-item.active-sidebar-menu-item {
    position: relative;
    --rz-panel-menu-item-border-radius: 50%;
}

.rz-sidebar .rz-navigation-item.active-sidebar-menu-item::before {
    content: "";
    background-color: var(--rz-secondary-light);
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    top: 0.75rem;
    left: 0.75rem;
    position: absolute;
    box-shadow: none !important;
}

.rz-sidebar .rz-navigation-item.active-sidebar-menu-item i.rz-navigation-item-icon {
    color: #fff !important;
}

.rz-sidebar .rz-navigation-item.active-sidebar-menu-item img.rz-navigation-item-icon,
.filter-white {
    filter: brightness(0) saturate(100%) invert(100%);
}

.rz-sidebar .rz-panel-menu.expanded .rz-navigation-item.active-sidebar-menu-item::before {
    right: 0.75rem;
    width: auto;
    border-radius: 0.5rem;
}

.rz-sidebar .rz-panel-menu.expanded .rz-navigation-item.active-sidebar-menu-item .rz-navigation-item-text {
    color: white;
}

.rz-sidebar .rz-panel-menu.expanded .rz-navigation-item-link {
    padding: 1rem 2rem !important;
}

.order-route-entry-wrapper {
    border-radius: 0.75rem;
    margin-bottom: 0.75rem !important;
    overflow: hidden;
}

.order-route-entry-fieldset {    
    background-color: var(--fui-bg3);
}

.order-route-entry-fieldset legend {
    background-color: var(--fui-bg4);
    margin: 0;
    padding: 0.75rem;
}

.order-route-entry-fieldset legend,
.order-route-entry-fieldset .rz-expander {
    width: 100%;
}

.order-route-entry-current-flag {
    color: var(--rz-info-darker) !important;
    margin: 0 0.75rem 0 auto;
    font-weight: 100 !important;
    font-size: 1rem !important;
}