/* Адаптивные стили для мобильных устройств */
@media (max-width: 768px) {
    .auth-container {
        padding: 2vh;
        min-height: 90vh;
    }
    
    .auth-card {
        padding: 4vh;
        margin: 2vh;
        max-width: none;
        border-radius: 1.5vh;
    }
    
    .auth-logo {
        font-size: 3.6vh;
    }
    
    .auth-title {
        font-size: 2.8vh;
    }
    
    .auth-subtitle {
        font-size: 1.6vh;
    }
    
    .auth-form .form-control {
        height: 4.5vh;
        font-size: 1.6vh;
    }
    
    .auth-btn {
        height: 4.5vh;
        font-size: 1.6vh;
    }
    
    .auth-decoration {
        display: none;
    }
    
    .agree-terms {
        flex-direction: column;
        gap: 1vh;
        align-items: flex-start;
    }
    
    .agree-terms label {
        font-size: 1.6vh;
    }

    .readings-index,
    .readings-create {
        padding: 2vh;
    }
    
    .readings-header {
        flex-direction: column;
        gap: 2vh;
        align-items: flex-start;
    }
    
    .readings-actions {
        width: 100%;
        justify-content: flex-start;
    }
    
    .readings-table {
        font-size: 1.4vh;
    }
    
    .readings-table th,
    .readings-table td {
        padding: 1vh;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
        gap: 2vh;
    }
    
    .form-section {
        margin-bottom: 3vh;
        padding-bottom: 2vh;
    }
    
    .section-title {
        font-size: 2vh;
    }
    
    .calculation-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 1vh;
    }
    
    .tariff-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 1vh;
    }
    
    .btn-large {
        height: 5vh;
        font-size: 1.8vh;
    }

    .hero-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .contacts-grid {
        grid-template-columns: 1fr;
    }
    
    .features-grid,
    .instructions-steps,
    .sections-grid {
        grid-template-columns: 1fr;
    }
    
    .deadline-reminder {
        flex-direction: column;
        text-align: center;
    }
    
    .logo-title {
        font-size: 4vh;
    }
    
    .logo-subtitle {
        font-size: 2vh;
    }

        .services-grid {
        grid-template-columns: 1fr;
    }
    
    .readings-comparison {
        grid-template-columns: 1fr;
        gap: 1.5vh;
    }
    
    .input-with-arrow {
        flex-direction: column;
        gap: 1vh;
    }
    
    .arrow {
        transform: rotate(90deg);
    }
    
    .summary-grid {
        grid-template-columns: 1fr;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .readings-table-container {
        overflow-x: auto;
    }
    
    .readings-table {
        min-width: 100vh;
    }

        .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .actions-grid {
        grid-template-columns: 1fr;
    }
    
    .table-header-section {
        flex-direction: column;
        gap: 2vh;
        align-items: flex-start;
    }
    
    .readings-table-container {
        overflow-x: auto;
    }
    
    .admin-table {
        min-width: 120vh;
    }
}

@media (max-width: 480px) {
    .readings-index,
    .readings-create {
        padding: 1vh;
    }
    
    .readings-title {
        font-size: 2.8vh;
    }
    
    .readings-table {
        display: block;
        overflow-x: auto;
    }
    
    .form-control {
        height: 4.5vh;
        font-size: 1.6vh;
    }
    
    .previous-readings {
        padding: 2vh;
    }
    
    .calculation-section {
        padding: 2vh;
    }
    
    .summary-card {
        padding: 2vh;
    }
}

@media (max-width: 480px) {
    .auth-container {
        padding: 1vh;
    }
    
    .auth-card {
        padding: 3vh;
        margin: 1vh;
        border-radius: 1vh;
    }
    
    .auth-logo {
        font-size: 3vh;
    }
    
    .auth-title {
        font-size: 2.4vh;
    }
    
    .auth-form .form-group {
        margin-bottom: 2vh;
    }
    
    .auth-form .form-control {
        height: 4vh;
        font-size: 1.4vh;
    }
    
    .auth-btn {
        height: 4vh;
        font-size: 1.4vh;
    }
    
    .help-block {
        font-size: 1.4vh;
    }
    
    .alert {
        padding: 1.5vh;
        font-size: 1.4vh;
    }
}

