/* ==============================================
   RESPONSIVE CSS - LỮ ĐOÀN 6
   Thiết kế ưu tiên di động (Mobile-first)
   ============================================== */

/* ----- MOBILE (Mặc định) ----- */
.auth-card {
    margin: 1rem;
    padding: 1.5rem;
}

.auth-logo-icon {
    width: 70px;
    height: 70px;
}

.auth-logo-icon i {
    font-size: 2rem;
}

.auth-title {
    font-size: 1.5rem;
}

/* ----- TABLET (min-width: 640px) ----- */
@media (min-width: 640px) {
    .auth-card {
        padding: 2rem;
        max-width: 420px;
    }

    .auth-logo-icon {
        width: 80px;
        height: 80px;
    }

    .auth-logo-icon i {
        font-size: 2.5rem;
    }

    .auth-title {
        font-size: 1.75rem;
    }
}

/* ----- DESKTOP (min-width: 1024px) ----- */
@media (min-width: 1024px) {
    .auth-card {
        padding: 2.5rem;
        max-width: 450px;
    }

    .form-input {
        padding: 1.125rem 1rem 1.125rem 3.25rem;
    }
}

/* ----- HIỆU ỨNG HOVER CHỈ TRÊN DESKTOP ----- */
@media (hover: hover) and (pointer: fine) {

    .btn-primary:hover,
    .btn-secondary:hover {
        transform: translateY(-2px);
    }
}

/* ----- FIX CHO MÀN HÌNH NHỎ ----- */
@media (max-height: 700px) {
    .auth-container {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .auth-logo-icon {
        width: 60px;
        height: 60px;
    }

    .auth-logo-icon i {
        font-size: 1.75rem;
    }

    .auth-title {
        font-size: 1.25rem;
    }

    .form-group {
        margin-bottom: 1rem;
    }
}

/* ----- DARK MODE (Tuỳ chọn) ----- */
@media (prefers-color-scheme: dark) {
    /* Có thể mở rộng sau */
}

/* ----- HIỆU ỨNG GIẢM CHUYỂN ĐỘNG ----- */
@media (prefers-reduced-motion: reduce) {
    .auth-card {
        animation: none;
    }

    .btn-primary,
    .btn-secondary,
    .form-input {
        transition: none;
    }
}

/* ----- PRINT STYLES ----- */
@media print {

    .military-bg,
    .bg-gray-body {
        display: none;
    }

    .auth-card {
        box-shadow: none;
        border: 1px solid #e5e7eb;
    }
}