/* Aquilo Razor Class Library - Main CSS Entry Point */
/* This file is processed by PostCSS to generate aquilo.bundle.css */
/* Core styles - Order matters */
/* CSS Custom Properties for consistent theming */
:root {
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;

    /* Layout heights */
    --app-bar-height: 64px;
    --breadcrumb-height: 48px;
    --footer-height: 60px;
    
    /* Z-index layers */
    --z-index-drawer: 1000;
    --z-index-app-bar: 1100;
    --z-index-modal: 1300;
    --z-index-popover: 1400;
    --z-index-tooltip: 1500;

    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-normal: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;

    /* Container widths */
    --container-sm: 540px;
    --container-md: 720px;
    --container-lg: 960px;
    --container-xl: 1140px;
    --container-xxl: 1320px;

    /* Shadow colors */
    --shadow-primary-subtle: rgba(33, 150, 243, 0.4);
    --shadow-error-subtle: rgba(244, 67, 54, 0.5);
    --shadow-default: rgba(0, 0, 0, 0.08);
    --shadow-elevated: rgba(0, 0, 0, 0.12);

    /* Guide Step Type Colors - Light Mode */
    --step-type-instruction: #2196F3;      /* Blue - Instructions */
    --step-type-checkpoint: #4CAF50;       /* Green - Quality control */
    --step-type-warning: #FF9800;          /* Orange - Safety warnings */
    --step-type-tool: #9C27B0;             /* Purple - Required tools (future) */
    --step-type-skill: #009688;            /* Teal - Required skills (future) */
    --step-type-material: #795548;         /* Brown - Required materials (future) */
}
/* Dark Mode Adjustments */
@media (prefers-color-scheme: dark) {
    :root {
        /* Guide Step Type Colors - Dark Mode (lighter variants for better visibility) */
        --step-type-instruction: #64B5F6;  /* Lighter blue */
        --step-type-checkpoint: #81C784;   /* Lighter green */
        --step-type-warning: #FFB74D;      /* Lighter orange */
        --step-type-tool: #BA68C8;         /* Lighter purple */
        --step-type-skill: #4DB6AC;        /* Lighter teal */
        --step-type-material: #A1887F;     /* Lighter brown */
    }
}
/* Layout system for MudBlazor applications */
/* CSS Variables for consistent sizing */
:root {
    --app-bar-height: 64px;
    --app-bar-height-mobile: 56px;
    --breadcrumb-height: 48px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --content-padding-bottom: 24px;
    --z-index-app-bar: 1100;
}
/* Base layout reset */
* {
    box-sizing: border-box;
}
html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
    /* Remove overflow: hidden to allow proper scrolling */
}
/* Main application layout */
.app-root {
    height: 100vh;
    display: flex;
    flex-direction: column;
}
/* MudLayout overrides */
.mud-layout {
    height: 100vh;
    display: flex;
    flex-direction: column;
}
.mud-main-content {
    flex: 1 1 auto;
    min-height: calc(100vh - 64px);
    min-height: calc(100vh - var(--app-bar-height));
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    position: relative;
}
/* When container has a direct tabbed display child, remove scroll from main-content */
.mud-main-content:has(.mud-container > .aq-generic-tabbed-display) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* Make container a flex container when it has tabbed display */
.mud-main-content:has(.aq-generic-tabbed-display) .mud-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-bottom: 0;
}
/* Ensure mud-container doesn't interfere with scrolling */
.mud-main-content .mud-container {
    height: auto;
    min-height: 100%;
    padding-bottom: 24px;
    padding-bottom: var(--content-padding-bottom);
}
/* Flex layout containers */
.flex-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.flex-container-full {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}
/* Content sections */
.content-header {
    flex-shrink: 0;
    padding: 16px 0;
    padding: var(--spacing-md) 0;
}
.content-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 0;
    padding: var(--spacing-md) 0;
}
.content-footer {
    flex-shrink: 0;
    padding: 16px 0;
    padding: var(--spacing-md) 0;
}
/* Scrollable content areas */
.scrollable-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.scrollable-x {
    overflow-x: auto;
    overflow-y: hidden;
}
.scrollable-both {
    overflow: auto;
}
/* Fixed positioning helpers */
.fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    z-index: var(--z-index-app-bar);
}
.fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    z-index: var(--z-index-app-bar);
}
/* Page container with proper height calculation */
.page-container {
    height: calc(100vh - 64px);
    height: calc(100vh - var(--app-bar-height));
    display: flex;
    flex-direction: column;
}
.page-container-with-breadcrumb {
    height: calc(100vh - 64px - 48px);
    height: calc(100vh - var(--app-bar-height) - var(--breadcrumb-height));
    display: flex;
    flex-direction: column;
}
/* Dialog/Modal layout helpers */
.dialog-container {
    display: flex;
    flex-direction: column;
    max-height: 80vh;
}
.dialog-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
/* Responsive helpers */
@media (max-width: 768px) {
    .mud-main-content {
        min-height: calc(100vh - 56px);
        min-height: calc(100vh - var(--app-bar-height-mobile));
        height: auto;
    }

    .page-container {
        height: calc(100vh - 56px);
        height: calc(100vh - var(--app-bar-height-mobile));
    }

    .content-body {
        padding: 8px 0;
        padding: var(--spacing-sm) 0;
    }
}
/* Utility classes for common patterns */
/* Spacing utilities */
.p-0 { padding: 0 !important; }
.p-xs { padding: 0.25rem !important; padding: var(--spacing-xs) !important; }
.p-sm { padding: 8px !important; padding: var(--spacing-sm) !important; }
.p-md { padding: 16px !important; padding: var(--spacing-md) !important; }
.p-lg { padding: 24px !important; padding: var(--spacing-lg) !important; }
.p-xl { padding: 2rem !important; padding: var(--spacing-xl) !important; }
.pt-0 { padding-top: 0 !important; }
.pt-xs { padding-top: 0.25rem !important; padding-top: var(--spacing-xs) !important; }
.pt-sm { padding-top: 8px !important; padding-top: var(--spacing-sm) !important; }
.pt-md { padding-top: 16px !important; padding-top: var(--spacing-md) !important; }
.pt-lg { padding-top: 24px !important; padding-top: var(--spacing-lg) !important; }
.pt-xl { padding-top: 2rem !important; padding-top: var(--spacing-xl) !important; }
.pb-0 { padding-bottom: 0 !important; }
.pb-xs { padding-bottom: 0.25rem !important; padding-bottom: var(--spacing-xs) !important; }
.pb-sm { padding-bottom: 8px !important; padding-bottom: var(--spacing-sm) !important; }
.pb-md { padding-bottom: 16px !important; padding-bottom: var(--spacing-md) !important; }
.pb-lg { padding-bottom: 24px !important; padding-bottom: var(--spacing-lg) !important; }
.pb-xl { padding-bottom: 2rem !important; padding-bottom: var(--spacing-xl) !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-xs { padding-left: 0.25rem !important; padding-left: var(--spacing-xs) !important; padding-right: 0.25rem !important; padding-right: var(--spacing-xs) !important; }
.px-sm { padding-left: 8px !important; padding-left: var(--spacing-sm) !important; padding-right: 8px !important; padding-right: var(--spacing-sm) !important; }
.px-md { padding-left: 16px !important; padding-left: var(--spacing-md) !important; padding-right: 16px !important; padding-right: var(--spacing-md) !important; }
.px-lg { padding-left: 24px !important; padding-left: var(--spacing-lg) !important; padding-right: 24px !important; padding-right: var(--spacing-lg) !important; }
.px-xl { padding-left: 2rem !important; padding-left: var(--spacing-xl) !important; padding-right: 2rem !important; padding-right: var(--spacing-xl) !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-xs { padding-top: 0.25rem !important; padding-top: var(--spacing-xs) !important; padding-bottom: 0.25rem !important; padding-bottom: var(--spacing-xs) !important; }
.py-sm { padding-top: 8px !important; padding-top: var(--spacing-sm) !important; padding-bottom: 8px !important; padding-bottom: var(--spacing-sm) !important; }
.py-md { padding-top: 16px !important; padding-top: var(--spacing-md) !important; padding-bottom: 16px !important; padding-bottom: var(--spacing-md) !important; }
.py-lg { padding-top: 24px !important; padding-top: var(--spacing-lg) !important; padding-bottom: 24px !important; padding-bottom: var(--spacing-lg) !important; }
.py-xl { padding-top: 2rem !important; padding-top: var(--spacing-xl) !important; padding-bottom: 2rem !important; padding-bottom: var(--spacing-xl) !important; }
/* Height utilities */
.h-full { height: 100% !important; }
.h-screen { height: 100vh !important; }
.h-auto { height: auto !important; }
.min-h-0 { min-height: 0 !important; }
.min-h-full { min-height: 100% !important; }
.min-h-screen { min-height: 100vh !important; }
.max-h-full { max-height: 100% !important; }
.max-h-screen { max-height: 100vh !important; }
/* Width utilities */
.w-full { width: 100% !important; }
.w-auto { width: auto !important; }
.min-w-0 { min-width: 0 !important; }
.max-w-full { max-width: 100% !important; }
/* Overflow utilities */
.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }
.overflow-x-auto { overflow-x: auto !important; overflow-y: hidden !important; }
.overflow-y-auto { overflow-y: auto !important; overflow-x: hidden !important; }
.overflow-x-hidden { overflow-x: hidden !important; }
.overflow-y-hidden { overflow-y: hidden !important; }
/* Display utilities */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }
/* Flex utilities */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.justify-start { justify-content: flex-start !important; }
.justify-end { justify-content: flex-end !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }
.items-start { align-items: flex-start !important; }
.items-end { align-items: flex-end !important; }
.items-center { align-items: center !important; }
.items-baseline { align-items: baseline !important; }
.items-stretch { align-items: stretch !important; }
/* Gap utilities */
.gap-0 { gap: 0 !important; }
.gap-xs { gap: 0.25rem !important; gap: var(--spacing-xs) !important; }
.gap-sm { gap: 8px !important; gap: var(--spacing-sm) !important; }
.gap-md { gap: 16px !important; gap: var(--spacing-md) !important; }
.gap-lg { gap: 24px !important; gap: var(--spacing-lg) !important; }
.gap-xl { gap: 2rem !important; gap: var(--spacing-xl) !important; }
/* Position utilities */
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }
/* Text utilities */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }
.text-nowrap { white-space: nowrap !important; }
.text-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
/* Multi-line text truncation */
.text-truncate-2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.text-truncate-3 {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
/* Visibility utilities */
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }
/* Cursor utilities */
.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }
.cursor-not-allowed { cursor: not-allowed !important; }
/* Border utilities */
.border-0 { border: 0 !important; }
.border-top-0 { border-top: 0 !important; }
.border-right-0 { border-right: 0 !important; }
.border-bottom-0 { border-bottom: 0 !important; }
.border-left-0 { border-left: 0 !important; }
/* Shadow utilities */
.shadow-none { box-shadow: none !important; }
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; }
.shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important; }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; }
/* Transition utilities */
.transition-none { transition: none !important; }
.transition-all { transition: all 250ms ease-in-out !important; transition: all var(--transition-normal) !important; }
.transition-fast { transition-duration: 150ms ease-in-out !important; transition-duration: var(--transition-fast) !important; }
.transition-slow { transition-duration: 350ms ease-in-out !important; transition-duration: var(--transition-slow) !important; }
/* Interactive card utilities */
.aq-hover-card {
    transition: all 0.2s ease-in-out !important;
}
.aq-hover-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}
.mud-theme-dark .aq-hover-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}
/* Component styles */
/* Aquilo Wizard Component - Global Styles */
/* Uses MudBlazor CSS variables for consistency */
/* Mobile Field Enhancements */
.aq-wizard-mobile-field {
    padding: 0.5rem;
}
/* Enhanced mobile input field */
.aq-mobile-input .mud-input-root {
    min-height: 56px; /* Larger touch target for field workers */
    font-size: 1.1rem; /* Slightly larger text for readability */
}
.aq-mobile-input .mud-input-root-outlined {
    background-color: var(--mud-palette-background);
}
/* MudSelect specific styling for mobile mode */
.aq-mobile-input .mud-input-slot {
    font-size: 1.1rem; /* Match the enlarged font size */
    line-height: 1.5; /* Proper line height for readability */
    display: flex; /* Enable flexbox for centering */
    align-items: center; /* Vertically center the text */
    min-height: 56px; /* Match the input field height */
    padding: 0 12px; /* Add horizontal padding for better spacing */
    align-content: center;
}
/* Ensure the select input container maintains proper height */
.aq-mobile-input.mud-select .mud-input {
    min-height: 56px;
    display: flex;
    align-items: center;
}
/* Style the dropdown items for better touch targets */
.aq-mobile-input + .mud-popover .mud-list-item,
.mud-popover .mud-list-item-dense {
    min-height: 48px; /* Larger touch targets in dropdown */
    font-size: 1.1rem; /* Match the input font size */
    padding: 12px 16px; /* Better spacing for touch */
}
/* Simple MudSwitch styling for mobile mode */
/* Let MudSwitch use its default layout - no custom overrides needed */
/* Voice recording animation */
.aq-mobile-input.recording {
    animation: pulse 1.5s ease-in-out infinite;
}
/* Pulsing button animation for recording state */
.mud-pulse {
    animation: mud-button-pulse 2s ease-in-out infinite;
}
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--mud-palette-error-rgb), 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(var(--mud-palette-error-rgb), 0);
    }
}
@keyframes mud-button-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.7);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 0 0 10px rgba(244, 67, 54, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(244, 67, 54, 0);
    }
}
/* Character progress bar */
.aq-char-progress {
    width: 100%;
    height: 4px;
    border-radius: 2px;
}
/* Wizard Dialog Container - Fixed Height */
.aq-wizard-dialog.mud-dialog {
    height: 85vh !important;
    max-height: 85vh !important;
    min-height: 600px !important;
}
.aq-wizard-dialog .mud-dialog-container {
    height: 100% !important;
    max-height: 100% !important;
}
.aq-wizard-dialog .mud-dialog-content {
    padding: 0;
    overflow: hidden;
    overflow-x: hidden; /* Explicitly prevent horizontal scrolling */
    display: flex;
    flex-direction: column;
    height: calc(85vh - 180px); /* Account for title and actions */
}
/* Wizard Content Container */
.aq-wizard-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    overflow-x: hidden; /* Explicitly hide horizontal overflow */
}
/* Dialog Header */
.aq-wizard-header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.aq-wizard-header .mud-typography-h6 {
    font-weight: 600;
    margin: 0;
}
/* Step Info Section */
.aq-wizard-step-info {
    padding: 0.5rem 1.5rem;
}
.aq-wizard-step-counter {
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0;
}
/* MudDialog Title Customization */
.aq-wizard-dialog .mud-dialog-title {
    padding: 1rem 1.5rem 0.75rem;
}
/* Progress Bar */
.aq-wizard-progress {
    height: 4px;
    background: var(--mud-palette-lines-default);
    position: relative;
    overflow: hidden;
    margin: 0 1.5rem 0.5rem 1.5rem;
}
.aq-wizard-progress-fill {
    height: 100%;
    background: var(--mud-palette-primary);
    transition: width 0.3s ease;
    position: relative;
}
/* Validation Alert */
.aq-wizard-validation-alert {
    margin: 0 !important;
    border-radius: 0 !important;
}
/* Tab System */
.aq-wizard-tabs {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Important for flex children */
}
.aq-wizard-tabs .mud-tabs-header {
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0; /* Prevent header from shrinking */
}
/* Ensure MudTabs panels container can scroll */
.aq-wizard-tabs .mud-tabs-panels {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden; /* Hide horizontal overflow */
    min-height: 0; /* Important for flex children */
}
.aq-wizard-tabs .mud-tab {
    min-height: 48px;
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
    margin: 0 0.5rem;
}
.aq-wizard-tabs .mud-tab.mud-tab-active {
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}
.mud-theme-dark .aq-wizard-tabs .mud-tab.mud-tab-active {
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}
.aq-wizard-tabs .mud-tab:hover:not(.mud-tab-active) {
    border-radius: 8px;
}
.aq-wizard-tabs .mud-tab-slider {
    height: 3px;
    background: var(--mud-palette-primary);
    bottom: -1px;
}
/* Panel Content */
.aq-wizard-panel {
    padding: 1.5rem;
    overflow-x: hidden; /* Prevent horizontal overflow in panel content */
}
/* Custom Scrollbar for tab panels */
.aq-wizard-tabs .mud-tabs-panels::-webkit-scrollbar {
    width: 8px;
}
.aq-wizard-tabs .mud-tabs-panels::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}
.aq-wizard-tabs .mud-tabs-panels::-webkit-scrollbar-thumb {
    background: var(--mud-palette-lines-default);
    border-radius: 10px;
    -webkit-transition: background 0.2s ease;
    transition: background 0.2s ease;
}
.aq-wizard-tabs .mud-tabs-panels::-webkit-scrollbar-thumb:hover {
    background: var(--mud-palette-text-secondary);
}
/* Dialog Actions Customization */
.aq-wizard-dialog .mud-dialog-actions {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--mud-palette-lines-default);
    gap: 0.75rem;
}
.aq-wizard-dialog .mud-dialog-actions .mud-button {
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0;
    transition: all 0.2s ease;
}
.aq-wizard-dialog .mud-dialog-actions .mud-button-filled-primary {
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.mud-theme-dark .aq-wizard-dialog .mud-dialog-actions .mud-button-filled-primary {
    box-shadow: 0 4px 15px rgba(124, 143, 240, 0.2);
}
.aq-wizard-dialog .mud-dialog-actions .mud-button-filled-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.mud-theme-dark .aq-wizard-dialog .mud-dialog-actions .mud-button-filled-primary:hover {
    box-shadow: 0 6px 20px rgba(124, 143, 240, 0.3);
}
.aq-wizard-dialog .mud-dialog-actions .mud-button-filled-primary:disabled {
    box-shadow: none;
}
/* Step Error Indication */
.aq-wizard-tabs .mud-tab.aq-wizard-step-error::after {
    content: '!';
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--mud-palette-error);
    color: white;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}
