/* Custom styles for Pyxis Aviate */

:root {
    --primary-color: #1976D2;
    --secondary-color: #424242;
    --tertiary-color: #00796B;
}

body {
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: #F5F7FA;
}

.mud-drawer {
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
}

.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+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk0IDI3My41NzYgNTkuNTEzMUMyNzQuMzYxIDYwLjI1MzcgMjc0Ljg3OCA2MS4yOTMxIDI3NC45OCA2Mi4zOTQ5TDI3NSA2Mi41ODcgMjc1IDg3LjQxMyAyNzQuOTggODcuNjA1MSAyNzQuODc4IDg3LjcwNyAyNzQuNjA2IDg3Ljg3MzJDMjc0LjM2NyA4OC4wMzI3IDI3NC4wMSA4OC4xMTQ5IDI3My42NDkgODguMTMwOEwyNzMuNSA4OC4xMzE4TDI0Ni41MDYgODguMTMxOEMyNDUuMjk1IDg4LjEzMTggMjQ0LjE5OSA4Ny42NDgxIDI0My40MDYgODYuODY1OEwyNDIuOTYgODYuMzM3TDIzNi40MzYgNzkuNjE4QzIzNS42NTEgNzguODc3NCAyMzUuMTM0IDc3LjgzOCAyMzUuMDMyIDc2LjczNkwyMzUgNzYuNTQzIDIzNSA1MS40MTMgMjM1LjAyIDUxLjIyMSAyMzUuMTIyIDUxLjExOSAyMzUuMzk0IDUwLjk1MjhDMjM1LjYzMyA1MC43OTMzIDIzNS45OSA1MC43MTExIDIzNi4zNTEgNTAuNjk1MkwyMzYuNSA1MC42OTQyTDI2My41MDYgNTFaIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0iI0Q4MjYyNiIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* Card hover effect */
.mud-card:hover {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

/* Spacing utilities */
.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 1rem;
}

/* Airport Results Grid - Responsive layout for search results */
.airport-results-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 1200px) {
    .airport-results-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1600px) {
    .airport-results-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Airport Card Styles */
.airport-card {
    border-radius: 12px !important;
    overflow: hidden;
    width: 100%;
}

.airport-card-header {
    background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);
    border: none !important;
}

.airport-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* Tablet and up - auto-fit with min 150px */
@media (min-width: 600px) {
    .airport-info-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}

.info-item {
    background: linear-gradient(135deg, #F8F9FA 0%, #E9ECEF 100%);
    border-radius: 8px;
    border-left: 4px solid #1976D2;
    transition: transform 0.2s ease;
    min-width: 0;
}

.info-item:hover {
    transform: translateX(4px);
    border-left-color: #1565C0;
}

/* Runway Card Styles */
.runway-card {
    border-radius: 10px !important;
    border-left: 5px solid #FF9800;
    background: linear-gradient(135deg, #FFFFFF 0%, #FFF8E1 100%);
}

.runway-header {
    border-bottom: 2px solid rgba(255, 152, 0, 0.2);
}

.runway-detail-box {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

.runway-detail-box:hover {
    background: rgba(25, 118, 210, 0.05);
    border-color: rgba(25, 118, 210, 0.3);
}

.ils-box {
    background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%) !important;
    border: 1px solid rgba(76, 175, 80, 0.3) !important;
}

/* Gate Card Styles */
.gate-card {
    border-radius: 10px !important;
    border-left: 5px solid #00796B;
    background: linear-gradient(135deg, #FFFFFF 0%, #E0F2F1 100%);
}

.gate-header {
    border-bottom: 2px solid rgba(0, 121, 107, 0.2);
}

.gate-location-box {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Expansion Panels Custom */
.expansion-panels-custom .mud-expand-panel {
    background: rgba(25, 118, 210, 0.02);
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.expansion-panels-custom .mud-expand-panel-header {
    background: rgba(25, 118, 210, 0.05);
    border-radius: 8px 8px 0 0;
}

.expansion-panels-custom .mud-expand-panel-header:hover {
    background: rgba(25, 118, 210, 0.08);
}

/* Text utilities */
.fw-bold {
    font-weight: 600 !important;
}

.fw-medium {
    font-weight: 500 !important;
}

/* Runways Grid - Responsive layout */
.runways-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

/* Gates Grid - Responsive layout */
.gates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

/* Responsive utility - flex wrap */
.flex-wrap {
    flex-wrap: wrap;
}

/* Height utility */
.h-100 {
    height: 100%;
}