/* ========================================
   SHARED GLOBAL STYLES
   Note: Buttons in buttons.css, Chips in chips.css, 
         Typography in typography.css, Text inputs in textInput.css,
         Layout in layout.css, Tables in tables.css
   ======================================== */

/* Root variables for shape corners */
:root {
    --md-shape-corner-small: 8px;
    --md-shape-corner-medium: 12px;
    --md-shape-corner-large: 16px;
    --md-shape-corner-extra-large: 24px;
}

/* ========== SHAPE CORNERS ========== */

.mud-button {
    border-radius: var(--md-shape-corner-small);
}

.mud-paper, .mud-card {
    border-radius: var(--md-shape-corner-medium);
    /*background-color: color-mix(in srgb, var(--md-sys-color-primary-container) 3%, #ffffff);*/
    background-color: color-mix(in srgb, var(--md-sys-color-primary-container) 2%, var(--md-sys-color-surface-container-lowest));
    /*you can also use as background - leave it for testing --mud-palette-background-custom*/
    box-shadow: none; /*Ingen elevation*/
}

/* Reset MudTabs - skal ikke have card-styling. Tilføjet for at fjerne baggrundsfarve på tabs */
.mud-tabs-tabbar {
    background-color: transparent !important;
    border-radius: 0 !important;
}


.drawer-container {
    background-color: var(--mud-palette-background-custom);
    padding: 8px 16px;
    gap: 12px;
    margin:8px 4px;
}


/* ========== UTILITY CLASSES ========== */

.custom-overlay {
    position: fixed;
    inset: 0;
    z-index: 1301;
    animation: overlay-fade-in 250ms ease-out forwards;
}

@keyframes overlay-fade-in {
    from {
        background-color: rgba(0, 0, 0, 0);
    }

    to {
        background-color: rgba(0, 0, 0, 0.4);
    }
}
/*.custom-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 2;
}*/

.drawer-fab {
    position: sticky;
    bottom: 16px;
    margin-left: auto;
    display: flex;
    justify-content: center;
    z-index: 1000;
}

.drawer-scroll {
    overflow-y: auto;
    max-height: calc(100vh - 100px);
}

/* ========== SURFACE CONTAINERS ========== */

.surface-container-lowest {
    background-color: var(--md-sys-color-surface-container-lowest);
    border-radius: 12px;
    padding: 12px;
}

.surface-container-low {
    background-color: var(--md-sys-color-surface-container-low);
    border-radius: 12px;
    color: var(--md-sys-color-on-surface);
    padding: 12px;
}

.surface-container {
    background-color: var(--md-sys-color-surface-container);
    border-radius: 16px;
    color: var(--md-sys-color-on-surface);
    padding: 16px;
    margin-bottom: 16px;
}

.surface-container-high {
    background-color: var(--md-sys-color-surface-container-high);
    border-radius: 28px;
    color: var(--md-sys-color-on-surface);
    padding: 16px;
}

.surface-container-high .subtitle,
.surface-container-high .mud-typography-caption,
.surface-container-high .mud-typography-body2 {
    color: var(--md-sys-color-on-surface-variant);
}

.surface-primary-container {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    border-radius: 16px;
    padding: 8px 16px;
}

.surface-secondary-container {
    background-color: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
    border-radius: 8px;
    padding: 4px 12px;
}

/* ========== INTERACTIVE ELEMENTS ========== */

.interactive-element {
    position: relative;
    overflow: hidden;
}

.interactive-element:hover::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: currentColor;
    opacity: 0.08;
    pointer-events: none;
}

.interactive-element:active::before {
    opacity: 0.12;
}

/* ========== DROPDOWNS (Select, Autocomplete, Menu) ========== */

.mud-select-popover .mud-popover-paper,
.mud-select-popover .mud-paper,
.mud-autocomplete-popover .mud-popover-paper,
.mud-autocomplete-popover .mud-paper,
.mud-menu-popover .mud-popover-paper,
.mud-menu-popover .mud-paper {
    background-color: var(--dropdown-bg, var(--md-sys-color-surface-container-low)) !important;
    color: var(--dropdown-text, var(--md-sys-color-on-surface)) !important;
    border: 0.5px solid var(--dropdown-border, var(--md-sys-color-outline-variant)) !important;
    border-radius: var(--md-shape-corner-medium) !important;
    overflow: hidden !important;
    max-width: 100% !important;
}