/* Animations */
@keyframes aq-wizard-slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.aq-wizard-panel > * {
    animation: aq-wizard-slideIn 0.3s ease forwards;
}
/* Responsive Design */
@media (max-width: 768px) {
    .aq-wizard-dialog.mud-dialog {
        height: 100vh !important;
        max-height: 100vh !important;
        min-height: 0 !important;
        min-height: initial !important;
    }
    
    .aq-wizard-dialog .mud-dialog-container {
        height: 100% !important;
        max-height: 100% !important;
        margin: 0;
        width: 100vw;
        max-width: 100vw;
    }
    
    .aq-wizard-dialog .mud-dialog-content {
        height: calc(100vh - 140px);
    }
    
    .aq-wizard-tabs .mud-tabs-header {
        padding: 0.5rem;
        overflow-x: auto;
    }
    
    .aq-wizard-panel {
        padding: 1rem;
    }
    
    .aq-wizard-dialog .mud-dialog-actions {
        flex-wrap: wrap;
        padding: 0.75rem !important;
    }
    
    .aq-wizard-dialog .mud-dialog-actions .mud-button {
        flex: 1;
        min-width: 0;
    }
}
/* Loading State */
.aq-wizard-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.aq-wizard-loading-spinner {
    animation: aq-wizard-spin 1s linear infinite;
}
@keyframes aq-wizard-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* Wizard Step Styles */
.aq-wizard-step-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}
/* Step Header */
.aq-wizard-step-header {
    padding: 1rem 2rem 0.75rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    margin: -2rem -2rem 1rem -2rem;
    position: sticky;
    top: -2rem;
    z-index: 5;
    backdrop-filter: blur(10px);
}
.aq-wizard-step-header .mud-typography-body2 {
    font-size: 0.875rem;
    line-height: 1.5;
}
.aq-wizard-step-header strong {
    font-weight: 600;
}
/* Step Content */
.aq-wizard-step-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    padding-right: 0.5rem;
    max-width: 100%; /* Ensure content doesn't exceed container width */
}
/* Custom Scrollbar for Step Content */
.aq-wizard-step-content::-webkit-scrollbar {
    width: 6px;
}
.aq-wizard-step-content::-webkit-scrollbar-track {
    background: transparent;
}
.aq-wizard-step-content::-webkit-scrollbar-thumb {
    background: var(--mud-palette-lines-default);
    border-radius: 10px;
}
.aq-wizard-step-content::-webkit-scrollbar-thumb:hover {
    background: var(--mud-palette-text-secondary);
}
/* Form Styling */
.aq-wizard-form {
    padding-bottom: 1.5rem;
    overflow-x: hidden; /* Prevent form from causing horizontal scroll */
    max-width: 100%;
}
.aq-wizard-form .mud-grid {
    margin: 0;
    max-width: 100%; /* Ensure grid doesn't exceed container */
}
.aq-wizard-form .mud-grid-item {
    padding: 0.75rem;
}
/* Form Field Enhancements */
.aq-wizard-form .mud-input-control {
    margin-top: 0.5rem;
}
.aq-wizard-form .mud-input-label {
    font-weight: 500;
    margin-bottom: 0.25rem;
}
.aq-wizard-form .mud-input-outlined .mud-input-outlined-border {
    border-radius: 8px;
    transition: all 0.2s ease;
}
.aq-wizard-form .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--mud-palette-text-secondary);
}
.aq-wizard-form .mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-width: 2px;
}
/* Error State */
.aq-wizard-step-header .mud-typography-h6.mud-error-text {
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
    animation: aq-wizard-shake 0.3s ease;
}
@keyframes aq-wizard-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}
/* Step Transition */
.aq-wizard-step-wrapper {
    opacity: 0;
    animation: aq-wizard-fadeInUp 0.3s ease forwards;
}
@keyframes aq-wizard-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Form Group Spacing */
.aq-wizard-form .aq-wizard-form-section {
    margin-bottom: 2rem;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default);
}
.aq-wizard-form .aq-wizard-form-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
/* ==========================================
   Mobile/Compact Mode Styles
   ========================================== */
/* Compact Mode Dialog Adjustments */
.aq-wizard-compact.mud-dialog {
    height: 100vh !important;
    max-height: 100vh !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
}
.aq-wizard-compact .mud-dialog-container {
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
}
.aq-wizard-compact .mud-dialog-title {
    display: none !important;
}
.aq-wizard-compact .mud-dialog-content {
    padding: 0 !important;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.aq-wizard-compact .mud-dialog-actions {
    border-top: 1px solid var(--mud-palette-lines-default);
    padding: 0.75rem !important;
}
/* Mobile Layout Container */
.aq-wizard-mobile {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}
/* Step Indicator Dots */
.aq-wizard-mobile-indicator {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    margin-bottom: 1rem;
}
.aq-wizard-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mud-palette-lines-default);
    cursor: pointer;
    transition: all 0.3s ease;
}
.aq-wizard-dot.active {
    width: 12px;
    height: 12px;
    background: var(--mud-palette-primary);
    box-shadow: 0 0 0 4px rgba(var(--mud-palette-primary-rgb), 0.2);
}
.aq-wizard-dot.completed {
    background: var(--mud-palette-success);
}
.aq-wizard-dot:hover:not(.active) {
    transform: scale(1.2);
    background: var(--mud-palette-primary-lighten);
}
/* Mobile Step Title */
.aq-wizard-mobile-step-title {
    text-align: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}
