/* ========================================================================== 
   � LAYOUT - FULL HEIGHT FIX
   ========================================================================== */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Make MudBlazor layout fill full height */
.mud-layout {
    min-height: 100vh;
}

.mud-main-content {
    min-height: calc(100vh - 64px);
    /* 64px is the default MudAppBar height */
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   📱 MOBILE SECONDARY APPBAR
   ========================================================================== */

/* Second appbar row for mobile — sits below the main appbar */
.mobile-secondary-bar {
    top: 48px !important;
    /* Dense appbar height */
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Push drawer + main content down to account for the second bar on mobile */
@media (max-width: 959.98px) {
    .mud-drawer {
        margin-top: 48px;
    }

    .mud-main-content {
        padding-top: 100px !important;
        /* 48px (primary dense appbar) + 48px (secondary bar) + 4px gap */
    }
}

/* ========================================================================== 
   �🌈 UNIVERSAL AUTOFILL FIX (PENETRATES ISOLATED FILES)
   ========================================================================== */

/* ========================================================================== 
   🌙 UNIVERSAL AUTOFILL + FOCUS FIX (WORKS IN DARK/LIGHT + ISOLATED)
   ========================================================================== */
.light {
    --size-xs-neg-1-125x: -1.125rem;
    --font-size-sm: 0.875rem;
    --autofilled-background-color: #f2f2f2;
}

.dark {
    --size-xs-neg-1-125x: -1.125rem;
    --font-size-sm: 0.875rem;
    --autofilled-background-color: #0d0d0d;
}

/* === Chrome / Edge / Safari === */
/* Target all autofill states including unfocused autofilled inputs */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-webkit-autofill:not(:focus),
input:-webkit-autofill:not(:hover),
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
textarea:-webkit-autofill:not(:focus),
textarea:-webkit-autofill:not(:hover),
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active,
select:-webkit-autofill:not(:focus),
select:-webkit-autofill:not(:hover) {
    transition: background-color 5000s ease-in-out 0s !important;
    -webkit-text-fill-color: var(--mud-palette-text-primary) !important;
    caret-color: var(--mud-palette-text-primary) !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--autofilled-background-color) inset !important;
    box-shadow: 0 0 0px 1000px var(--autofilled-background-color) inset !important;
    background-color: var(--autofilled-background-color) !important;
    background-image: none !important;
}

/* === Firefox === */
/* Target all autofill states including unfocused autofilled inputs */
input:-moz-autofill,
input:-moz-autofill:hover,
input:-moz-autofill:focus,
input:-moz-autofill:not(:focus),
textarea:-moz-autofill,
textarea:-moz-autofill:hover,
textarea:-moz-autofill:focus,
textarea:-moz-autofill:not(:focus),
select:-moz-autofill,
select:-moz-autofill:hover,
select:-moz-autofill:focus,
select:-moz-autofill:not(:focus) {
    box-shadow: 0 0 0px 1000px var(--autofilled-background-color) inset !important;
    -moz-text-fill-color: var(--mud-palette-text-primary) !important;
    caret-color: var(--mud-palette-text-primary) !important;
    background-color: var(--autofilled-background-color) !important;
    background-image: none !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

/* === Floating Label Support (Cross-Browser) === */

/* Chrome / Edge / Safari / Opera / Brave */
input:-webkit-autofill+label,
input:-webkit-autofill:hover+label,
input:-webkit-autofill:focus+label,
input:-webkit-autofill:active+label,
input:-webkit-autofill:valid+label,
input:-webkit-autofill:not(:focus)+label,
textarea:-webkit-autofill+label,
textarea:-webkit-autofill:hover+label,
textarea:-webkit-autofill:focus+label,
textarea:-webkit-autofill:active+label,
textarea:-webkit-autofill:valid+label,
textarea:-webkit-autofill:not(:focus)+label,
select:-webkit-autofill+label,
select:-webkit-autofill:hover+label,
select:-webkit-autofill:focus+label,
select:-webkit-autofill:active+label,
select:-webkit-autofill:valid+label,
select:-webkit-autofill:not(:focus)+label {
    transform: translateY(var(--size-xs-neg-1-125x)) !important;
    color: var(--mud-palette-text-primary) !important;
    font-size: var(--font-size-sm) !important;
}

/* Firefox */
input:-moz-autofill+label,
input:-moz-autofill:hover+label,
input:-moz-autofill:focus+label,
input:-moz-autofill:valid+label,
input:-moz-autofill:not(:focus)+label,
textarea:-moz-autofill+label,
textarea:-moz-autofill:hover+label,
textarea:-moz-autofill:focus+label,
textarea:-moz-autofill:valid+label,
textarea:-moz-autofill:not(:focus)+label,
select:-moz-autofill+label,
select:-moz-autofill:hover+label,
select:-moz-autofill:focus+label,
select:-moz-autofill:valid+label,
select:-moz-autofill:not(:focus)+label {
    transform: translateY(var(--size-xs-neg-1-125x)) !important;
    color: var(--mud-palette-text-primary) !important;
    font-size: var(--font-size-sm) !important;
}

/* ========================================================================== 
   📱 RESPONSIVE UTILITIES
   ========================================================================== */

/* Page header - responsive layout */
.page-header {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 599px) {
    .page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .page-header>* {
        width: 100%;
    }

    .page-header .page-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: flex-end;
    }
}

/* Filter container - responsive layout */
.filter-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

@media (max-width: 599px) {
    .filter-container {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-container>.mud-input-control,
    .filter-container>.mud-select,
    .filter-container>.mud-button {
        width: 100%;
    }

    .filter-container>.mud-switch {
        align-self: flex-start;
    }
}

@media (min-width: 600px) and (max-width: 959px) {
    .filter-container {
        flex-wrap: wrap;
    }

    .filter-container>.mud-input-control,
    .filter-container>.mud-select {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: 200px;
    }
}

/* Summary stats - responsive grid using flexbox */
.stats-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: space-around;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
    flex: 1;
}

@media (max-width: 599px) {
    .stats-container {
        justify-content: space-between;
    }

    .stat-item {
        flex: 1 1 calc(50% - 1rem);
        min-width: 0;
    }
}

@media (min-width: 600px) and (max-width: 959px) {
    .stat-item {
        flex: 1 1 auto;
        min-width: 100px;
    }
}

/* Mobile-friendly table adjustments */
@media (max-width: 599px) {

    /* Ensure table pager is usable on mobile */
    .mud-table-pagination .mud-table-pagination-information,
    .mud-table-pagination .mud-table-pagination-display {
        flex-wrap: wrap;
        justify-content: center;
    }

    .mud-table-pagination .mud-select {
        min-width: 80px;
    }
}

/* Responsive button groups */
.actions-responsive {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (max-width: 599px) {
    .actions-responsive {
        width: 100%;
        justify-content: stretch;
    }

    .actions-responsive>.mud-button {
        flex: 1;
    }
}

/* Hide text on mobile, show icon only */
@media (max-width: 599px) {
    .hide-text-xs .mud-button-label {
        display: none;
    }
}

/* Compact padding on mobile */
@media (max-width: 599px) {
    .mud-container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .pa-4-xs-2 {
        padding: 8px !important;
    }
}

/* Tabs with badges - prevent badge clipping while keeping panels contained */
.tabs-with-badges {
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

.tabs-with-badges .mud-tabs-tabbar-content {
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

.tabs-with-badges .mud-tabs-panels {
    overflow: hidden !important;
}

.tabs-with-badges .mud-tab {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* ========================================================================== 
   🌍 RTL SUPPORT FOR MUDBLAZOR SNACKBAR
   ========================================================================== */

/* Override MudBlazor's default top:24px to position below AppBar (64px + 16px gap) */
.mud-snackbar-location-top-right,
.mud-snackbar-location-top-left {
    top: 50px !important;
}

/* Ensure close icon positioning is flipped in RTL */
[dir="rtl"] .mud-snackbar-content-action {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* ==========================================================================
   🖨️ PRINT STYLES
   ========================================================================== */
@media print {

    /* Hide navigation, app bars, drawers, and action buttons */
    .mud-appbar,
    .mobile-secondary-bar,
    .mud-drawer,
    .mud-drawer-overlay,
    .mud-overlay,
    .mud-button,
    .mud-icon-button,
    .mud-fab {
        display: none !important;
    }

    /* Remove drawer margin and padding from main content */
    .mud-main-content {
        padding-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        min-height: auto !important;
    }

    /* Remove layout constraints */
    .mud-layout {
        display: block !important;
    }

    /* Remove container max-width for full-width printing */
    .mud-container {
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Remove elevation shadows */
    .mud-paper {
        box-shadow: none !important;
    }

    /* Ensure content uses full page width */
    body,
    html {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ==========================================================================
   📐 TOP BAR SPACING — DESKTOP
   ========================================================================== */

/* Ensure main content has enough top padding so the sticky app bar doesn't overlap */
.mud-main-content {
    padding-top: 8px;
}

/* Flip icon position if Snackbar has leading icon */
[dir="rtl"] .mud-snackbar .mud-snackbar-icon {
    margin-right: 0 !important;
    margin-left: 12px !important;
}