.mud-select-popover .mud-list,
.mud-autocomplete-popover .mud-list,
.mud-menu-popover .mud-list {
    background-color: var(--md-sys-color-surface) !important;
    padding: 6px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    width: 100% !important;
}

.mud-select-popover .mud-list-item,
.mud-autocomplete-popover .mud-list-item,
.mud-menu .mud-list-item,
.mud-select-item,
.mud-autocomplete-item,
.mud-menu-item {
    color: var(--dropdown-text, var(--md-sys-color-on-surface)) !important;
    background-color: transparent !important;
    border-radius: var(--md-shape-corner-small) !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.mud-select-popover .mud-list-item:hover,
.mud-autocomplete-popover .mud-list-item:hover,
.mud-menu .mud-list-item:hover,
.mud-select-item:hover,
.mud-autocomplete-item:hover,
.mud-menu-item:hover {
    background-color: var(--dropdown-hover-bg, var(--md-sys-color-surface-container-low)) !important;
    color: var(--dropdown-text, var(--md-sys-color-on-surface)) !important;
}

.mud-select-popover .mud-selected-item,
.mud-select-popover .mud-list-item[aria-selected="true"],
.mud-autocomplete-popover .mud-selected-item,
.mud-autocomplete-popover .mud-list-item[aria-selected="true"],
.mud-menu .mud-selected-item,
.mud-select-item.mud-selected-item,
.mud-autocomplete-item.mud-selected-item,
.mud-menu-item.mud-selected-item {
    background-color: var(--dropdown-selected-bg, var(--md-sys-color-primary-container)) !important;
    color: var(--md-sys-color-on-primary-container) !important;
}

.mud-select-popover .mud-list-item .mud-typography-body2,
.mud-select-popover .mud-list-item .mud-typography-caption,
.mud-autocomplete-popover .mud-list-item .mud-typography-body2,
.mud-autocomplete-popover .mud-list-item .mud-typography-caption {
    color: var(--dropdown-secondary-text, var(--md-sys-color-on-surface-variant)) !important;
}

.mud-select .mud-input-adornment .mud-icon-button,
.mud-autocomplete .mud-input-adornment .mud-icon-button {
    color: var(--dropdown-secondary-text, var(--md-sys-color-on-surface-variant)) !important;
}

.mud-select.mud-select-open .mud-input-adornment .mud-icon-button,
.mud-autocomplete.mud-focused .mud-input-adornment .mud-icon-button {
    color: var(--md-sys-color-primary) !important;
}

.stable-date-navigator__selector .mud-input-slot,
.stable-date-navigator__selector .mud-select-input,
.stable-date-navigator__selector input {
    width: 100%;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums;
    text-align: center !important;
}

.stable-date-navigator__date-selector .mud-input-control {
    width: max-content !important;
    margin-top: 0 !important;
}

.stable-date-navigator__date-selector .mud-input-control-input-container {
    width: max-content !important;
}

.stable-date-navigator__date-selector .mud-input {
    width: max-content !important;
    margin: 0 !important;
}

.stable-date-navigator__date-selector .mud-input-slot {
    width: auto !important;
}

.stable-date-navigator__date-selector input {
    field-sizing: content;
    width: auto !important;
    white-space: nowrap;
}

.stable-date-navigator__date-selector input {
    min-width: 11ch;
}

.stable-date-navigator__selector .mud-input-control,
.stable-date-navigator__selector .mud-input-control-input-container,
.stable-date-navigator__selector .mud-input,
.stable-date-navigator__selector .mud-input-slot {
    align-items: center !important;
}

.stable-date-navigator__picker {
    width: 320px !important;
    min-width: 320px !important;
    max-width: min(320px, calc(100vw - 32px)) !important;
}

.mud-popover:has(.stable-date-navigator__picker),
.mud-popover:has(.stable-date-navigator__picker) .mud-popover-paper {
    width: 320px !important;
    min-width: 320px !important;
    max-width: min(320px, calc(100vw - 32px)) !important;
    overflow: visible !important;
}

.stable-date-navigator__week-selector .mud-select-input,
.stable-date-navigator__month-selector .mud-select-input,
.stable-date-navigator__week-selector .mud-input-slot {
    justify-content: center !important;
}

.stable-date-navigator__week-selector .mud-input-adornment,
.stable-date-navigator__month-selector .mud-input-adornment,
.stable-date-navigator__week-selector .mud-select-icon {
    display: none !important;
}

.stable-date-navigator__week-popover,
.stable-date-navigator__week-popover .mud-popover-paper,
.stable-date-navigator__week-popover .mud-list {
    width: 180px !important;
    min-width: 180px !important;
    max-width: min(180px, calc(100vw - 32px)) !important;
}

.stable-date-navigator__week-popover .mud-list-item,
.stable-date-navigator__week-popover .mud-list-item-text {
    white-space: nowrap !important;
}

.stable-date-navigator__month-popover,
.stable-date-navigator__month-popover .mud-popover-paper,
.stable-date-navigator__month-popover .mud-list {
    width: 200px !important;
    min-width: 200px !important;
    max-width: min(200px, calc(100vw - 32px)) !important;
}

.stable-date-navigator__month-popover .mud-list-item,
.stable-date-navigator__month-popover .mud-list-item-text {
    white-space: nowrap !important;
}

/* ========== SCROLLBAR STYLING ========== */

/* Custom scrollbar (webkit browsers) */
.scrollable-styled::-webkit-scrollbar {
    width: 8px;
}

.scrollable-styled::-webkit-scrollbar-track {
    background: var(--md-sys-color-surface-container-low);
    border-radius: 4px;
}

.scrollable-styled::-webkit-scrollbar-thumb {
    background: var(--md-sys-color-outline);
    border-radius: 4px;
}

.scrollable-styled::-webkit-scrollbar-thumb:hover {
    background: var(--md-sys-color-outline-variant);
}

/* Simple scrollable container */
.scrollable {
    overflow-y: auto;
    overflow-x: hidden;
}
/* Dropdown popover */
.clear-dropdown {
    border: 1px solid var(--mud-palette-lines-inputs) !important;
    border-radius: 8px !important;
    background-color: var(--mud-palette-background-custom) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}
.clear-dropdown .mud-list-item {
    background-color: var(--mud-palette-background-custom) !important;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.clear-dropdown .mud-list-item:hover {
    background-color: var(--mud-palette-action-default-hover) !important;
}
.clear-dropdown .mud-selected-item,
.clear-dropdown .mud-selected-item:hover {
    background-color: color-mix(in srgb, var(--md-sys-color-primary) 70%, var(--md-sys-color-surface-container-lowest)) !important;
    color: var(--mud-palette-secondary-text) !important;
}
.clear-dropdown .mud-selected-item .mud-typography {
    color: var(--mud-palette-secondary-text) !important;
}
/* Multi-select: the checkbox shows the selection, so items never get the highlighted background */
.clear-dropdown.multi-dropdown .mud-list-item,
.clear-dropdown.multi-dropdown .mud-selected-item,
.clear-dropdown.multi-dropdown .mud-list-item-hilight,
.clear-dropdown.multi-dropdown .mud-list-item.mud-selected-item:hover {
    background-color: var(--mud-palette-background-custom) !important;
    color: var(--mud-palette-text-primary) !important;
}
.clear-dropdown.multi-dropdown .mud-list-item:hover {
    background-color: var(--mud-palette-action-default-hover) !important;
}
.clear-dropdown.multi-dropdown .mud-list-item .mud-typography,
.clear-dropdown.multi-dropdown .mud-list-item .mud-icon-root {
    color: var(--mud-palette-text-primary) !important;
    font-weight: normal;
}