.aq-wizard-mobile-step-title .mud-typography-h6 {
    margin: 0;
    font-weight: 600;
}
/* Mobile Content Area */
.aq-wizard-mobile-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
/* Hide tab headers in mobile mode */
.aq-wizard-mobile-tabs .mud-tabs-header {
    display: none !important;
}
.aq-wizard-mobile-tabs .mud-tabs-panels {
    height: 100%;
    overflow-y: auto;
}
/* Mobile Navigation Container */
.aq-wizard-mobile-nav-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
}
/* Custom Step Bullets */
.aq-wizard-custom-bullets {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    min-height: 48px; /* Prevent layout shift */
    transition: all 0.3s ease;
}
/* More indicators for hidden steps */
.aq-wizard-more-indicator {
    height: 24px !important;
    font-size: 0.75rem !important;
    min-width: 36px !important;
    background-color: var(--mud-palette-action-disabled-background) !important;
    color: var(--mud-palette-text-secondary) !important;
    cursor: pointer;
    transition: all 0.2s ease;
}
.aq-wizard-more-indicator:not(.mud-disabled):hover {
    background-color: var(--mud-palette-action-hover) !important;
}
/* Adjust bullet size for compact mode to prevent overflow */
.aq-wizard-compact .aq-wizard-bullet {
    width: 32px !important;
    height: 32px !important;
}
.aq-wizard-compact .aq-wizard-bullet .mud-icon-button-label {
    font-size: 1rem !important;
}
/* MudIconButton as wizard bullet */
.aq-wizard-bullet.mud-icon-button {
    min-width: 0;
    min-width: initial;
    min-height: 0;
    min-height: initial;
    width: 32px;
    height: 32px;
    padding: 0;
    transition: all 0.3s ease;
}
/* Icon styling for all states */
.aq-wizard-bullet .mud-icon-root {
    font-size: 20px !important;
    transition: all 0.3s ease;
}
/* Default state - small circle */
.aq-wizard-bullet:not(.active):not(.visited):not(.error) .mud-icon-root {
    font-size: 14px !important;
    color: var(--mud-palette-lines-default);
}
/* Active bullet - 50% larger, no pulse animation */
.aq-wizard-bullet.active {
    width: 48px;
    height: 48px;
}
.aq-wizard-bullet.active .mud-icon-root {
    font-size: 28px !important;
    color: var(--mud-palette-primary);
}
/* Visited/Valid bullet - green with check */
.aq-wizard-bullet.visited:not(.active) .mud-icon-root {
    color: var(--mud-palette-success);
    font-size: 22px !important;
}
/* Error bullet - red with error icon */
.aq-wizard-bullet.error .mud-icon-root {
    color: var(--mud-palette-error);
    font-size: 22px !important;
}
/* Hover effect for clickable bullets */
.aq-wizard-bullet:not(:disabled):hover {
    transform: scale(1.2);
}
.aq-wizard-bullet:not(:disabled):hover .mud-icon-root {
    opacity: 0.8;
}
/* Disabled state */
.aq-wizard-bullet:disabled {
    cursor: not-allowed;
}
.aq-wizard-bullet:disabled .mud-icon-root {
    opacity: 0.5;
}
/* Mobile Navigation */
.aq-wizard-mobile-nav {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
}
.aq-wizard-mobile-nav .mud-button {
    min-height: 48px; /* Touch-friendly size */
}
/* Mobile Validation Alert */
.aq-wizard-mobile .aq-wizard-validation-alert {
    margin: 0 0 1rem 0 !important;
}
/* ==========================================
   MudCarousel Integration for Mobile Wizard
   ========================================== */
/* Carousel Container */
.aq-wizard-carousel {
    flex: 1;
    height: 100%;
    min-height: 0;
}
.aq-wizard-carousel .mud-carousel-swipe {
    height: 100%;
}
/* Carousel Item Wrapper */
.aq-wizard-carousel-item {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.aq-wizard-carousel-item .mud-carousel-item {
    height: 100%;
    padding: 0;
}
/* Carousel Step Container */
.aq-wizard-carousel-step {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* Carousel Step Header */
.aq-wizard-carousel-step-header {
    padding: 1rem;
    flex-shrink: 0;
}
.aq-wizard-carousel-step-header .mud-typography-body2 {
    font-size: 0.875rem;
    line-height: 1.5;
}
/* Carousel Step Content - default natural height */
.aq-wizard-carousel-step-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding: 0 8px;
    display: flex;
    flex-direction: column;
}
/* When content should expand to full height */
.aq-wizard-carousel-step-content.expand-content {
    height: 100%;
}
/* Mobile Form Styling - default natural height */
.aq-wizard-form-mobile {
    display: flex;
    flex-direction: column;
}
/* When form should expand to full height */
.aq-wizard-form-mobile.expand-form {
    height: 100%;
    flex: 1;
}
.aq-wizard-form-mobile.expand-form .mud-grid {
    flex: 1;
    height: 100%;
}
/* Fix MudGrid asymmetric spacing */
.aq-wizard-form-mobile .mud-grid {
    margin: 0 -8px 0 -8px;
    padding-bottom: 8px;
}
/* Upload button should not stretch full width */
.aq-wizard-form-mobile .mud-file-upload .mud-button {
    width: auto;
    min-width: 200px;
    max-width: 100%;
}
/* Special expansion item - only expands when inside expand-form */
.expand-form .wizard-step-expansion-item {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding: 0 !important;
}
/* Carousel Bullet Points */
.aq-wizard-carousel .d-flex.justify-center {
    padding: 0.75rem 0;
    gap: 0.5rem;
}
/* Customize scrollbar for mobile content */
.aq-wizard-carousel-step-content::-webkit-scrollbar {
    width: 4px;
}
.aq-wizard-carousel-step-content::-webkit-scrollbar-track {
    background: transparent;
}
.aq-wizard-carousel-step-content::-webkit-scrollbar-thumb {
    background: var(--mud-palette-lines-default);
    border-radius: 10px;
}
/* Cancel Button in Mobile Nav */
.aq-wizard-mobile-nav .mud-button-text {
    color: var(--mud-palette-text-secondary);
}
.aq-wizard-mobile-nav .mud-button-text:hover {
    background: var(--mud-palette-action-default-hover);
}
/* ==========================================
   Mobile Button Styles for Workplace Selection
   ========================================== */
/* Touch-friendly buttons in wizard */
.aq-wizard-mobile .mud-button.pa-4 {
    min-height: 72px;
    text-align: left;
    justify-content: flex-start;
    padding: 16px !important;
}
.aq-wizard-mobile .mud-button.pa-4 .d-flex.flex-column {
    width: 100%;
    text-align: left;
}
.aq-wizard-mobile .mud-button.pa-4 .mud-typography-button {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
}
.aq-wizard-mobile .mud-button.pa-4 .mud-typography-caption {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-top: 4px;
}
/* Date/Time Picker Mobile Optimizations */
.aq-wizard-mobile .mud-picker-inline-paper {
    max-height: 60vh;
    overflow-y: auto;
}
.aq-wizard-mobile .mud-picker-calendar {
    width: 100%;
    max-width: 100%;
}
/* Ensure dialog doesn't get cut off on mobile */
@media (max-width: 600px) {
    .mud-dialog.mud-dialog-width-xs,
    .mud-dialog.mud-dialog-width-sm,
    .mud-picker-dialog {
        margin: 16px !important;
        max-height: calc(100vh - 32px) !important;
        max-width: calc(100vw - 32px) !important;
    }
    
    .mud-picker-inline-paper {
        width: 100% !important;
    }
}
/* ==========================================
   Mobile Date/Time Picker Component Styles
   ========================================== */
.aq-mobile-datetime-picker {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 0.5rem;
    max-width: 100%;
    overflow-x: hidden;
}
/* Quick Preset Section */
.aq-datetime-preset-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.aq-datetime-preset-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.aq-datetime-preset-buttons .mud-button {
    flex: 1 1 auto;
    min-width: 100px;
    min-height: 44px; /* Touch-friendly size */
}
/* Date Selection Section */
.aq-datetime-date-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.aq-datetime-calendar-compact {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
}
.aq-datetime-calendar-compact .mud-picker-calendar-container {
    padding: 0;
}
.aq-datetime-calendar-compact .mud-picker-calendar-header {
    padding: 0.5rem;
}
/* Time Selection Section */
.aq-datetime-time-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.aq-datetime-time-section .mud-tabs {
    margin-bottom: 0.5rem;
}
.aq-datetime-time-section .mud-tabs-header {
    padding: 0;
    min-height: 40px;
}
.aq-datetime-time-section .mud-tab {
    min-height: 40px;
    padding: 0.5rem 1rem;
}
/* Time Grid */
.aq-datetime-time-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    grid-gap: 0.5rem;
    gap: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
    padding: 0.5rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}
.aq-time-slot-button {
    min-height: 44px !important;
    font-size: 0.875rem !important;
    padding: 0.5rem !important;
}
/* Custom scrollbar for time grid */
.aq-datetime-time-grid::-webkit-scrollbar {
    width: 6px;
}
.aq-datetime-time-grid::-webkit-scrollbar-track {
    background: transparent;
}
.aq-datetime-time-grid::-webkit-scrollbar-thumb {
    background: var(--mud-palette-lines-default);
    border-radius: 10px;
}
.aq-datetime-time-grid::-webkit-scrollbar-thumb:hover {
    background: var(--mud-palette-text-secondary);
}
/* Selection Display */
.aq-datetime-selection-display {
    margin-top: 0.5rem;
}
.aq-datetime-selection-display .mud-paper {
    background: var(--mud-palette-background-grey);
}
/* Mobile Responsive Adjustments */
@media (max-width: 400px) {
    .aq-datetime-preset-buttons .mud-button {
        min-width: 80px;
        font-size: 0.75rem;
    }
    
    .aq-datetime-time-grid {
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    }
    
    .aq-time-slot-button {
        font-size: 0.75rem !important;
        padding: 0.25rem !important;
    }
}
/* Dark theme adjustments */
.mud-theme-dark .aq-datetime-selection-display .mud-paper {
    background: var(--mud-palette-surface);
}
.mud-theme-dark .aq-datetime-time-grid {
    border-color: var(--mud-palette-lines-default);
}
/* Ensure dialog doesn't get cut off on mobile */
@media (max-width: 600px) {
    .mud-dialog.mud-dialog-width-xs,
    .mud-dialog.mud-dialog-width-sm,
    .mud-picker-dialog {
        margin: 16px !important;
        max-height: calc(100vh - 32px) !important;
        max-width: calc(100vw - 32px) !important;
    }
    
    .mud-picker-inline-paper {
        width: 100% !important;
    }
}
/* ==========================================
   Mobile Date Range Picker Component Styles
   ========================================== */