/* Адаптация для планшетов */
@media (min-width: 769px) and (max-width: 1024px) {
    .auth-card {
        max-width: 70vh;
        padding: 5vh;
    }
    
    .auth-logo {
        font-size: 4.2vh;
    }
    
    .auth-title {
        font-size: 3.2vh;
    }

        .profile-header {
        flex-direction: column;
        gap: 2vh;
        align-items: flex-start;
    }
    
    .profile-actions {
        width: 100%;
        justify-content: flex-start;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .btn {
        width: 100%;
        justify-content: center;
    }

    .readings-index,
    .readings-create {
        max-width: 100vh;
        padding: 3vh;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
}

/* Адаптация для больших экранов */
@media (min-width: 1200px) {
    .auth-card {
        max-width: 65vh;
    }
}

/* Адаптация для ландшафтной ориентации на мобильных */
@media (max-height: 500px) and (orientation: landscape) {
    .auth-container {
        min-height: 120vh;
        padding: 1vh;
    }
    
    .auth-card {
        padding: 2vh;
        margin: 1vh 0;
    }
    
    .auth-form .form-group {
        margin-bottom: 1.5vh;
    }
    
    .auth-form .form-control {
        height: 3.5vh;
        font-size: 1.4vh;
    }
    
    .auth-btn {
        height: 3.5vh;
        font-size: 1.4vh;
        margin-bottom: 1vh;
    }

     .readings-index,
    .readings-create {
        padding: 1vh;
    }
    
    .readings-header {
        margin-bottom: 2vh;
        padding-bottom: 1vh;
    }
    
    .form-section {
        margin-bottom: 2vh;
        padding-bottom: 1vh;
    }
}

/* Поддержка темной темы */
@media (prefers-color-scheme: dark) {
    .auth-card {
        background: #2c2c2c;
        color: #ffffff;
    }
    
    .auth-title {
        color: #ffffff;
    }
    
    .auth-subtitle {
        color: #cccccc;
    }
    
    .auth-form label {
        color: #ffffff;
    }
    
    .auth-form .form-control {
        background: #3c3c3c;
        border-color: #555;
        color: #ffffff;
    }
    
    .auth-form .form-control:focus {
        background: #4c4c4c;
    }
    
    .agree-terms label {
        color: #ffffff;
    }

    .readings-table {
        background: #2c2c2c;
        color: #ffffff;
    }
    
    .readings-cell {
        color: #ffffff;
    }
    
    .readings-form {
        background: #2c2c2c;
        color: #ffffff;
    }
    
    .section-title {
        color: #ffffff;
    }
    
    .previous-readings {
        background: #3c3c3c;
        border-color: #555;
    }
    
    .calculation-section {
        background: #3c3c3c;
        border-color: #555;
    }
    
    .summary-card {
        background: #2c2c2c;
        color: #ffffff;
    }
    
    .tariff-item {
        background: #3c3c3c;
    }
}

/* Улучшения для доступности */
@media (prefers-reduced-motion: reduce) {
    .auth-card,
    .form-control,
    .auth-btn {
        animation: none;
        transition: none;
    }

    .readings-table,
    .readings-form,
    .calculation-section {
        transition: none;
    }
}

/* Высокий контраст */
@media (prefers-contrast: high) {
    .auth-card {
        border: 0.2vh solid #000;
    }
    
    .auth-form .form-control {
        border-width: 0.3vh;
    }
    
    .btn-primary {
        border: 0.2vh solid #000;
    }

    .readings-table {
        border: 0.2vh solid #000;
    }
    
    .readings-header {
        border: 0.2vh solid #000;
    }
    
    .calculation-item.total {
        border: 0.2vh solid #000;
    }
}