/* ========================================
   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) - EXCLUDE DatePicker ========== */

.mud-popover:not(.mud-picker-popover) .mud-popover-paper,
.mud-popover:not(.mud-picker-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-popover:not(.mud-picker-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;
}

/* ========== 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;
}