.aq-mobile-daterange-picker {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 0.5rem;
    max-width: 100%;
    overflow-x: hidden;
}
/* Sticky header for date range display */
.aq-daterange-sticky-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--mud-palette-background);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    margin: -0.5rem -0.5rem 0.75rem -0.5rem;
    padding: 0;
}
.aq-daterange-header-content {
    background: var(--mud-palette-surface);
    padding: 0.75rem 0.5rem;
}
.aq-daterange-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    overflow: hidden;
}
.aq-daterange-item {
    flex: 1;
    min-width: 0; /* Allow flex items to shrink */
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.aq-daterange-item.aq-daterange-active {
    background: var(--mud-palette-primary-lighten);
    border-color: var(--mud-palette-primary);
}
.aq-daterange-label {
    font-size: 0.625rem;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    letter-spacing: 0.5px;
}
.aq-daterange-value {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.aq-daterange-empty {
    color: var(--mud-palette-text-disabled);
    font-style: italic;
}
.aq-daterange-arrow {
    flex-shrink: 0;
    margin: 0 0.125rem;
    color: var(--mud-palette-text-secondary);
}
.aq-daterange-duration {
    text-align: center;
    font-size: 0.75rem;
    color: var(--mud-palette-success);
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}
/* Mode selector buttons */
.aq-daterange-mode-selector {
    margin-bottom: 0.75rem;
    margin-top: 0.5rem;
}
.aq-daterange-mode-selector .mud-button-group {
    display: flex;
    gap: 0;
}
.aq-daterange-mode-selector .mud-button {
    flex: 1;
    min-height: 40px;
    font-size: 0.875rem;
}
.aq-daterange-mode-selector .mud-button .mud-button-icon-start {
    margin-right: 0.25rem;
}
/* Reuse existing styles for preset buttons, calendar, and time grid */
.aq-mobile-daterange-picker .aq-datetime-preset-section,
.aq-mobile-daterange-picker .aq-datetime-preset-buttons,
.aq-mobile-daterange-picker .aq-datetime-date-section,
.aq-mobile-daterange-picker .aq-datetime-time-section,
.aq-mobile-daterange-picker .aq-datetime-time-grid,
.aq-mobile-daterange-picker .aq-time-slot-button {
    /* Inherit styles from MobileDateTimePicker */
}
/* Dark theme adjustments for date range picker */
.mud-theme-dark .aq-daterange-sticky-header {
    background: var(--mud-palette-background);
}
.mud-theme-dark .aq-daterange-item.aq-daterange-active {
    background: var(--mud-palette-primary-darken);
}
/* Mobile responsive adjustments */
@media (max-width: 400px) {
    .aq-daterange-value {
        font-size: 0.75rem;
    }
    
    .aq-daterange-label {
        font-size: 0.5625rem;
    }
    
    .aq-daterange-item {
        padding: 0.25rem;
    }
    
    .aq-daterange-header-content {
        padding: 0.5rem 0.25rem;
    }
    
    .aq-daterange-mode-selector .mud-button {
        min-height: 36px;
        font-size: 0.8125rem;
    }
}
/* MudBlazor Dialog Component Overrides */
/* Provides responsive styling for dialog components */
/* ==========================================
   Responsive Dialog Sizing
   ========================================== */
/* Ensure dialogs are responsive on mobile */
@media (max-width: 600px) {
    /* Override inline styles for mobile responsiveness */
    .mud-dialog {
        min-width: 0 !important;
        min-width: initial !important;
    }
    
    /* Make dialog container full width minus margins */
    .mud-dialog-container {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        min-width: initial !important;
    }
    
    /* Prevent dialog title and close button from wrapping */
    .mud-dialog-title {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
    }
    
    /* Ensure close button stays on the right */
    .mud-dialog-title .mud-icon-button {
        flex-shrink: 0 !important;
        margin-left: auto !important;
    }
}
/* Tablet optimizations */
@media (min-width: 601px) and (max-width: 960px) {
    .mud-dialog-container {
        max-width: 90vw !important;
    }
}
/* ==========================================
   Mobile Dialog Action Centering
   ========================================== */
/* Center dialog action buttons on mobile devices for better accessibility */
@media (max-width: 600px) {
    .mud-dialog-actions {
        justify-content: center !important;
    }
}
/* Additional mobile optimizations for dialog actions */
@media (max-width: 600px) {
    /* Ensure proper spacing between centered buttons */
    .mud-dialog-actions .mud-button {
        margin: 0 0.5rem;
    }
    
    /* First and last button margin adjustments */
    .mud-dialog-actions .mud-button:first-child {
        margin-left: 0;
    }
    
    .mud-dialog-actions .mud-button:last-child {
        margin-right: 0;
    }
}
/* Very small screens (phones in portrait) */
@media (max-width: 380px) {
    /* Stack buttons vertically if needed */
    .mud-dialog-actions {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    /* Full width buttons on very small screens */
    .mud-dialog-actions .mud-button {
        min-width: 120px;
    }
}
/* ==========================================
   Mobile Dialog Padding Overrides
   ========================================== */
/* Override default MudBlazor dialog padding for mobile dialogs */
/* Applied when dialog has class="mobile-dialog" */
.mobile-dialog .mud-dialog-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
}
/* Also apply to dialog title for consistency */
.mobile-dialog .mud-dialog-title {
    padding-left: 12px !important;
    padding-right: 12px !important;
}
/* And dialog actions area */
.mobile-dialog .mud-dialog-actions {
    padding-left: 12px !important;
    padding-right: 12px !important;
    /* Center-align buttons instead of default right alignment */
    justify-content: center !important;
}
/* Add consistent spacing between centered buttons in mobile dialogs */
.mobile-dialog .mud-dialog-actions .mud-button {
    margin: 0 0.5rem;
}
/* Remove extra margin from first and last buttons for clean edges */
.mobile-dialog .mud-dialog-actions .mud-button:first-child {
    margin-left: 0;
}
.mobile-dialog .mud-dialog-actions .mud-button:last-child {
    margin-right: 0;
}
/* ==========================================
   Responsive Dialog Button Container
   ========================================== */
/* Responsive button container for dialogs
 * Uses flexbox with smart wrapping for optimal UX across devices
 * Follows aq- prefix convention for custom Aquilo components
 */
.aq-dialog-button-container {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    width: 100%;
}
/* Mobile: Stack vertically (< 600px)
 * Full-width buttons for easy thumb access
 */
@media (max-width: 599px) {
    .aq-dialog-button-container {
        flex-direction: column;
    }

    .aq-dialog-button-container .mud-button {
        width: 100%;
    }
}
/* Tablet: 2 buttons per row with wrapping (600-959px)
 * Provides balance between space utilization and clarity
 */
@media (min-width: 600px) and (max-width: 959px) {
    .aq-dialog-button-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .aq-dialog-button-container .mud-button {
        flex: 1 1 calc(50% - 6px); /* 2 buttons per row, accounting for gap */
        min-width: 140px;
    }
}
/* Desktop: All buttons in one row (960px+)
 * Traditional dialog pattern with right-aligned actions
 */
@media (min-width: 960px) {
    .aq-dialog-button-container {
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .aq-dialog-button-container .mud-button {
        flex: 0 1 auto;
        min-width: 120px;
    }
}
/* Aquilo Detail Page Component - Global Styles */
/* Uses MudBlazor CSS variables for consistency */
.aq-detail-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: calc(100vh - 64px - 48px);
    min-height: calc(100vh - var(--mud-appbar-height, 64px) - 48px);
    padding-bottom: 24px;
}
/* Container query support for responsive behavior */
@container (max-height: 800px) {
    .aq-detail-page {
        min-height: calc(100vh - 64px - 32px);
        min-height: calc(100vh - var(--mud-appbar-height, 64px) - 32px);
    }
}
/* Header Section */
.aq-detail-header {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Auto-collapsed header state */
.aq-detail-header[data-scrolled="true"]:not(.aq-detail-header-expanded) .mud-card-content {
        padding-top: 8px;
        padding-bottom: 8px;
    }
.aq-detail-header[data-scrolled="true"]:not(.aq-detail-header-expanded) .aq-detail-statistics {
        display: none;
    }
/* Smooth collapse animation */
.aq-detail-header .mud-collapse {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Gradient Header using theme colors */
.aq-detail-gradient-header {
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-primary-darken) 100%);
}
/* Allow custom gradient override with theme colors */
.aq-detail-gradient-header.aq-detail-gradient-green {
    background: linear-gradient(135deg, var(--mud-palette-success) 0%, var(--mud-palette-success-darken) 100%);
}
/* Header Statistics */
.aq-detail-statistics {
    margin-top: 0;
    transition: opacity 0.2s ease;
}
.aq-detail-stat-item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.aq-detail-stat-content {
    flex: 1;
}
.aq-detail-stat-value {
    font-weight: 600;
    line-height: 1.2;
}
.aq-detail-stat-label {
    opacity: 0.8;
}
/* Quick Facts Section */
.aq-detail-facts-section {
    /* Grid item - takes only needed space */
}
.aq-detail-fact-card {
    height: 100%;
    transition: all 0.3s ease;
}
.aq-detail-fact-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--mud-elevation-8);
}
.aq-detail-fact-header {
    display: flex;
    align-items: center;
    gap: 16px;
}
.aq-detail-fact-content {
    flex: 1;
}
.aq-detail-fact-value {
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.2;
}
.aq-detail-fact-title {
    margin-top: 4px;
}
/* Tabs Section - Container for tabs component */
.aq-detail-tabs-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 400px; /* Ensure minimum height for tabs */
}
/* Minimal styling - let MudBlazor handle tab layout */
.aq-detail-tabs {
    height: 100%;
}
/* Tab content wrapper with scrolling support */
.aq-detail-tab-content {
    padding: 16px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    
    /* Better scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: var(--mud-palette-action-default) transparent;
}
/* Custom scrollbar for webkit browsers */
.aq-detail-tab-content::-webkit-scrollbar {
    width: 8px;
}
.aq-detail-tab-content::-webkit-scrollbar-track {
    background: transparent;
}
.aq-detail-tab-content::-webkit-scrollbar-thumb {
    background-color: var(--mud-palette-action-default);
    border-radius: 4px;
}
.aq-detail-tab-content::-webkit-scrollbar-thumb:hover {
    background-color: var(--mud-palette-action-default-hover);
}
/* Ensure proper text color in gradient header */
.aq-detail-gradient-header .mud-typography,
.aq-detail-gradient-header .mud-icon-root,
.aq-detail-gradient-header .mud-chip,
.aq-detail-gradient-header .mud-button,
.aq-detail-gradient-header .mud-card-header,
.aq-detail-gradient-header .mud-card-content {
    color: var(--mud-palette-white) !important;
}
/* Semi-transparent chip background in gradient header */
.aq-detail-gradient-header .mud-chip {
    background-color: rgba(255, 255, 255, 0.2) !important;
}
/* Ensure MudCard styling works with gradient */
.aq-detail-gradient-header.mud-card {
    background-color: transparent !important;
}
/* MudCard header actions spacing */
.mud-card-header-actions {
    gap: 8px;
    display: flex;
    align-items: center;
}
/* Responsive Design */
@media (max-width: 600px) {
    .aq-detail-tab-content {
        padding: 12px;
    }
}
/* Theme-aware shadows and elevations */
.mud-theme-dark .aq-detail-fact-card:hover {
    box-shadow: var(--mud-elevation-16);
}
/* GenericViewModelDisplayComponent - Container-Aware Styling */
/* Automatically adapts height based on container context */
/* ==========================================
   Component Root Styling
   ========================================== */
/* Default standalone behavior - full viewport height */
.aq-generic-display {
    position: relative; /* Establish positioning context for gradient overlay */
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: height 0.3s ease, max-height 0.3s ease;
}
/* Embedded mode - fills parent container for nested contexts */
.aq-generic-display-embedded {
    position: relative; /* Establish positioning context for gradient overlay */
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* ==========================================
   Tabbed Display Container
   ========================================== */
/* Tabbed display fills its container */
.aq-generic-tabbed-display {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}
/* When directly inside flex MudContainer, fill available space */
.mud-container > .aq-generic-tabbed-display {
    flex: 1;
    min-height: 0;
}
/* Tab bar stays at top */
.aq-generic-tabbed-display .mud-tabs-tabbar {
    flex-shrink: 0;
}
/* Tab panels container fills remaining space */
.aq-generic-tabbed-display .mud-tabs-panels {
    flex: 1;
    min-height: 0; /* Important for flex children */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* Individual tab panel should be scrollable */
.aq-generic-tabbed-display .mud-tab-panel {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}
/* ==========================================
   Collapsed State Styling
   ========================================== */
/* Collapsed state - hide content section */
.aq-generic-display-collapsed {
    min-height: 60px !important;
    height: auto !important;
}
.aq-generic-display-collapsed .aq-generic-display-content {
    display: none !important;
}
/* Smooth transition for collapse/expand */
.aq-generic-display-content {
    transition: opacity 0.3s ease;
}
/* ==========================================
   Dialog Context Detection
   ========================================== */
/* When component is inside any MudBlazor dialog */
/* Automatically switches to container-relative height */
.mud-dialog-content .aq-generic-display {
    height: 100%;
    /* Ensure flex behavior is maintained */
    display: flex;
    flex-direction: column;
}
/* ==========================================
   Mobile Dialog Specific
   ========================================== */
/* Additional optimizations for mobile dialogs */
.mobile-dialog .mud-dialog-content .aq-generic-display {
    height: 100%;
    /* Mobile-specific adjustments if needed */
}
/* ==========================================
   Wizard Context Specific
   ========================================== */
/* When GenericViewModelDisplayComponent is inside wizard carousel */
.aq-wizard-carousel-step-content .aq-generic-display-embedded {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* Ensure footer stays at bottom in wizard context */
.aq-wizard-carousel-step-content .aq-generic-display-footer {
    margin-top: auto;
}
/* Ensure scrollable content section works in both contexts */
/*noinspection CssUnresolvedCustomProperty*/
.aq-generic-display-content {
    position: relative; /* Required for gradient overlay positioning */
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    background: var(--mud-palette-surface);
    padding-top: 4px;
}
/* In embedded mode, content fills available space and scrolls */
.aq-generic-display-embedded .aq-generic-display-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 0; /* Remove top padding in embedded mode */
}
/* Desktop layout padding */
.aq-generic-display-content.desktop {
    padding: 16px;
    padding: var(--spacing-md);
}
/* Mobile gradient overlay - positioned at bottom of root container */
/*noinspection CssUnresolvedCustomProperty*/
.aq-generic-display-gradient-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(
        to top,
        var(--mud-palette-surface) 0%,
        transparent 100%
    );
    pointer-events: none; /* Allow clicks through gradient */
    z-index: 1; /* Same level as content, below footer */
}
/* Without footer - smaller gradient */
.aq-generic-display-gradient-overlay.no-footer {
    height: 15vh;
}
/* With footer - larger gradient to account for footer coverage */
.aq-generic-display-gradient-overlay.with-footer {
    height: 25vh; /* Footer covers ~8-10vh, leaving ~15vh visible */
}
/* ==========================================
   Header and Footer Sections
   ========================================== */
/* Fixed header section */
.aq-generic-display-header {
    flex-shrink: 0;
    width: 100%;
}
/* Fixed footer/controls section */
.aq-generic-display-footer {
    flex-shrink: 0;
    width: 100%;
    position: relative;
    z-index: 10; /* Above gradient overlay */
}
/* In embedded mode, ensure header/footer work with flex layout */
.aq-generic-display-embedded .aq-generic-display-header,
.aq-generic-display-embedded .aq-generic-display-footer {
    z-index: 10; /* Ensure they stay above gradient overlay */
}
/* ==========================================
   Empty State Styling
   ========================================== */
.aq-generic-display .empty-state-icon {
    opacity: 0.3;
    font-size: 4rem !important;
}
/* ==========================================
   Search Field Styling
   ========================================== */
.aq-generic-display .search-field {
    /* Ensure search field is properly styled */
    width: 100%;
}
/* Desktop search field width constraint */
@media (min-width: 960px) {
    .aq-generic-display-header .search-field {
        width: 300px;
    }
}
/* ==========================================
   Grid Layout - Equal Height Cards
   ========================================== */
/* Grid container for equal height behavior */
.aq-generic-display-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}
/* Grid items must flex to create equal height rows */
.aq-generic-display-grid-item {
    display: flex !important;
}
/* Card wrapper ensures cards fill their container */
.aq-generic-display-card-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
}
/* Ensure cards within the wrapper stretch to full height */
.aq-generic-display-card-wrapper > * {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}
/* Card content should be scrollable if it overflows */
.aq-generic-display-card-wrapper .mud-card-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    /* Limit max height to prevent extremely tall cards */
    max-height: 400px;
}
/* Ensure SimpleViewModelCard fills the wrapper */
.aq-generic-display-card-wrapper .simple-viewmodel-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}
/* Header should not shrink */
.aq-generic-display-card-wrapper .simple-viewmodel-card-header {
    flex-shrink: 0;
}
/* Card actions/footer should stay at bottom */
.aq-generic-display-card-wrapper .mud-card-actions {
    margin-top: auto;
    flex-shrink: 0;
}
/* ==========================================
   Card Description Section
   ========================================== */
