:root {
    --mad-calc-height: calc(100vh - 107px);
    --bg-yellow: rgb(255, 224, 147);
}

html {
    font-size: 14px;
}

.w-100 {
    width: 100% !important;
}

.h-100 {
    height: 100% !important;
}

button {
    white-space: nowrap;
}

.fixed {
    position: fixed !important;
}

/*tooltip*/
.entry-accent > .mud-tooltip-root {
    width: 100%;
}
/*navigation*/
.mud-nav-group-disabled, .mud-nav-link-disabled {
    display: none !important;
}

.mud-nav-group > .mud-nav-link > .mud-nav-link-text{
    font-weight: 400 !important;
}

/*widget*/
.home-end {
    min-height: var(--mad-calc-height);
}

.home-start {
    min-height: calc(100vh - 265px);
}

@media (max-width: 1920px) {
    .home-start {
        min-height: calc(calc(100vh - 280px) / 2);
    }
}

/*DataGrid*/
.inactive-row, .no-token-row {
    background-color: color-mix(in srgb, var(--mud-palette-error-lighten) 25%, transparent) !important;
    transition: background-color 150ms ease-in-out !important;
}

    .inactive-row:hover, .no-token-row:hover {
        background-color: color-mix(in srgb, var(--mud-palette-error-darken) 35%, transparent) !important;
    }

.weekend {
    background-color: var(--mud-palette-error-lighten) !important;
    transition: background-color 150ms ease-in-out !important;
}

.today {
    background-color: var(--bg-yellow) !important;
}

.entry-accent {
    box-shadow: inset 4px 0px 0px 0px var(--accent) !important;
    border: 1px solid var(--accent);
    cursor: pointer;
}

    .entry-accent:hover {
        background-color: color-mix(in srgb, var(--background) 25%, transparent) !important;
        transition: background-color 150ms ease-in-out !important;
    }


/*Calendar*/

.calendarWidget .calendarContainer {
    width: 100%;
    height: 100%
}

.calendarWidget .mud-cal-week-cell-holder .event:not(.event-outofoffice) {
    background-color: var(--mud-palette-primary);
}

.calendarWidget .mud-cal-week-cell-holder .event-outofoffice {
    background-color: rgba(253,207,89, 0);
}

.calendarWidget .mud-cal-drop-item:has(.mud-cal-week-template-holder .event) {
    background-color: transparent;
    height: 100% !important;
    bottom: auto;
    width: 1% !important;
    z-index: 20;
}

.calendarWidget .mud-drop-zone:has(.mud-cal-week-template-holder .event) {
    width: fit-content;
    height: auto !important;
    position: sticky;
    top: 0;
}

.calendarWidget .mud-cal-week-template-holder .calendar-event-icon {
    display: flex;
    padding: 0.5rem 2rem 0.5rem 1rem;
    border-radius: 0 1rem 0 1rem;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-event-icon .mud-icon-root {
    margin-right: 8px;
}

.calendarWidget .mud-cal-toolbar {
    flex-wrap: wrap;
    gap: 8px;
}

    .calendarWidget .mud-cal-toolbar > div:first-child {
        flex-wrap: wrap;
        gap: 8px;
    }

.calendarWidget .mud-cal-current-time {
    border: var(--mud-palette-primary) 2px solid !important;
}

.calendarWidget .mud-calendar .mud-cal-grid-header {
    text-align: start;
}

.calendarWidget .mud-cal-week-cell-holder:has(.event-outofoffice),
.calendarWidget .mud-cal-month-cell:has(.event-outofoffice) {
    background-color: rgba(253,207,89, 0.5);
}

/* Day/Week view: a drop-item represents a time block that must fill its
   slot vertically. In Month view the same element is an absolutely-positioned
   event LINE that stacks — leaving height:auto lets MonthView.js measure
   per-item height, stack them, and emit "+N Meer" when the cell overflows. */
.calendarWidget .mud-cal-week-view .mud-cal-drop-item,
.calendarWidget .mud-cal-day-view .mud-cal-drop-item {
    height: 100%;
}


.calendarWidget .mud-cal-week-view .mud-chip-content {
    width: 100%;
}

.calendarWidget .context-wrapper {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}



  

/*form*/
.MadForm {
    padding: 32px;
}

    .MadForm > * {
        margin-bottom: 2rem !important;
    }

.mud-button-group-outlined.mud-button-group-override-styles .mud-button-root {
    padding: 0.5rem 1rem !important;
}


.mud-input-control.mud-input-required > .mud-input-control-input-container > .mud-input-label::after {
    color: #C95E52;
}

/*table*/
.truncate-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 96.5vw;
    display: inline-block;
    vertical-align: middle;
}

@media (min-width: 1280px) and (max-width: 1920px) {
    .truncate-cell {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }
}

@media (min-width: 1920px) {
    .truncate-cell {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 20vw;
        display: block;
    }
}

td:has(.cancelled-reason) {
    background-color: var(--mud-palette-error);
    color: var(--mud-palette-error-text) !important;
    justify-content: start !important;
}

.statusChip {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 120px;
    padding: 0 8px;
}

.madTable .mud-table-container {
    max-height: calc(100vh - 228px);
    overflow-y: auto;
}

.madTable .mud-grid-item.my-2 {
    margin: 0 !important;
}

.madTable .mud-table-cell button {
    padding: 0 !important;
    margin: 0 !important;
}

.mud-table-cell button:not(.custom-cell-button) {
    color: var(--mud-palette-primary) !important;
}

    .mud-table-cell button:not(.custom-cell-button):disabled {
        color: transparent !important;
    }

/*Mud dialog*/

.mud-dialog-content {
    padding: 8px 24px 36px 24px !important;
}
.mud-dialog-title h6{
    font-size: 1.5em;
}

/*Sensitive text*/
.sensitive-container {
    min-width: 220px;
}

.sensitive-text {
    transition: opacity 0.15s ease;
}

.devops-task-autocomplete-popover,
.timetracking-task-autocomplete-popover {
    width: auto !important;
    min-width: 420px !important;
}