/* === THIRD-PARTY COMPONENT FIXES === */
.tox .tox-menu,
.tox-tinymce-aux,
.tox-tinymce-inline {
    z-index: 1000001 !important;
}

/* === MUDBLAZOR CUSTOMIZATIONS === */
.mud-main-content {
    min-height: calc(100vh - var(--mud-appbar-height));
}

/* TODO Remove if Fixed - MudBlazor Input Label Background Fix */
.mud-input-label-outlined {
    background-color: var(--mud-palette-surface);
}

.mud-table-container {
    width: 100% !important;
    overflow: auto !important;
}

.mud-button-filled{
    background: transparent;
}

/* === MUDBLAZOR DATAGRID FIXES === */
/* Fix für TemplateColumn Zellen mit Buttons - füllt volle Zeilenhöhe aus */
.mud-table-cell.mud-data-grid-action-cell {
    padding: 0 !important;
    vertical-align: top !important;
    background-color: inherit !important;
}

.mud-table-cell.mud-data-grid-action-cell > div {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    padding: 12px 16px !important;
    gap: 4px !important;
    background-color: inherit !important;
}

/* Sicherstellen dass die Zelle die volle Höhe der Zeile einnimmt */
.mud-table-row .mud-table-cell.mud-data-grid-action-cell {
    height: 100% !important;
}

/* Buttons korrekt ausrichten */
.mud-data-grid-action-cell .mud-button-root {
    flex-shrink: 0 !important;
    margin-left: 4px !important;
    margin-top: 4px !important;
}

/* Hover-Effekte für die gesamte Zeile auch auf Action-Zellen anwenden */
.mud-table-row:hover .mud-table-cell.mud-data-grid-action-cell > div {
    background-color: var(--mud-palette-table-hover) !important;
}

/* Striped Table Support */
.mud-table-striped .mud-table-row:nth-of-type(odd) .mud-table-cell.mud-data-grid-action-cell > div {
    background-color: var(--mud-palette-table-striped) !important;
}

.mud-table-striped .mud-table-row:nth-of-type(odd):hover .mud-table-cell.mud-data-grid-action-cell > div {
    background-color: var(--mud-palette-table-hover) !important;
}

/* === PROJECT-SPECIFIC LAYOUT COMPONENTS === */
.game-cell {
    height: 34px;
}

.no-last-border:last-child > .mud-table-cell {
    border: 0;
}

.no-wrap {
    white-space: nowrap;
}

/* === SPECIALIZED HEIGHT UTILITIES === */
/* Diese Utilities sind projektspezifisch und können nicht durch MudBlazor ersetzt werden */
.min-h-dialog-small {
    min-height: 450px;
    max-height: 600px;
}

.max-h-viewport-table {
    max-height: calc(100vh - 64px - 32px);
    overflow: scroll;
}

.mud-tabs-tabbar-content {
    overflow-x: scroll;
}

.mud-tabs-scroll-button {
    display: none;
}

/* === EDITOR AND CONTENT SPECIFIC === */
.max-h-text-200 {
    max-height: 200px;
    overflow-y: auto;
}

.content-height-500 {
    height: 500px;
    overflow-y: auto;
}

.editor-container {
    height: 500px;
    overflow-y: auto;
}

/* === POSITION SECTION HEIGHTS === */
.min-h-140 {
    min-height: 140px;
}

.min-h-position-section {
    min-height: 150px;
}

.min-h-position-dynamic {
    /* Wird für dynamische Höhen verwendet - Fallback */
    min-height: 150px;
}

.min-h-warning-section {
    min-height: 80px;
}

/* === NEUE UTILITY KLASSEN FÜR INLINE-STYLES === */
.position-absolute-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--mud-default-borderradius);
    padding: 4px;
}

.color-picker-grid-item {
    width: 128px;
}

.variable-code-display {
    font-family: monospace;
    background-color: var(--mud-palette-background-gray);
    padding: 2px 6px;
    border-radius: var(--mud-default-borderradius);
}

.upload-dropzone-border {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

.file-preview-border {
    border-radius: var(--mud-default-borderradius);
}

.z-index-10 {
    z-index: 10;
}

/* Dialog width utilities */
.dialog-width-800 {
    max-width: 800px;
}

/* === CONSOLIDATION - UNIFIED CARD PATTERNS === */

.member-info-section {
    flex: 1;
    margin-bottom: 12px;
}

/* === INTERACTIVE COMPONENTS === */
.color-picker-button {
    width: 64px;
    height: 64px;
}

/* === SPECIALIZED LAYOUT COMBINATIONS === */
.dialog-container {
    min-height: 450px;
    max-height: 600px;
}

.empty-selection-card {
    border-style: dashed;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.position-section-card {
    border-style: dashed;
}

.member-preview-section {
    min-height: 140px;
}

/* === FORM STYLING === */
.form-label-style {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #333;
}

.error-text-small {
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.text-small {
    font-size: 0.875rem;
}

/* === ACCOUNT PAGES STYLING === */
.relative-z10 {
    position: relative;
    z-index: 10;
}

.divider-line {
    background: rgba(255, 255, 255, 0.3);
    height: 1px;
    margin: 1rem 0;
}

.subtitle-muted {
    opacity: 0.8;
    font-size: 0.9rem;
}

/* === MOBILE OPTIMIZATIONS FOR ACCOUNT PAGES === */
@media (max-width: 768px) {
    /* Remove card styling on mobile for cleaner look */
    .login-card-custom,
    .reset-card-custom,
    .confirm-card-custom,
    .external-card-custom {
        margin: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        max-width: none !important;
        width: 100% !important;
        background: rgba(255, 255, 255, 1) !important;
        backdrop-filter: none !important;
        padding: 1rem !important;
    }

    /* Adjust background container for mobile */
    .login-background,
    .reset-background,
    .confirm-background,
    .external-background {
        min-height: calc(100vh - var(--mud-appbar-height)) !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: flex-start !important;
        background: transparent !important;
    }

    /* Adjust brand section for mobile */
    .brand-section {
        border-radius: 0 !important;
        margin: 0 !important;
    }

    /* Adjust form section for mobile */
    .form-section {
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 1rem !important;
    }

    /* Ensure full width on mobile */
    .login-card-custom .mud-grid-item,
    .reset-card-custom .mud-grid-item,
    .confirm-card-custom .mud-grid-item,
    .external-card-custom .mud-grid-item {
        padding: 0 !important;
    }
}