/* === Centralized Responsive Design Rules === */

/* --- Base Responsive Variables --- */
:root {
    /* Breakpoints (for reference, not used directly in media queries) */
    --breakpoint-xs: 576px;  /* Extra small devices */
    --breakpoint-sm: 768px;  /* Small devices */
    --breakpoint-md: 992px;  /* Medium devices */
    --breakpoint-lg: 1200px; /* Large devices */
}

/* --- Large Screens (Default) --- */
/* Base styles are already defined in their respective CSS files */

/* --- Medium Screens (Tablets, smaller desktops) --- */
@media (max-width: 992px) {
    /* Layout adjustments */
    .login-area {
        flex-direction: column; /* Stack login card and animation scene */
        gap: var(--space-xl);
        padding: var(--space-lg) 0;
    }

    /* Animation scene adjustments */
    .atc-scene {
        width: 400px; /* Slightly smaller scene */
        height: 500px;
        margin-top: var(--space-lg);
    }

    /* Side menu adjustments */
    .fixed-side-menu {
        right: 10px; /* Closer to edge */
        gap: 10px;
    }

    .side-menu-item {
        width: 160px;
        padding: var(--space-sm);
    }

    .side-menu-item i {
        font-size: 1.3rem;
        margin-right: var(--space-sm);
    }

    /* Realistic ATC image adjustments */
    .atc-realistic-image-container {
        width: 220px;
        bottom: 20px;
        left: 20px;
    }

    /* Radar screen adjustments */
    .radar-screen-container {
        width: 250px;
        height: 250px;
    }

    /* Logo adjustments */
    .atcs-logo-fixed {
        width: 100px;
        height: 100px;
    }
}

/* --- Small Screens (Tablets, large phones) --- */
@media (max-width: 768px) {
    /* Login card adjustments */
    .login-card {
        max-width: 90%; /* Allow more width */
    }

    .login-header {
        padding: var(--space-lg) var(--space-md);
    }

    .login-body {
        padding: var(--space-lg) var(--space-md);
    }

    /* Animation scene adjustments */
    .atc-scene {
        width: 300px; /* Smaller scene */
        height: 400px;
        margin-top: var(--space-md);
    }

    .control-tower {
        width: 150px;
        height: 300px;
        right: 50px;
    }

    .airplane {
        width: 100px;
        height: 50px;
    }

    /* Side menu adjustments - icon only */
    .fixed-side-menu {
        right: 5px;
        gap: 8px;
    }

    .side-menu-item {
        width: 50px; /* Icon only */
        padding: var(--space-sm);
        justify-content: center;
    }

    .side-menu-item i {
        margin-right: 0;
        font-size: 1.5rem;
    }

    .side-menu-item span {
        display: none; /* Hide text */
    }

    /* Title and header adjustments */
    .project-title {
        font-size: 2rem; /* Smaller title */
    }

    .motivational-header {
        font-size: 0.9rem;
    }

    /* Realistic ATC image adjustments */
    .atc-realistic-image-container {
        width: 180px;
        bottom: 15px;
        left: 15px;
    }

    /* Radar screen adjustments */
    .radar-screen-container {
        width: 200px;
        height: 200px;
    }

    /* Logo adjustments */
    .atcs-logo-fixed {
        width: 80px;
        height: 80px;
        top: 15px;
        right: 15px;
    }

    /* Info panel adjustments */
    .info-panel {
        width: 95%;
        max-width: 500px;
    }
}

/* --- Extra Small Screens (Phones) --- */
@media (max-width: 576px) {
    /* Body adjustments */
    body.login-page-layout {
        padding: var(--space-md); /* Less padding */
    }

    /* Login card adjustments */
    .login-card {
        max-width: 100%; /* Full width */
        border-radius: var(--border-radius-md); /* Slightly smaller radius */
    }

    .login-header {
        padding: var(--space-md) var(--space-sm);
    }

    .login-header h2 {
        font-size: 1.5rem;
    }

    .logo-container {
        width: 80px;
        height: 80px;
    }

    .login-body {
        padding: var(--space-lg) var(--space-sm);
    }

    /* Form adjustments */
    .form-control {
        padding: var(--space-sm); /* Smaller padding */
    }

    .btn-submit {
        font-size: 1rem;
        padding: var(--space-sm) var(--space-md);
    }

    /* Hide animation scene on very small screens */
    .atc-scene {
        display: none;
    }

    /* Hide realistic ATC image on very small screens */
    .atc-realistic-image-container {
        display: none;
    }

    /* Title and header adjustments */
    .project-title-container {
        top: 60px; /* Adjust position */
    }

    .project-title {
        font-size: 1.5rem; /* Smaller title */
    }

    .motivational-header {
        padding: var(--space-xs) 0;
        font-size: 0.8rem;
    }

    /* Radar screen adjustments */
    .radar-screen-container {
        width: 150px;
        height: 150px;
        top: 120px;
    }

    /* Logo adjustments */
    .atcs-logo-fixed {
        width: 60px;
        height: 60px;
        top: 10px;
        right: 10px;
    }

    /* Info panel adjustments */
    .info-panel {
        width: 95%;
        max-height: 90vh;
    }

    .panel-header h3 {
        font-size: 1.2rem;
    }

    .panel-content {
        padding: var(--space-md);
        max-height: calc(90vh - 80px);
    }

    /* Side menu adjustments - move to bottom */
    .fixed-side-menu {
        top: auto;
        bottom: 10px;
        right: 50%;
        transform: translateX(50%);
        flex-direction: row;
        width: 100%;
        justify-content: center;
        gap: 10px;
    }

    .side-menu-item {
        width: auto;
        padding: var(--space-xs) var(--space-sm);
    }

    .side-menu-item:hover {
        transform: translateY(-5px);
    }
}

/* --- Print Styles --- */
@media print {
    body {
        background: white !important;
        color: black !important;
    }

    .login-card {
        box-shadow: none !important;
        border: 1px solid #ddd;
    }

    /* Hide decorative elements */
    .atc-scene,
    .radar-screen-container,
    .atcs-logo-fixed,
    .fixed-side-menu,
    .motivational-header,
    .atc-realistic-image-container {
        display: none !important;
    }
}

/* --- High Contrast Mode --- */
@media (forced-colors: active) {
    /* Ensure buttons and interactive elements have clear focus indicators */
    .btn:focus,
    .side-menu-item:focus,
    .form-control:focus {
        outline: 3px solid CanvasText;
    }

    /* Ensure text remains readable */
    .login-header,
    .panel-header {
        background-color: Canvas;
        color: CanvasText;
    }
}