/* Fixed height description section for consistent card heights */
/* Shows full content with scroll when content exceeds 3 lines */
.aq-card-description-section {
    height: 72px;
    overflow-y: auto;
    overflow-x: hidden;
}
/* ==========================================
   Responsive Adjustments
   ========================================== */
/* Very small screens */
@media (max-width: 380px) {
    .aq-generic-display-footer {
        padding: 8px;
        padding: var(--spacing-sm);
    }
}
/* Mobile - Cards don't need equal height in stack layout */
@media (max-width: 600px) {
    .aq-generic-display-card-wrapper .mud-card-content {
        max-height: none;
    }
}
/* Tablet and up */
@media (min-width: 600px) {
    /* Desktop-specific adjustments */
    .aq-generic-display.desktop .aq-generic-display-content {
        padding: 24px;
        padding: var(--spacing-lg);
    }
}
/* Generic Overview Component Styles */
/* Following MudBlazor theming patterns - no hardcoded colors */
/* Theme Variables */
:root {
    --overview-header-height: 180px;
    --overview-border-radius: 16px;
    --overview-spacing: 24px;
}
/* Header Styles with theme-aware gradients */
.overview-header-gradient-primary {
    background: linear-gradient(135deg, var(--mud-palette-primary), var(--mud-palette-primary-darken));
}
.overview-header-gradient-success {
    background: linear-gradient(135deg, var(--mud-palette-success), var(--mud-palette-success-darken));
}
.overview-header-gradient-warning {
    background: linear-gradient(135deg, var(--mud-palette-warning), var(--mud-palette-warning-darken));
}
.overview-header-gradient-error {
    background: linear-gradient(135deg, var(--mud-palette-error), var(--mud-palette-error-darken));
}
.overview-header-gradient-info {
    background: linear-gradient(135deg, var(--mud-palette-info), var(--mud-palette-info-darken));
}
.overview-header-gradient-dark {
    background: linear-gradient(135deg, var(--mud-palette-dark), var(--mud-palette-dark-darken));
}
/* Card Styles */
.overview-card-hoverable {
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.overview-card-hoverable:hover {
    transform: translateY(-4px);
    box-shadow: var(--mud-elevation-8);
}
.overview-card-hoverable::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--mud-palette-primary);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.overview-card-hoverable:hover::before {
    transform: scaleX(1);
}
/* Status Badges using theme colors */
.overview-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.overview-status-active {
    background-color: var(--mud-palette-success-lighten);
    color: var(--mud-palette-success);
}
.overview-status-inactive {
    background-color: var(--mud-palette-gray-lighten);
    color: var(--mud-palette-gray-default);
}
.overview-status-pending {
    background-color: var(--mud-palette-warning-lighten);
    color: var(--mud-palette-warning);
}
.overview-status-error {
    background-color: var(--mud-palette-error-lighten);
    color: var(--mud-palette-error);
}
/* Statistics Cards */
.overview-stat-card {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}
.overview-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--mud-elevation-4);
}
.overview-stat-icon {
    opacity: 0.9;
}
.overview-stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}
.overview-stat-label {
    font-size: 0.875rem;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* Filter Chips */
.overview-filter-chip {
    transition: all 0.2s ease;
}
.overview-filter-chip:hover {
    transform: translateY(-1px);
    box-shadow: var(--mud-elevation-2);
}
/* Loading States */
.overview-skeleton-card {
    animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}
/* Empty State */
.overview-empty-state {
    animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Responsive Adjustments */
@media (max-width: 960px) {
    :root {
        --overview-header-height: 140px;
        --overview-spacing: 16px;
    }
    
    .overview-stat-value {
        font-size: 1.5rem;
    }
}
@media (max-width: 600px) {
    :root {
        --overview-header-height: 120px;
        --overview-spacing: 12px;
        --overview-border-radius: 12px;
    }
    
    .overview-stat-value {
        font-size: 1.25rem;
    }
    
    .overview-status-badge {
        font-size: 0.7rem;
        padding: 2px 8px;
    }
}
/* Dark Theme Support */
.mud-theme-dark .overview-card-hoverable {
    background-color: var(--mud-palette-surface);
}
.mud-theme-dark .overview-card-hoverable:hover {
    box-shadow: var(--mud-elevation-16);
}
.mud-theme-dark .overview-stat-card:hover {
    box-shadow: var(--mud-elevation-8);
}
/* Animation Classes */
.overview-fade-in {
    animation: fadeIn 0.3s ease;
}
.overview-slide-up {
    animation: slideUp 0.3s ease;
}
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Utility Classes */
.overview-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.overview-gradient-text {
    background: linear-gradient(135deg, var(--mud-palette-primary), var(--mud-palette-primary-darken));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
/* Generic Selection Dialog Component Styles */
/* Provides proper layout and alignment for the selection dialog */
/* ==========================================
   Dialog Container Overrides
   ========================================== */
/* Main dialog wrapper */
.aq-selection-dialog .mud-dialog {
    overflow: hidden;
    max-height: 80vh;
    height: 80vh;
    display: flex;
    flex-direction: column;
}
/* Dialog content container - remove default padding for full-width background */
.aq-selection-dialog .mud-dialog-content {
    padding: 0 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    max-height: calc(80vh - 140px); /* Account for title and actions */
}
/* Inner content wrapper with proper padding */
.aq-selection-dialog-content {
    padding: 24px;
    padding: var(--spacing-lg);
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Changed from overflow-y: auto */
    background: var(--mud-palette-background);
    min-height: 0;
}
/* Main stack container should fill available space */
.aq-selection-dialog-content > .mud-stack {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
/* Search field should have fixed height */
.aq-selection-dialog-content .mud-input-control {
    flex: 0 0 auto;
}
/* Cards grid container should be scrollable and take remaining space */
.aq-selection-dialog-content .mud-grid {
    align-content: flex-start;
}
/* Items scroll container for proper scrolling */
.aq-selection-dialog-content .items-scroll-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 200px; /* Ensure minimum visible area */
    scrollbar-width: thin;
    scrollbar-color: var(--mud-palette-action-default) transparent;
    padding-right: 0.25rem;
    padding-right: var(--spacing-xs); /* Space for scrollbar */
}
/* Loading wrapper should also respect the scrollable area */
.aq-selection-dialog-content .loading-wrapper-component {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.aq-selection-dialog-content .loading-wrapper-component > div {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
/* Mobile optimizations */
@media (max-width: 600px) {
    .aq-selection-dialog .mud-dialog {
        max-height: 90vh;
        height: 90vh;
    }
    
    .aq-selection-dialog .mud-dialog-content {
        max-height: calc(90vh - 120px); /* Smaller header/footer on mobile */
    }
    
    .aq-selection-dialog-content {
        padding: 16px;
        padding: var(--spacing-md);
    }
    
    .aq-selection-dialog-content .mud-grid {
        min-height: 150px; /* Smaller minimum on mobile */
    }
}
/* ==========================================
   Dialog Actions Layout
   ========================================== */
/* Actions container for proper button alignment */
.aq-selection-dialog-actions {
    display: flex;
    gap: 16px;
    gap: var(--spacing-md);
    padding: 16px 24px;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-divider);
    justify-content: center; /* Center content by default */
}
/* When create button exists, use space-between layout */
.aq-selection-dialog-actions:has(.aq-selection-dialog-actions-create) {
    justify-content: space-between;
}
/* Create button on the left */
.aq-selection-dialog-actions-create {
    /* No margin needed with flexbox space-between */
}
/* Action buttons group */
.aq-selection-dialog-actions-buttons {
    display: flex;
    gap: 8px;
    gap: var(--spacing-sm);
    align-items: center;
}
/* Single button styling - ensure minimum width for better appearance */
.aq-selection-dialog-actions-buttons .mud-button {
    min-width: 120px;
}
/* Mobile layout - stack buttons */
@media (max-width: 600px) {
    .aq-selection-dialog-actions {
        flex-direction: column;
        padding: 16px;
        padding: var(--spacing-md);
    }
    
    .aq-selection-dialog-actions-create {
        margin-right: 0;
        width: 100%;
    }
    
    .aq-selection-dialog-actions-buttons {
        width: 100%;
        justify-content: stretch;
    }
    
    .aq-selection-dialog-actions-buttons .mud-button {
        flex: 1;
    }
}
/* ==========================================
   Grid Layout Improvements
   ========================================== */
/* Ensure cards fill available height */
.aq-selection-dialog .mud-grid {
    align-content: flex-start;
}
.aq-selection-dialog .mud-grid-item {
    display: flex;
}
.aq-selection-dialog .mud-grid-item > * {
    width: 100%;
}
/* ==========================================
   Search and Filter Section
   ========================================== */
/* Search field styling */
.aq-selection-dialog .mud-input-outlined {
    background: var(--mud-palette-surface);
}
/* Filter section with proper spacing */
.aq-selection-dialog .generic-selection-filter {
    background: var(--mud-palette-surface);
    padding: 16px;
    padding: var(--spacing-md);
    border-radius: var(--mud-default-borderradius);
    margin-bottom: 16px;
    margin-bottom: var(--spacing-md);
    flex: 0 0 auto; /* Fixed size, don't grow or shrink */
}
/* ==========================================
   Selected Items Summary
   ========================================== */
.aq-selection-dialog .mud-paper {
    background: var(--mud-palette-surface);
    flex: 0 0 auto; /* Fixed size for summary section */
}
/* Chip set for selected items */
.aq-selection-dialog .mud-chipset {
    gap: 0.25rem;
    gap: var(--spacing-xs);
}
/* ==========================================
   Empty State
   ========================================== */
.aq-selection-dialog .mud-alert {
    margin: 24px 0;
    margin: var(--spacing-lg) 0;
    flex: 0 0 auto; /* Fixed size for empty state */
}
/* ==========================================
   Loading State
   ========================================== */
.aq-selection-dialog .loading-wrapper {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* ==========================================
   Dark Mode Support
   ========================================== */
.mud-theme-dark .aq-selection-dialog-content {
    background: var(--mud-palette-background-gray);
}
.mud-theme-dark .aq-selection-dialog-actions {
    background: var(--mud-palette-surface);
    border-top-color: var(--mud-palette-lines-default);
}
/* ==========================================
   Title Bar Improvements
   ========================================== */
.aq-selection-dialog .mud-dialog-title {
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-divider);
}
/* Selection count chip in title */
.aq-selection-dialog .mud-dialog-title .mud-chip {
    margin-left: auto;
}
/* Mobile Settings Component - Optimized for mobile form UX */
/* Uses MudBlazor CSS variables for theme consistency */
/* Main container - full height with proper scrolling */
.aq-mobile-settings {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--mud-palette-background);
}
/* Fixed header with back navigation */
.aq-settings-header {
    flex-shrink: 0;
    padding: 16px;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-divider);
    box-shadow: var(--mud-elevation-1);
}
/* Scrollable content area */
.aq-settings-content {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    padding-bottom: 120px; /* Space for fixed action buttons + ROT button */
    -webkit-overflow-scrolling: touch; /* Smooth iOS scrolling */
    scrollbar-width: thin;
    scrollbar-color: var(--mud-palette-action-default) transparent;
}
/* Section dividers without cards */
.aq-settings-section {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--mud-palette-divider-light);
}
.aq-settings-section:last-of-type {
    border-bottom: none;
}
/* Section titles with subtle icons */
.aq-section-title {
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    color: var(--mud-palette-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.aq-section-title .mud-icon-root {
    color: var(--mud-palette-primary);
    opacity: 0.8;
}
/* Fixed action buttons with backdrop blur */
.aq-settings-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-divider);
    z-index: 100;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}
/* Input field optimizations */
.aq-settings-section .mud-input {
    margin-top: 8px;
}
.aq-settings-section .mud-select {
    margin-top: 8px;
}
/* Ensure proper spacing for filled variants */
.aq-settings-section .mud-input-filled {
    background-color: var(--mud-palette-background-grey);
}
/* Mobile-specific adjustments */
@media (max-width: 600px) {
    .aq-settings-header {
        padding: 12px;
        position: sticky;
        top: 0;
        z-index: 99;
    }
    
    .aq-settings-content {
        padding: 12px;
        padding-bottom: 160px; /* Extra space for action buttons + ROT button + safe areas */
    }
    
    .aq-settings-section {
        margin-bottom: 20px;
        padding-bottom: 12px;
    }
    
    .aq-section-title {
        font-size: 0.875rem;
        margin-bottom: 8px;
    }
    
    /* Ensure minimum touch targets */
    .aq-settings-section .mud-checkbox {
        min-height: 48px;
        padding: 8px 0;
    }
    
    .aq-settings-section .mud-button {
        min-height: 44px;
        font-size: 0.875rem;
    }
    
    /* Optimize input density on mobile */
    .aq-settings-section .mud-input-control {
        margin-top: 4px;
        margin-bottom: 4px;
    }
    
    /* Better tap targets for checkboxes */
    .aq-settings-section .mud-checkbox-span {
        padding: 12px 8px;
    }
    
    /* Floating action button style for save */
    .aq-settings-actions .mud-button-filled {
        box-shadow: var(--mud-elevation-4);
    }
}
/* Tablet adjustments */
@media (min-width: 601px) and (max-width: 960px) {
    .aq-settings-content {
        padding: 20px;
        max-width: 720px;
        margin: 0 auto;
    }
    
    .aq-settings-actions {
        padding: 16px 20px;
    }
}
/* Dark mode optimizations */
.mud-theme-dark .aq-settings-section {
    border-bottom-color: var(--mud-palette-divider);
}
.mud-theme-dark .aq-settings-actions {
    background: var(--mud-palette-surface);
    border-top-color: var(--mud-palette-divider);
}
/* Smooth transitions */
.aq-settings-section .mud-input,
.aq-settings-section .mud-select,
.aq-settings-section .mud-checkbox {
    transition: all 0.2s ease;
}
/* Focus states for accessibility */
.aq-settings-section .mud-input:focus-within {
    transform: scale(1.01);
}
/* Loading state */
.aq-mobile-settings.loading .aq-settings-content {
    opacity: 0.6;
    pointer-events: none;
}
/* Keyboard visible adjustments */
@supports (height: 100vh) {
    .aq-mobile-settings {
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }
}
/* iOS safe area support */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .aq-settings-actions {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
    
    .aq-settings-content {
        padding-bottom: calc(140px + env(safe-area-inset-bottom)); /* Include ROT button space */
    }
    
    @media (max-width: 600px) {
        .aq-settings-content {
            padding-bottom: calc(180px + env(safe-area-inset-bottom)); /* Extra space on mobile */
        }
    }
}
/* Icon badge container sizing */
.large-badge .mud-badge.mud-badge-icon {
    height: 32px;
    width: 32px;
    min-width: 32px;
    border-radius: 16px;
}
/* Icon sizing inside the badge */
.large-badge .mud-badge .mud-icon-badge {
    font-size: 24px;
    width: 24px;
    height: 24px;
}
/* Text/content badge sizing (when not an icon badge) */
.number-badge .mud-badge {
    height: 16px;
    width: 32px;
    min-width: 32px;
    font-size: 16px;
    border-radius: 16px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Adjust overlap positioning for larger badge */
.large-badge .mud-badge.mud-badge-top.right.mud-badge-overlap {
    inset: auto auto calc(100% - 18px) calc(100% - 18px);
}
/* Adjust non-overlap positioning for larger badge */
.number-badge .mud-badge.mud-badge-top.right {
    inset: auto auto calc(100% - 8px) calc(100% - 8px);
}
/* Optional: Ensure the badge wrapper doesn't interfere */
.large-badge .mud-badge-wrapper {
    display: contents;
}
/* SimpleViewModelCard Component Styles */
/* Optimized card component following MudBlazor structure */
/* Card Container */
.simple-viewmodel-card {
    cursor: pointer;
    transition: box-shadow 0.3s ease;
    /* Support for equal height cards */
    display: flex;
    flex-direction: column;
    height: auto;
}
.simple-viewmodel-card:hover:not(.selected) {
    box-shadow: var(--mud-elevation-4);
}
/* Card Header - Enhanced alignment */
.simple-viewmodel-card-header {
    display: flex;
    align-items: center;
    padding: 0 16px;
    min-height: 72px;
}
.simple-viewmodel-card-header .mud-card-header-avatar {
    flex: 0 0 auto;
    margin-right: 16px;
    display: flex;
    align-items: center;
}
.simple-viewmodel-card-header .mud-card-header-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Card Header Actions - Proper vertical centering */
.simple-viewmodel-card-header-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding-left: 8px;
    align-self: stretch; /* Ensure it takes full height */
}
/* Ensure buttons in actions are properly aligned */
.simple-viewmodel-card-header-actions .mud-button-root,
.simple-viewmodel-card-header-actions .mud-icon-button {
    align-self: center;
}
/* Mobile-specific adjustments */
@media (max-width: 600px) {
    .simple-viewmodel-card-header {
        padding: 12px;
        min-height: 64px;
    }
    
    .simple-viewmodel-card-header .mud-card-header-avatar {
        margin-right: 12px;
    }
}
/* Card Content */
.simple-viewmodel-card .mud-card-content {
    padding: 0 16px;
    /* Allow content to grow and be scrollable */
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}
/* Card Actions/Footer */
.simple-viewmodel-card .mud-card-actions {
    padding: 8px;
    display: flex;
    align-items: center;
    /* Keep actions at bottom */
    margin-top: auto;
    flex-shrink: 0;
}
/* Dark mode support using MudBlazor theme variables */
.simple-viewmodel-card {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}
.simple-viewmodel-card.mud-paper-outlined {
    border: 1px solid var(--mud-palette-divider);
}
/* Clickable state */
.simple-viewmodel-card[onclick] {
    cursor: pointer;
}
/* Selected state */
.simple-viewmodel-card.selected {
    border: 2px solid var(--mud-palette-primary) !important;
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
    box-shadow: var(--mud-elevation-2);
}
/* Hover state for non-selected cards */
.simple-viewmodel-card:hover:not(.selected) {
    transform: translateY(-2px);
    border-color: var(--mud-palette-primary);
}
/* Mobile selected state - stronger visual feedback */
.simple-viewmodel-card.selected.mobile {
    border-width: 3px !important;
    background: rgba(var(--mud-palette-primary-rgb), 0.12);
}
/* Disabled state */
.simple-viewmodel-card.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}
/* Responsive typography in content - Allow wrapping */
.simple-viewmodel-card-header .mud-card-header-content > .mud-typography {
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    line-height: 1.5;
    /* Remove nowrap to allow text wrapping */
}
/* Support for dense mode */
.simple-viewmodel-card.dense .simple-viewmodel-card-header {
    padding: 8px 12px;
    min-height: 56px;
}
.simple-viewmodel-card.dense .mud-card-content {
    padding: 8px 12px;
}
/* Animation for card interactions */
.simple-viewmodel-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.simple-viewmodel-card:active {
    transform: scale(0.98);
}
/* Loading state */
.simple-viewmodel-card.loading {
    position: relative;
    overflow: hidden;
}
.simple-viewmodel-card.loading::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    animation: loading-shimmer 2s infinite;
}
@keyframes loading-shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}
/* Simple ViewModel Detail Component - Drawer Optimized */
.aq-simple-detail {
    display: flex;
    flex-direction: column;
    height: 100%;
}
/* Header - compact, fixed at top */
.aq-simple-detail-header {
    display: flex;
    align-items: center;
    gap: var(--mud-spacing-md);
    padding: var(--mud-spacing-md);
    border-bottom: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
}
/* Tabs - fill remaining vertical space */
.aq-simple-detail-tabs {
    flex: 1;
    min-height: 0; /* Critical for enabling flex scrolling */
    overflow: hidden;
}
/* Tab panel content - scrollable */
.aq-simple-detail-tab-panel {
    padding: var(--mud-spacing-md);
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}
/* Smooth scrolling for tab content */
.aq-simple-detail-tab-panel {
    scroll-behavior: smooth;
}
/* Custom scrollbar styling for tab content (webkit browsers) */
.aq-simple-detail-tab-panel::-webkit-scrollbar {
    width: 8px;
}
.aq-simple-detail-tab-panel::-webkit-scrollbar-track {
    background: transparent;
}
.aq-simple-detail-tab-panel::-webkit-scrollbar-thumb {
    background: var(--mud-palette-action-disabled);
    border-radius: 4px;
}
.aq-simple-detail-tab-panel::-webkit-scrollbar-thumb:hover {
    background: var(--mud-palette-action-disabled-background);
}
/* Dark mode support - automatically handled by MudBlazor theme variables */
/* No additional dark mode rules needed */
/* Drawer container - responsive width and height */
/* Override MudBlazor's CSS custom properties for clean width control */
.aq-detail-drawer {
    /* Set the CSS variable that MudBlazor uses internally for width */
    /* clamp(min, preferred, max) - starts at 800px, grows with viewport, caps at 1440px */
    --mud-drawer-width: clamp(800px, 60vw, 1440px);

    /* Floating effect with reduced height and spacing */
    top: 32px !important;
    right: 16px !important;
    height: calc(100vh - 64px) !important;
    border-radius: 8px !important;
}
/* Responsive adjustments for drawer width on smaller screens */
@media (max-width: 1400px) {
    .aq-detail-drawer {
        --mud-drawer-width: clamp(700px, 55vw, 1200px);
    }
}
@media (max-width: 1200px) {
    .aq-detail-drawer {
        --mud-drawer-width: clamp(600px, 50vw, 1000px);
    }
}
@media (max-width: 960px) {
    .aq-detail-drawer {
        --mud-drawer-width: clamp(500px, 80vw, 800px);
    }
}
/* Aquilo Mobile Chat Styles */
/* Inline event message styles */
.event-message-inline {
    display: inline;
    align-items: baseline;
}
.event-icon-inline {
    display: inline-flex !important;
    vertical-align: middle;
    width: 1.25rem !important;
    height: 1.25rem !important;
    margin: 0 0.25rem;
}
/* Ensure child content displays inline */
.event-message-inline > * {
    display: inline;
    vertical-align: middle;
}
/* For MudText components inside */
.event-message-inline .mud-typography {
    display: inline;
    line-height: 1.5;
    font-size: 0.875rem;
}
.aquilo-mobile-chat .mud-chat-header {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}
.aquilo-mobile-chat .mud-chat-header time {
    font-size: 0.875rem;
    opacity: 0.8;
    margin-left: 0.5rem;
}
/* Feature styles */
/* Warnings Component Styles */
/* Gallery Header */
.warning-gallery-header {
    padding: 1.5rem 0;
    margin-bottom: 2rem;
}
.warning-header-icon {
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-primary-darken) 100%);
    border-radius: 16px;
    padding: 8px;
    color: var(--mud-palette-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    font-size: 24px;
    margin-right: 16px;
}
/* Search Field */
.warning-search-field {
    background: white;
    border-radius: 24px;
}
.warning-search-field .mud-input-outlined .mud-input-outlined-border {
    border-radius: 24px !important;
}
.warning-search-field .mud-input-slot.mud-input-root.mud-input-root-outlined {
    border-radius: 24px !important;
}
/* Create Button */
.warning-create-btn {
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-primary-darken) 100%) !important;
    color: var(--mud-palette-white) !important;
    border-radius: 24px !important;
    text-transform: none !important;
    box-shadow: 0 4px 20px rgba(var(--mud-palette-primary-rgb), 0.3);
    transition: all 0.3s ease !important;
    white-space: nowrap;
}
.warning-create-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(var(--mud-palette-primary-rgb), 0.4);
}
/* Warning Card Base */
.warning-card {
    height: 100%;
    border-radius: 20px !important;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
}
.warning-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1) !important;
}
.warning-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.warning-card:hover::before {
    opacity: 1;
}
.warning-card.warning-severity-danger::before {
    background: linear-gradient(90deg, var(--mud-palette-error) 0%, var(--mud-palette-error-darken) 100%);
}
.warning-card.warning-severity-warning::before {
    background: linear-gradient(90deg, var(--mud-palette-warning) 0%, var(--mud-palette-warning-darken) 100%);
}
.warning-card.warning-severity-caution::before {
    background: linear-gradient(90deg, var(--mud-palette-info) 0%, var(--mud-palette-info-darken) 100%);
}
.warning-card.warning-severity-notice::before {
    background: linear-gradient(90deg, var(--mud-palette-primary) 0%, var(--mud-palette-primary-darken) 100%);
}
.warning-card-header {
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}
/* Severity Icons */
.warning-severity-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    font-size: 40px;
    margin: 0 auto 1rem;
    position: relative;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.warning-severity-danger {
    background: linear-gradient(135deg, var(--mud-palette-error) 0%, var(--mud-palette-error-darken) 100%);
    color: var(--mud-palette-white);
}
.warning-severity-warning {
    background: linear-gradient(135deg, var(--mud-palette-warning) 0%, var(--mud-palette-warning-darken) 100%);
    color: var(--mud-palette-white);
}
.warning-severity-caution {
    background: linear-gradient(135deg, var(--mud-palette-info) 0%, var(--mud-palette-info-darken) 100%);
    color: var(--mud-palette-white);
}
.warning-severity-notice {
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-primary-darken) 100%);
    color: var(--mud-palette-white);
}
.warning-severity-default {
    background: linear-gradient(135deg, var(--mud-palette-action-default) 0%, var(--mud-palette-text-disabled) 100%);
    color: var(--mud-palette-white);
}
/* Text Styles */
.warning-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.warning-description {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 1rem;
    min-height: 3.375rem;
}
.warning-card:hover .warning-description {
    -webkit-line-clamp: unset;
}
.warning-avoidance-instructions {
    color: var(--mud-palette-success);
    font-weight: 500;
}
/* Category Badge */
.warning-category-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--mud-palette-info-lighten);
    color: var(--mud-palette-info);
    margin-bottom: 0.5rem;
}
/* Footer */
.warning-footer {
    padding: 1rem 1.5rem;
    background: var(--mud-palette-background-grey);
    border-top: 1px solid var(--mud-palette-lines-default);
}
.warning-footer-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--mud-palette-text-disabled);
}
/* Card Image */
.warning-card-image {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 60px;
    height: 60px;
    opacity: 0.1;
}
/* Filter Chips */
.warning-filter-chip {
    transition: all 0.2s ease;
    border-radius: 24px !important;
    text-transform: none !important;
}
.warning-filter-chip:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.warning-filter-chip.mud-chip-selected {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Empty State */
.warning-empty-state {
    text-align: center;
    padding: 4rem 2rem;
}
.warning-empty-icon {
    font-size: 80px;
    color: var(--mud-palette-action-disabled);
    margin-bottom: 1rem;
}
/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.warning-card {
    animation: fadeInUp 0.5s ease forwards;
    opacity: 0;
}
.warning-card:nth-child(1) { animation-delay: 0.1s; }
.warning-card:nth-child(2) { animation-delay: 0.2s; }
.warning-card:nth-child(3) { animation-delay: 0.3s; }
.warning-card:nth-child(4) { animation-delay: 0.4s; }
.warning-card:nth-child(5) { animation-delay: 0.5s; }
.warning-card:nth-child(6) { animation-delay: 0.6s; }
/* For cards beyond the 6th, apply a default animation delay */
.warning-card:nth-child(n+7) { 
    animation-delay: 0.7s; 
}
/* Warning Card Severity States (for SelectionCardBase) */
.warning-card.warning-severity-danger {
    border-left: 4px solid var(--mud-palette-error);
    background: rgba(var(--mud-palette-error-rgb), 0.03);
}
.warning-card.warning-severity-warning {
    border-left: 4px solid var(--mud-palette-warning);
    background: rgba(var(--mud-palette-warning-rgb), 0.03);
}
.warning-card.warning-severity-caution {
    border-left: 4px solid var(--mud-palette-info);
    background: rgba(var(--mud-palette-info-rgb), 0.03);
}
.warning-card.warning-severity-notice {
    border-left: 4px solid var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), 0.03);
}
/* Warning Avoidance Section */
.warning-avoidance-section {
    background-color: var(--mud-palette-info-lighten);
    border: 1px solid var(--mud-palette-info);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    margin-top: 0.5rem;
}
.warning-avoidance-section .mud-icon-root {
    flex-shrink: 0;
    margin-top: 0.125rem;
}
/* Info Chip Style for Warnings */
.warning-info-chip {
    background-color: var(--mud-palette-background-grey) !important;
    color: var(--mud-palette-text-secondary) !important;
    border-color: var(--mud-palette-divider) !important;
    font-size: 0.75rem;
    height: auto;
    padding: 0.25rem 0.75rem;
}
.warning-info-chip:hover {
    background-color: var(--mud-palette-action-default-hover) !important;
}
.warning-info-chip .mud-chip-icon {
    color: var(--mud-palette-text-disabled);
    margin-right: 0.25rem;
}
/* Font weights utilities */
.font-weight-medium {
    font-weight: 500 !important;
}
.font-weight-bold {
    font-weight: 700 !important;
}
/* Category Chip Styles */
.warning-category-chip.mud-chip-outlined {
    background-color: transparent !important;
}
/* Dark mode adjustments for sections */
@media (prefers-color-scheme: dark) {
    .warning-avoidance-section {
        background-color: rgba(33, 150, 243, 0.08);
        border-color: rgba(33, 150, 243, 0.3);
    }
}
/* Materials Component Styles */
/* Uses MudBlazor CSS variables for theme consistency */
/* Material Cards - Base styles for all material cards */
.aq-material-card {
    transition: all 0.2s ease;
    border-left: 4px solid var(--mud-palette-primary);
}
.aq-material-card-selected {
    border: 2px solid var(--mud-palette-primary);
    background: var(--mud-palette-primary-lighten);
}
.aq-material-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* Material Display Card - Specific styles for selection cards */
.aq-material-display-card {
    /* Additional styles specific to display cards can go here */
}
/* Material Relationship Card - Specific styles for relationship cards */
.aq-material-relationship-card {
    /* Already has border-left from aq-material-card */
}
/* Material List - Container for material lists */
.aq-material-list {
    max-width: 100%;
}
/* Material Summary - Summary bar at top of lists */
.aq-material-summary {
    overflow: hidden;
}
.aq-material-summary .mud-stack {
    flex-wrap: wrap !important;
    overflow: hidden;
}
/* Material Empty State - When no materials are selected */
.aq-material-empty-state {
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Material Specifications Table - For displaying material properties */
.aq-material-specs {
    font-size: 0.875rem;
}
.aq-material-specs td {
    padding: 4px;
    vertical-align: middle;
}
/* Compact Mode - Mobile/blue-collar worker optimizations */
.aq-material-card-compact {
    touch-action: pan-y;
}
.aq-material-card-compact .mud-icon-button {
    min-height: 48px;
    min-width: 48px;
}
/* Responsive Design */
@media (max-width: 600px) {
    .aq-material-card .mud-card-content {
        padding: 8px !important;
    }
}
/* Dark Mode Adjustments */
.mud-theme-dark .aq-material-card-selected {
    background: rgba(var(--mud-palette-primary-rgb), 0.15);
}
.mud-theme-dark .aq-material-card:hover {
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.05);
}
/* File Upload Modal Dialog Styles */
/* These styles customize the MudDialog for file upload functionality */
/* Based on the proven pattern from Wizard.razor */
/* AquiloFileUploadPreviewModal Isolated Styles - WhatsApp Design Pattern */
/* Simplified direct flex children approach */
/* Preview area - Absolute positioning to fill entire DialogContent */
.preview-area {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
    background-color: #000; /* Dark background like WhatsApp */
}
/* Preview image styling - maintains aspect ratio */
.preview-image,
.preview-video {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
}
/* Bottom bar - Floating overlay at bottom (WhatsApp style) - Transparent */
.bottom-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    background: transparent; /* Invisible to not distract from pictures */
    z-index: 10; /* Ensure it's above preview */
}
/* Thumbnail strip container - Compact horizontal scroll with dark background */
.thumbnail-strip-container {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
    background: rgba(30, 30, 30, 0.8);
    padding: 8px;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.thumbnail-strip {
    height: 64px;
    white-space: nowrap;
    scroll-behavior: smooth;
    display: flex;
    align-items: center;
}
/* Keyframe animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* Thumbnail container - Compact 64x64px (WhatsApp style) */
.thumbnail {
    align-content: center;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
    cursor: pointer;
    overflow: hidden;
    border-radius: 8px;
    position: relative; /* Positioning context for delete overlay */
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
    border: 2px solid transparent;
}
/* Ensure MudPaper wrapper doesn't interfere with positioning */
.thumbnail.mud-paper {
    padding: 0 !important;
    margin: 0 !important;
}
/* Thumbnail image styling - ensures consistent square display */
.thumbnail-image {
    width: 100%;
    height: 100%;
    max-height: 80px;
    -o-object-fit: contain;
       object-fit: contain;
    border-radius: 8px;
}
/* Caption field - Single input (WhatsApp style) with dark background for readability */
.caption-field {
    background: rgba(30, 30, 30, 0.9);
    border-radius: 8px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
/* Dark theme text color for caption field */
.caption-field .mud-input-root {
    color: rgba(255, 255, 255, 0.9);
}
.caption-field .mud-input-label {
    color: rgba(255, 255, 255, 0.6);
}
.caption-field .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, 0.2);
}
.thumbnail--selected {
    border-color: var(--mud-palette-primary);
    border-width: 3px;
    box-shadow: 0 0 0 3px var(--mud-palette-primary), 0 4px 16px rgba(0, 0, 0, 0.6);
    transform: scale(1.08);
}
.thumbnail--delete-target {
    border-color: var(--mud-palette-error);
    box-shadow: 0 0 0 2px var(--mud-palette-error), 0 4px 12px rgba(0, 0, 0, 0.5);
    transform: scale(1.05);
}
/* Delete overlay styling - Contained within thumbnail only */
.thumbnail .delete-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px; /* Match thumbnail border-radius */
    animation: fadeIn 0.2s ease;
    z-index: 15 !important; /* Above thumbnail image */
}
.delete-overlay-icon {
    color: white;
    font-size: 24px;
}
/* Empty State - Absolute positioning to fill entire DialogContent */
.empty-state {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
}
.empty-state-content {
    padding: 32px;
    text-align: center;
}
.empty-state-icon {
    color: rgba(255, 255, 255, 0.5);
    font-size: 64px !important;
}
.empty-state-text {
    color: rgba(255, 255, 255, 0.8);
}
.empty-state-button {
    margin-top: 16px;
}
/* Note: Add Files button styles moved to global CSS file:
   /wwwroot/css/file-upload-modal.css

   This is because Blazor scoped CSS with ::deep does not work
   reliably in MAUI Blazor Hybrid apps. The button requires higher
   specificity to override MudBlazor's default icon button styles.
*/
/* Fullscreen Dialog - Fixed height structure like wizard */
.file-upload-modal-dialog.mud-dialog-fullscreen {
    height: 100vh !important;
    max-height: 100vh !important;
}
.file-upload-modal-dialog .mud-dialog-content {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 73px); /* Account for action buttons */
    position: relative; /* Positioning context for absolute children */
}
/* Dialog Actions */
.file-upload-modal-container .mud-dialog-actions {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    padding: 1rem 1.5rem !important;
}
/* Responsive Design */
@media (max-width: 768px) {
    .file-upload-modal-container .mud-dialog-container {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0;
    }

    .file-upload-modal-container .mud-dialog-content {
        height: calc(100vh - 200px) !important;
        min-height: 0 !important;
        min-height: initial !important;
        padding: 1rem !important;
    }

    .file-upload-modal-container .mud-dialog-actions {
        padding: 0.75rem !important;
    }
}
/* Custom scrollbar for file list */
.file-upload-modal-container .mud-dialog-content::-webkit-scrollbar {
    width: 8px;
}
.file-upload-modal-container .mud-dialog-content::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}
.file-upload-modal-container .mud-dialog-content::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
    -webkit-transition: background 0.2s ease;
    transition: background 0.2s ease;
}
.file-upload-modal-container .mud-dialog-content::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}
/* Add Files Button - Compact circular gradient button (WhatsApp style) */
/* Higher specificity to override MudBlazor default icon button styles */
.mud-icon-button.add-files-button,
.mud-button-root.add-files-button {
    flex-shrink: 0 !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 50% !important;
    /* Fallback for older browsers */
    background: var(--mud-palette-primary) !important;
    /* Modern gradient with WebView-compatible syntax */
    background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0.05)),
    var(--mud-palette-primary) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
    padding: 0 !important;
}
.mud-icon-button.add-files-button:hover,
.mud-button-root.add-files-button:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
    box-shadow: 0 6px 12px var(--shadow-elevated);
    transform: translateY(-2px);
}
.mud-icon-button.add-files-button:active,
.mud-button-root.add-files-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 4px var(--shadow-default);
}
/* Icon size within the button - Scaled down to match compact size */
.mud-icon-button.add-files-button .mud-icon-root,
.mud-button-root.add-files-button .mud-icon-root {
    font-size: 24px !important;
    width: 24px !important;
    height: 24px !important;
}
/* Documentable Features - File Preview & Upload Components */
/* Styles for FilePreviewSkeleton, FilePreviewDisplay, and related components */
/* ========================================
   File Preview Skeleton Styles
   ======================================== */
