/* ============================================
   SETTINGS - RESPONSIVE BREAKPOINTS
   ============================================ */

/* Tablet (768px and below) */
@media (max-width: 768px) {
    .setting-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .setting-control {
        width: 100%;
        margin-left: 0;
    }

    .setting-control select {
        width: 100%;
        min-width: unset;
    }

    .working-hours-control {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .working-hours-inputs {
        width: 100%;
    }

    .models-grid {
        grid-template-columns: 1fr;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .transcription-options-grid {
        grid-template-columns: 1fr;
    }

    .model-settings-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .setting-inline {
        width: 100%;
    }

    .setting-inline select {
        width: 100%;
        min-width: unset;
    }

    .billing-plan-card {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }

    .billing-plan-actions {
        width: 100%;
    }

    .billing-plan-actions button {
        width: 100%;
    }

    .support-info-grid {
        grid-template-columns: 1fr;
    }

    .whisper-model-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .whisper-model-select {
        width: 100%;
    }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
    .settings-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: var(--space-2);
    }

    .settings-tabs::-webkit-scrollbar {
        display: none;
    }

    .settings-tab-btn {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .settings-section {
        padding: var(--space-4);
    }

    .settings-view h2 {
        font-size: var(--font-size-xl);
    }

    .plans-grid {
        gap: var(--space-3);
    }

    .plan-card {
        padding: var(--space-4);
    }

    .invite-form {
        flex-direction: column;
        gap: var(--space-3);
    }

    .invite-form input,
    .invite-form button {
        width: 100%;
    }

    .email-address-display {
        flex-direction: column;
        gap: var(--space-2);
    }

    .email-address-input {
        width: 100%;
    }

    .danger-item {
        flex-direction: column;
        gap: var(--space-3);
    }

    .danger-item button {
        width: 100%;
    }
}

/* Hidden download progress (for JS compatibility) */
.model-download-progress {
    display: none !important;
}