/**
 * @copyright Marktplatz Design und Software GmbH
 * @author Marouane Edghoughi <med@marktplatz-agentur.de>
 * @date 17.10.2024 12:00
 * @description: This file is intended to hold the required styles in order to override MudBlazor
 */

/* Font faces declaration */
@font-face {
    font-family: 'Lato-Light';
    src: url('/fonts/Lato-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Lato-Regular';
    src: url('/fonts/Lato-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Lato-Bold';
    src: url('/fonts/Lato-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* custom palette */
:root {
    --mp-primary: #339cd9;
    --mp-secondary: #e52148;
    --mp-tertiary: #677379;
    
    --mp-background: #f2f3f5;
    --mp-element-background: #ffffff;
    --mp-border: #d9e1ea;
    
    --mp-sidebar-bg: ;
    --mp-sidebar-text: ;
    --mp-sidebar-link: ;
    
    --mp-success: #237d21;
    --mp-error: #ca3838;
    --mp-warning: ;
    
    --mp-text: #23252a;
    --mp-inverted-text: #ffffff;
    
    --mp-notification: #deffff;
    --mp-inverted-notification: #007e7e;

    --mp-table-header-text: ;
    --mp-table-header-bg: ;
    --mp-table-body-text: ;
    --mp-table-odd-row-bg: ;
    --mp-table-even-row-bg: ;
    
    --mp-border-radius-small: 6px;
    --mp-default-transition: all 0.3s ease-in-out;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    background-color: var(--mp-background) !important;
    transition: var(--mp-default-transition) !important;
}

.full-height-layout {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
}

/* Footer - Marktplatz Signet */
.mp-footer-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    padding: 20px !important;
    margin-top: 40px !important;
}

/* Set text colors */
.mud-typography-default,
.mud-typography-h1,
.mud-typography-h2,
.mud-typography-h3,
.mud-typography-h4,
.mud-typography-body1,
.mud-typography-body2 {
    color: var(--mp-text) !important;
    transition: var(--mp-default-transition) !important;
}

/* Mud typography styling */
.mud-typography-h1 {
    position: relative;
    margin-bottom: 18px !important;
}
.mud-typography-h1:after {
    position: absolute;
    content: '';
    width: 60px;
    height: 4px;
    background-color: var(--mp-primary);
    left: 0;
    bottom: -8px;
    transition: var(--mp-default-transition) !important;
}

/* Customize app background */
.mud-main-content {
    /*height: 100% !important;*/
    background-color: var(--mp-background) !important;
    transition: var(--mp-default-transition) !important;
}

/* App Bar */
.mud-appbar {
    color: var(--mp-text) !important;
    background-color: var(--mp-element-background) !important;
    border-bottom: 4px solid var(--mp-primary) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-appbar .mud-icon-button svg {
    fill: var(--mp-sidebar-text) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-appbar .appbar-menu-btn {
    margin-right: 20px !important;
    width: 64px !important;
    height: 100% !important;
    border-radius: unset !important;
    background-color: var(--mp-sidebar-bg) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-appbar .mud-toolbar-gutters {
    padding-left: 0 !important;
}
.mud-appbar .app-signet {
    margin-right: 10px;
}

.mud-appbar .switch-theme {
    font-weight: bold !important;
    color: var(--mp-primary) !important;
    cursor: pointer;
    transition: var(--mp-default-transition) !important;
}
.mud-appbar .switch-theme:hover {
    text-decoration: underline;
}

/*  =============================   */
/*       Component: Sidebar         */
/*  =============================   */

.mud-drawer {
    color: var(--mp-sidebar-text) !important;
    background-color: var(--mp-sidebar-bg) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-drawer .mud-drawer-content .mud-nav-item svg {
    fill: var(--mp-sidebar-text) !important;
    transition: var(--mp-default-transition) !important;
}

.mud-drawer .mud-drawer-content .mud-nav-item:hover .mud-nav-link {
    color: var(--mp-sidebar-link) !important;
    transition: all 0.2s ease-in-out !important;
}
.mud-drawer .mud-drawer-content .mud-nav-item:hover svg {
    fill: var(--mp-sidebar-link) !important;
    transition: all 0.2s ease-in-out !important;
}

.mud-drawer .mud-drawer-content .mud-nav-item .mud-nav-link.active {
    color: var(--mp-sidebar-link) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-drawer .mud-drawer-content .mud-nav-item .mud-nav-link.active svg {
    fill: var(--mp-sidebar-link) !important;
}

    /* Customize MudGrid => used as Component Container */
.mud-paper:not(.mud-popover):not(.mud-picker-inline-paper):not(.mud-picker.mud-picker-paper) {
    padding: 20px !important;
    background-color: var(--mp-element-background) !important;
/*    border: 1px solid var(--mp-border) !important;*/
    border-radius: var(--mp-border-radius-small) !important;
    transition: var(--mp-default-transition) !important;
}

/* Login page */
.mud-layout .mud-main-content:has(.app-background) {
    background-color: #F2F3F5 !important;
}

.mud-paper:not(.mud-popover):not(.mud-picker-inline-paper):not(.mud-picker.mud-picker-paper).login-wrapper {
    padding: 40px !important;
    border: 2px solid #D9E1EA !important;
    border-radius: 20px !important;
    background-color: #FFFFFF !important;
    box-shadow: 0px 508px 142px 0px rgba(0, 0, 0, 0.00), 0px 325px 130px 0px rgba(0, 0, 0, 0.01), 0px 183px 110px 0px rgba(0, 0, 0, 0.03), 0px 81px 81px 0px rgba(0, 0, 0, 0.05), 0px 20px 45px 0px rgba(0, 0, 0, 0.06) !important;
}

.login-wrapper .mud-typography-h2 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #23252A !important;
}

.login-wrapper .mud-input-label {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #23252A !important;
}

.login-wrapper .mud-typography-body2 {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #5f5f5f !important;
}

.login-wrapper input[type="email"],
.login-wrapper input[type="password"] {
    border-color: #D9E1EA !important;
    background-color: #F2F3F5 !important;
    color: #23252A !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    transition: var(--mp-default-transition) !important;
    outline: none !important;
}
.login-wrapper input[type="email"]:focus,
.login-wrapper input[type="password"]:focus {
    border-color: #339CD9 !important;
    background-color: #F2F3F5 !important;
    color: #23252A !important;
}
.login-wrapper input[type="email"].invalid,
.login-wrapper input[type="password"].invalid {
    border-color: #CA3838 !important;
}
.login-wrapper .text-danger {
    color: #CA3838 !important;
}

.login-wrapper .mud-button-filled.mud-button-filled-primary {
    background-color: #677379 !important;
    transition: var(--mp-default-transition) !important;
}
.login-wrapper .mud-button-filled.mud-button-filled-primary:hover {
    background-color: #5d686d !important;
}

.login-wrapper .mud-link {
    color: #339CD9 !important;
    text-decoration: none !important;
    transition: var(--mp-default-transition) !important;
}
.login-wrapper .mud-link:hover {
    color: #297dae !important;
}

/*  =============================   */
/*      Component: MudTable         */
/*  =============================   */

.mud-table {
    background-color: var(--mp-background) !important; 
    transition: var(--mp-default-transition) !important;
}

/*  table toolbar   */
.mud-table .mud-table-toolbar {
    border-top-left-radius: var(--mp-border-radius-small) !important;
    border-top-right-radius: var(--mp-border-radius-small) !important;
    background-color: var(--mp-element-background) !important;
    transition: var(--mp-default-transition) !important;
}

/*  table header    */
.mud-table .mud-table-head {
    background-color: var(--mp-table-header-bg) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-table .mud-table-head tr th {
    color: var(--mp-table-header-text) !important;
    font-family: 'Lato-Bold';
    font-size: 15px !important;
    font-weight: 700 !important;
    transition: var(--mp-default-transition) !important;
}
.mud-table .mud-table-head tr th .mud-icon-button {
    color: var(--mp-table-header-text) !important;
    transition: var(--mp-default-transition) !important;
}

/*  activity state indicator    */
.mud-table-root .mud-table-head .mud-table-cell.row-state-header {
    width: 10px;
}
.mud-table-root .mud-table-body .mud-table-cell.row-state-wrapper {
    position: relative;
    width: 10px;
}
.mud-table-root .mud-table-body .mud-table-cell.row-state-wrapper .row-state {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    width: 6px;
    height: 95%;
    transition: var(--mp-default-transition);
}
.mud-table-root .mud-table-body .mud-table-cell.row-state-wrapper .row-state.active {
    background-color: var(--mp-success);
}
.mud-table-root .mud-table-body .mud-table-cell.row-state-wrapper .row-state.inactive {
    background-color: var(--mp-error);
}
.mud-table-root .mud-table-body .mud-table-cell.row-state-wrapper .row-state.row-selected {
    background-color: var(--mp-primary);
}

/*  table body text */
.mud-table-root .mud-table-body .mud-table-cell {
    color: var(--mp-table-body-text) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-table-root .mud-table-body .mud-table-cell:first-child .mud-icon-button {
    color: var(--mp-table-body-text) !important;
    transition: var(--mp-default-transition) !important;
}

/*  table rows styling  */
.mud-table.mud-table-striped .mud-table-container
.mud-table-root .mud-table-body .mud-table-row:nth-child(odd) {
    background-color: var(--mp-table-odd-row-bg) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-table-hover.mud-table-striped .mud-table-container
.mud-table-root .mud-table-body .mud-table-row:nth-of-type(odd):hover {
    filter: brightness(0.95);
    cursor: pointer;
}

.mud-table.mud-table-striped .mud-table-container
.mud-table-root .mud-table-body .mud-table-row:nth-child(even) {
    background-color: var(--mp-table-even-row-bg) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-table-hover.mud-table-striped .mud-table-container
.mud-table-root .mud-table-body .mud-table-row:nth-of-type(even):hover {
    filter: brightness(0.95);
    cursor: pointer;
}

.mud-table.mud-table-striped .mud-table-container
.mud-table-root .mud-table-head .mud-table-row .mud-table-cell,
.mud-table.mud-table-striped .mud-table-container
.mud-table-root .mud-table-body .mud-table-row .mud-table-cell {
    border-bottom: none !important;
}

/* empty row styling */
.mud-table .mud-table-container .mud-table-root .mud-table-body .mud-table-empty-row {
    background-color: var(--mp-table-odd-row-bg) !important;
    transition: var(--mp-default-transition) !important;
}

/*  table footer    */
.mud-table-root .mud-table-foot {
    background-color: var(--mp-element-background) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-table-root .mud-table-foot .mud-table-cell {
    color: var(--mp-table-body-text) !important;
    transition: var(--mp-default-transition) !important;
}

/*  table pagination    */
.mud-table .mud-pagination-toolbar,
.mud-table-pagination-toolbar {
    border-top: none !important;
}



/* Customize MudLink */
.mud-link {
    font-weight: bold !important;
    color: var(--mp-primary) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-link:hover {
    text-decoration: underline !important;
}

/*  ==========================   */
/*      Input Components         */
/*  ==========================   */

.mud-input-label {
    color: var(--mp-text) !important;
    font-family: "Lato-Bold" !important;
    font-size: 15px !important;
}

.mud-input {
    background-color: var(--mp-background) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-input.mud-typography-input {
    font-family: "Lato-Light" !important;
}
.mud-input.mud-input-outlined {
    border-radius: var(--mp-border-radius-small) !important;
}

.mud-input>input.mud-input-root-outlined {
    padding: 14px !important;
}

/* muss noch verbessert werden */
div.mud-input-slot.mud-input-root-outlined {
    padding: 14px !important;
}

/* MudSelect */
.mud-popover.mud-popover-open {
    overflow-y: hidden !important;
}
.mud-popover.mud-paper {
    padding: 0 !important;
}

.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-width: 2px !important;
    border-color: var(--mp-border) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-input.mud-input-outlined:hover .mud-input-outlined-border,
.mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--mp-primary) !important;
}
.mud-input-control.required-field .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--mp-error) !important;
}

/*  date picker */
.mp-datepicker {
    padding: 14px !important;
    font-family: "Lato-Regular" !important;
    color: var(--mp-text) !important;
    background-color: var(--mp-background) !important;
    border: 2px solid var(--mp-border) !important;
    border-radius: var(--mp-border-radius-small) !important;
    transition: var(--mp-default-transition) !important;
    outline: none !important;
}
.mp-datepicker:hover,
.mp-datepicker:focus {
    border-color: var(--mp-primary) !important;
}

/* input textarea */
.ql-toolbar.ql-snow,
.ql-container.ql-snow {
    border-color: var(--mp-border) !important;
    border-style: solid !important;
    background-color: var(--mp-background) !important;
    transition: var(--mp-default-transition) !important;
}
.ql-toolbar.ql-snow {
    border-width: 2px !important;
    border-top-right-radius: var(--mp-border-radius-small) !important;
    border-top-left-radius: var(--mp-border-radius-small) !important;
}

.ql-toolbar.ql-snow .ql-formats .ql-picker.ql-header .ql-picker-label::before {
    color: var(--mp-text) !important;
    transition: var(--mp-default-transition) !important;
}

.ql-toolbar.ql-snow .ql-formats svg {
    fill: var(--mp-text) !important;
    transition: var(--mp-default-transition) !important;
}
.ql-container.ql-snow {
    border-width: 0px 2px 2px 2px !important;
    border-bottom-right-radius: var(--mp-border-radius-small) !important;
    border-bottom-left-radius: var(--mp-border-radius-small) !important;
}

/*.ql-container.ql-snow:hover,*/
/*.ql-container.ql-snow p:focus {*/
/*    border-color: var(--mp-primary) !important;*/
/*    transition: var(--mp-default-transition) !important;*/
/*}*/

/*  =============================   */
/*      Component: MudButton        */
/*  =============================   */

.mud-icon-button.mud-button {
    border-radius: var(--mp-border-radius-small) !important;
}

.mud-button {
    padding: 16px 30px !important;
}

.mud-button-filled {
    transition: var(--mp-default-transition) !important;
}

.mud-button-filled.mud-button-filled-success {
    background-color: var(--mp-success) !important;
}

.mud-button-filled.mud-button-filled-primary {
    background-color: var(--mp-primary) !important;
}

.mud-button-filled.mud-button-filled-secondary {
    background-color: var(--mp-secondary) !important;
}

.mud-button-filled {
    box-shadow: unset !important;
}

.mud-button .mud-button-label {
    font-size: 15px !important;
    text-transform: none !important;
}

.mud-button-filled.mud-button-filled-primary .mud-button-label,
.mud-button-filled.mud-button-filled-secondary .mud-button-label {
    color: var(--mp-inverted-text) !important;
    transition: var(--mp-default-transition) !important;
}

/* button disabled state */
.mud-button-root:disabled .mud-button-label,
.mud-button-filled:disabled .mud-button-label,
.mud-button:disabled .mud-button-label {
    color: var(--mp-text) !important;
}

/* mud tabbar */
.mud-tabs-tabbar {
    background-color: var(--mp-background) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-tab.mud-tab-active {
    color: var(--mp-primary) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-tabs-tabbar .mud-tab-slider {
    background: var(--mp-primary) !important;
    transition: var(--mp-default-transition) !important;
}

/* mud proggress */
.mud-progress-linear.mud-progress-linear-color-primary:not(.mud-progress-linear-buffer) .mud-progress-linear-bar {
    background-color: var(--mp-primary) !important;
}


/* MapComponent */
/* Modal Form */


/* EditMap Component */

.mapbox-container .map-control-container .zoom-control {
    position: relative;
    display: flex;
    flex-direction: column;
    /*border-radius: 10px;*/
}
.mapbox-container .map-control-container .zoom-control .zoom-in {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.mapbox-container .map-control-container .zoom-control .zoom-out {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.mapbox-container .map-control-container .zoom-control hr {
    position: absolute;
    margin: auto 4px;
    top: calc(50% - 1px);
    width: 80%;
    height: 2px;
    border-radius: 5px;
    color: #FFFFFF;
    z-index: 1500;
}

.mp-modal-container .mp-modal-content .mp-modal-footer {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}
.mp-modal-container .mp-modal-content .mp-modal-footer button {
    padding: 16px 30px;
    outline: none;
    border: none;
    border-radius: var(--mp-border-radius-small);
    transition: var(--mp-default-transition);
}
.mp-modal-container .mp-modal-content .mp-modal-footer button.save {
    color: var(--mp-inverted-text);
    background-color: var(--mp-primary);
}
.mp-modal-container .mp-modal-content .mp-modal-footer button.save:hover {
    /*background-color: #1a7aeb;*/
}
.mp-modal-container .mp-modal-content .mp-modal-footer button.save:disabled {
    background-color: #66a6f2;
}

/* custom */
.truncate-text {
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Style News Drag Items */
.news-drag-item .drag-item-type {
    padding: 10px;
    border-radius: var(--mp-border-radius-small);
    background-color: var(--mp-background);
    transition: var(--mp-default-transition);
}

/* MudDivider */
.mud-divider {
    border-width: 2px !important;
    border-color: var(--mp-border) !important;
    transition: var(--mp-default-transition) !important;
}

/*  ====================================   */
/*      Component: Mud Color Picker        */
/*  ====================================   */
.mud-picker:not(.mud-input-control-input-container) .mud-input {
    background-color: var(--mp-background) !important;
    transition: var(--mp-default-transition) !important;
}

.mud-picker .mud-input-control-input-container > .mud-input {
    background-color: var(--mp-element-background) !important;
    transition: var(--mp-default-transition) !important;
}
.mud-popover .mud-paper {
    background-color: var(--mp-element-background) !important;
    transition: var(--mp-default-transition) !important;
}