/* Container base styles */
.skeleton-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
/* Full Preview Skeletons - Fill container */
.skeleton-full {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.skeleton-image-full {
    width: 80%;
    height: 80%;
    max-width: 600px;
    max-height: 400px;
    border-radius: 8px;
}
/* Video skeleton container with play icon overlay */
.skeleton-video-container {
    position: relative;
    width: 80%;
    height: 80%;
    max-width: 600px;
    max-height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.skeleton-video-full {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}
.skeleton-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
/* Document skeleton - centered column layout */
.skeleton-document-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}
.skeleton-document-icon {
    margin-bottom: 8px;
}
.skeleton-document-text {
    border-radius: 4px;
}
/* Thumbnail Skeletons - Compact 64x64px (WhatsApp style) */
.skeleton-thumbnail {
    width: 64px;
    height: 64px;
    padding: 0;
}
.skeleton-image-thumb {
    width: 64px;
    height: 64px;
    border-radius: 8px;
}
/* Video thumbnail with play icon */
.skeleton-video-thumb-container {
    position: relative;
    width: 64px;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.skeleton-video-thumb {
    width: 64px;
    height: 64px;
    border-radius: 8px;
}
.skeleton-play-icon-thumb {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
/* Document thumbnail - centered icon */
.skeleton-document-thumb-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 64px;
    background-color: var(--mud-palette-background-grey);
}
.skeleton-document-thumb {
    flex-shrink: 0;
}
/* ========================================
   File Preview Display Styles
   ======================================== */
/* Full preview container */
.file-preview-full {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.full-preview-loading {
    width: 100%;
    height: 100%;
}
/* Thumbnail preview container */
.file-preview-thumbnail {
    width: 100%;
    height: 100%;
    position: relative;
}
.thumbnail-shimmer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: var(--mud-palette-background-grey);
}
/* Preview images */
.preview-image,
.preview-video {
    -o-object-fit: contain;
       object-fit: contain;
    animation: fadeIn 0.3s ease-in;
}
.thumbnail-image {
    animation: fadeIn 0.2s ease-in;
}
/* Fade in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.fade-in {
    animation: fadeIn 0.3s ease-in;
}
/* Main application styles - Should come last */
html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%;
    margin: 0;
    padding: 0;
    /* Removed overflow: hidden to allow proper scrolling in nested containers */
}
a, .btn-link {
    color: #006bb7;
}
.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
.content {
    padding-top: 1.1rem;
}
h1:focus {
    outline: none;
}
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}
.invalid {
    outline: 1px solid #e50000;
}
.validation-message {
    color: #e50000;
}
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
.blazor-error-boundary::after {
    content: "An error has occurred."
}
.darker-border-checkbox.form-check-input {
    border-color: #929292;
}
/*----------------------------------*/
/* Shared                           */
/*----------------------------------*/
/* Disable the slider. It doesn't position itself correctly. */
.mud-tab-slider.mud-tab-slider-horizontal {
    height: 0 !important;
}
/*noinspection CssUnresolvedCustomProperty*/
.mud-tab.mud-tab-active {
    background-color: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary);
    border-radius: 0;
    border-style: solid;
    border-width: 0 0 2px 0;
}
.auto-size-dialog .mud-dialog-container {
    width: auto !important; /* let content dictate width */
    max-width: 70vw; /* prevent overflowing the viewport */
    height: auto !important;
    max-height: 80vh; /* keep dialog from being too tall */
}
.truncated-description {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* For a single-line preview; for multiline, see below */
    /* For multiline truncation, you could use:
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    */
}
.link-style {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}
.aqs-data-grid {
}
.aqs-data-grid .mud-table-toolbar {
    height: auto !important;
}
.aqs-data-grid .mud-table-container {
    max-height: 70vh !important;
}
.aqs-right-dialog {

}
.aqs-form-field {
    margin-bottom: 16px;
}
.aqs-form-label {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}
.aqs-right-dialog .mud-dialog-content {
    height: 100vh;
    min-width: 968px;
    width: 40vw;
    max-width: 1368px;
}
.aqs-right-wide-dialog {
}
.aqs-right-wide-dialog .mud-dialog-content {
    height: 100vh;
    min-width: 1168px;
    width: 60vw;
    max-width: 1768px;
}
.aqs-right-extra-wide-dialog .mud-dialog-content {
    height: 100vh;
    min-width: 1368px;
    width: 60vw;
    max-width: 1768px;
}
.aqs-right-dialog .mud-select {
    max-height: -moz-fit-content;
    max-height: fit-content;
}
/*----------------------------------*/
/* General Page                     */
/*----------------------------------*/
.phone-spacing {
    padding-top: 59px;
    padding-bottom: 34px;
    overflow: hidden;
    display: flex !important;
    flex-direction: column;
    height: 100%;
    align-items: center;
}
.aqs-nav-button {
    background-color: transparent;
    transition: background-color 0.3s, color 0.3s;
}
.aqs-nav-button-active {
    font-weight: 600;
    border-radius: 4px;
}
.thick-divider {
    height: 4px !important;
    max-height: 4px !important;
}
/*----------------------------------*/
/* Wizard Styles                    */
/*----------------------------------*/
.wizard-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    margin-bottom: 12px;
}
/* Fixed Header Section */
.wizard-header {
    flex-shrink: 0;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-divider);
}
/* Scrollable Content Area */
.wizard-content-area {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* Fixed Footer Section */
.wizard-footer {
    flex-shrink: 0;
    background-color: var(--mud-palette-surface);
    box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: flex-end;
    padding: 24px;
    gap: 0.5rem;
    border-top: 2px solid var(--mud-palette-lines-default);
}
/* Tab Styles */
.wizard-tabs {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.wizard-tabs .mud-tabs-header {
    flex-shrink: 0;
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-divider);
    padding: 0 16px;
}
.wizard-tabs .mud-tab {
    min-height: 48px;
    font-weight: 500;
}
.wizard-tabs .mud-tab.mud-tab-active {
    background-color: transparent;
    color: var(--mud-palette-primary);
    border-bottom: 3px solid var(--mud-palette-primary);
    border-radius: 0;
}
.wizard-tabs .mud-tabs-panels {
    flex: 1;
    overflow: hidden;
    height: 100%;
}
.wizard-panel {
    height: 100%;
    overflow: hidden;
}
/* Ensure MudTabPanel takes full height */
.wizard-panel .mud-tab-panel {
    height: 100%;
}
/* Step Wrapper and Content Styles */
.wizard-step-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.wizard-step-header {
    flex-shrink: 0;
    padding: 24px 24px 8px 24px;
    background-color: var(--mud-palette-background);
    margin: 0 !important;
}
.wizard-step-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 24px 24px 24px;
    margin-top: 12px;
}
/* Form Styles */
.wizard-container .wizard-form .mud-grid {
    row-gap: 16px;
}
.wizard-container .wizard-form .mud-input,
.wizard-container .wizard-form .mud-select {
    margin-bottom: 0;
}
/* Enhanced Modal Dialog Styles */
.mud-dialog .wizard-container {
    border-radius: 12px;
    overflow: hidden;
}
/* Dialog Animation */
.mud-dialog {
    animation: dialogSlideIn 0.3s ease-out;
}
@keyframes dialogSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
/*----------------------------------*/
/* Home Ganntt                      */
/*----------------------------------*/
.home-gantt-line {
    position: relative;
    display: flex;
    height: 100%;
    align-items: center;
    min-height: 100px;
}
.home-gantt-element {
    position: absolute;
    border: 2px solid #ccc;
    top: 50%; /* start vertical centering */
    transform: translateY(-50%); /* complete vertical centering */
    border-radius: 4px;
    padding: 20px;
    cursor: pointer;
    text-align: center;
    min-height: 100px;
    min-width: 200px;
    flex-grow: 1;
}
.home-gantt-element:hover {
    border-color: #aaa;
}
.home-gantt-line-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* so it doesn't block clicks */
}
/*----------------------------------*/
/* Main Layout                      */
/*----------------------------------*/
.main-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background-color: var(--mud-palette-surface);
}
.vertical-drawer {
    width: 2.5rem !important;
    overflow: hidden !important;
    height: calc(100vh - 80px);
}
.vertical-drawer-content {
    height: calc(100vh - 80px);
    width: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 64px;
}
.vertical-text {
    transform: rotate(270deg) translateX(50%);
    white-space: nowrap;
    text-align: center;
}
.fixed-breadcrumbs {
    position: sticky;
    top: 0;
    z-index: 999;
    padding: 4px 0 4px 4px !important;
}
.main-content {
    overflow: hidden;
    padding-bottom: 64px;
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding-top: 0 !important;
}
.hidden-scrollbar {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.hidden-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
}
.bottom-app-bar {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.scroll-to-top-aquilo {
    bottom: 69px !important;
}
/*----------------------------------*/
/* Account Page                     */
/*----------------------------------*/
.impressum-container {
    overflow-y: auto;
    flex: 1;
}
/*----------------------------------*/
/* Barcode Page                     */
/*----------------------------------*/
.print-page-section {
    width: 400px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 40px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    page-break-inside: avoid;
    page-break-after: always;
    -moz-column-break-after: page;
         break-after: page;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}
.print-page-section .title {
    color: var(--mud-palette-primary);
    font-weight: 600;
    text-align: center;
    margin-bottom: 8px;
}
.print-page-section .subtitle {
    color: var(--mud-palette-secondary);
    text-align: center;
    margin-bottom: 16px;
}
.print-page-section .divider {
    margin-bottom: 16px;
}
.print-page-section .info {
    text-align: center;
    margin-bottom: 20px;
}
.print-page-section .dates {
    color: var(--mud-palette-text-secondary);
}
@media print {
    .print-page-section .card-section {
        border: none;
        box-shadow: none;
        page-break-after: always;
    }

    .scrollable {
        max-height: none !important;
        overflow: visible !important; /* no scroll in print */
    }

    .scrollable::-webkit-scrollbar {
        display: none; /* hides scrollbar in Chrome/Edge */
    }

    .scrollable {
        -ms-overflow-style: none; /* hides scrollbar in IE/Edge */
        scrollbar-width: none; /* hides scrollbar in Firefox */
    }
}
/*----------------------------------*/
/* Entry Page                       */
/*----------------------------------*/
.entry-page-header {
    margin-bottom: 0; /* No extra margin needed since we use gap */
}
.entry-page-image {
    width: 50vw;
    height: 50vw;
    max-width: 300px;
    max-height: 300px;
}
.entry-page-text {
    text-align: center;
    max-width: 80%;
}
.entry-page-button {
    width: 100%;
    max-width: 300px;
}
/*----------------------------------*/
/* Grid Menu                        */
/*----------------------------------*/
.grid-menu-item {
    min-height: 144px; 
    height: 15vw; 
    width: 15vw;
    min-width: 144px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.grid-menu-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
.grid-menu-icon {
    margin-bottom: 8px;
    width: 64px !important;
    height: 64px !important;
}
.grid-menu-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 24px;
    width: 100%;
    height: 100%;
}
/*--------------- PDF JS -------------------*/
.pdfjs-viewer-container {
    height: 100%;
    width: 100%;
    position: absolute;
    inset: 0;
    overflow: auto;
    background-color: #f5f5f5;
}
.pdf-container {
    position: relative;
    overflow: hidden;
}
.pdfjs-viewer {
    position: absolute;
    width: 100%;
    height: 100%;
}
/* Additional component overrides */
.drawer-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}
.drawer-buttons {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    padding: 0;
    margin: 0;
}