/**
 * Mobile & Responsive Styles
 *
 * Organized by module to match the CSS split structure
 * Modules: utils, app, auth, biostat, ai-chat
 */

/* ===== Tablet (max-width: 900px) ===== */
@media (max-width: 900px) {
    /* --- ai-chat.css --- */
    .ai-sidebar {
        width: 100%;
        max-width: 100%;
    }

    body.ai-sidebar-open .app-container {
        margin-right: 0;
    }

    /* --- biostat.css --- */
    .control-panel {
        max-height: none;
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
        padding: 1rem;
    }

    .chart-type-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .chart-type-btn span {
        display: none;
    }

    .chart-container {
        min-height: 350px;
    }

    /* --- biostat.css (data viewer) --- */
    .modal-large {
        width: 95%;
        height: 85vh;
    }

    .data-viewer-sidebar {
        width: 180px;
    }

    .table-list-item {
        padding: 0.625rem 0.75rem;
        font-size: 0.75rem;
    }
}

/* ===== Mobile (max-width: 600px) ===== */
@media (max-width: 600px) {
    /* --- utils.css --- */
    :root {
        --header-height: 56px;
    }

    .btn-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 0.875rem 1rem;
        font-size: 16px; /* Prevents iOS zoom on focus */
        min-height: 48px;
    }

    .form-group label {
        font-size: 0.85rem;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .checkbox-label input[type="checkbox"] {
        width: 22px;
        height: 22px;
        min-width: 22px;
    }

    .checkbox-label {
        min-height: 44px;
        padding: 0.5rem 0;
    }

    .btn-primary {
        min-height: 48px;
    }

    .btn-sm {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    /* --- app.css --- */
    .app-header {
        padding: 0 1rem;
    }

    .header-left h1 {
        font-size: 0.95rem;
    }

    .header-badge {
        display: none;
    }

    .header-right {
        gap: 0.5rem;
    }

    .status-text {
        display: none;
    }

    /* --- auth.css --- */
    .login-card {
        padding: 28px;
    }

    .login-header h1 {
        font-size: 18px;
    }

    /* --- biostat.css --- */
    .control-panel {
        padding: 1rem;
        gap: 1rem;
    }

    .section-title {
        font-size: 0.8rem;
    }

    .chart-type-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .chart-type-btn {
        padding: 0.875rem 0.5rem;
        min-height: 44px;
    }

    .chart-type-btn span {
        display: block;
        font-size: 0.65rem;
    }

    .chart-type-btn svg {
        width: 20px;
        height: 20px;
    }

    .btn-generate {
        padding: 1rem;
        font-size: 1rem;
        min-height: 52px;
    }

    .chart-area {
        padding: 1rem;
    }

    .chart-container {
        min-height: 280px;
        border-radius: 12px;
    }

    .chart-placeholder svg {
        width: 60px;
        height: 60px;
    }

    .chart-placeholder p {
        font-size: 0.9rem;
    }

    .chart-placeholder .placeholder-hint {
        font-size: 0.75rem;
    }

    .chart-actions {
        flex-direction: column;
        gap: 0.5rem;
    }

    .chart-actions .btn {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }

    .chart-metadata {
        padding: 0.875rem;
    }

    .metadata-content {
        grid-template-columns: 1fr 1fr;
    }

    .file-upload-zone {
        border-radius: 10px;
    }

    .upload-content {
        padding: 1.25rem;
    }

    .upload-content svg {
        width: 28px;
        height: 28px;
    }

    .data-summary {
        gap: 0.5rem;
    }

    .summary-item {
        padding: 0.625rem;
    }

    .summary-value {
        font-size: 1.1rem;
    }

    .btn-view-data {
        min-height: 48px;
    }

    /* --- biostat.css (data viewer mobile) --- */
    .modal-large {
        width: 100%;
        height: 100%;
        max-height: 100vh;
        border-radius: 0;
    }

    .modal {
        border-radius: 0;
    }

    .data-viewer-body {
        flex-direction: column;
    }

    .data-viewer-sidebar {
        width: 100%;
        height: auto;
        max-height: 35vh;
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
    }

    .data-viewer-sidebar h4 {
        padding: 0.875rem 1rem;
    }

    .table-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.75rem;
    }

    .table-list-item {
        flex: 0 0 auto;
        padding: 0.625rem 1rem;
        border-radius: 20px;
        border-left: none;
        background: var(--bg-hover);
        font-size: 0.75rem;
    }

    .table-list-item:hover {
        padding-left: 1rem;
        border-left: none;
    }

    .table-list-item.active {
        background: rgba(59, 130, 246, 0.2);
        border-left: none;
    }

    .data-viewer-content {
        flex: 1;
        min-height: 0;
    }

    .data-viewer-toolbar {
        padding: 0.75rem 1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .table-info {
        font-size: 0.8rem;
        flex: 1;
    }

    .pagination {
        width: 100%;
        justify-content: center;
    }

    .data-table-wrapper {
        padding: 0.75rem;
    }

    .data-table {
        font-size: 0.7rem;
    }

    .data-table th,
    .data-table td {
        padding: 0.5rem 0.625rem;
    }

    .data-table td {
        max-width: 150px;
    }

    /* --- ai-chat.css --- */
    .ai-sidebar {
        width: 100%;
        max-width: 100%;
    }

    .ai-sidebar-header {
        padding: 14px 16px;
    }

    .ai-sidebar-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .ai-chat-messages {
        padding: 12px;
    }

    .ai-message-user,
    .ai-message-assistant {
        font-size: 15px;
    }

    .ai-sidebar-footer {
        padding: 12px;
    }

    .ai-input-wrapper {
        padding: 10px 14px;
    }

    .ai-input-wrapper textarea {
        font-size: 16px; /* Prevents iOS zoom */
        min-height: 24px;
    }

    .ai-send-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }
}

/* ===== Small Mobile (max-width: 380px) ===== */
@media (max-width: 380px) {
    /* --- app.css --- */
    .header-left h1 {
        font-size: 0.85rem;
    }

    /* --- biostat.css --- */
    .chart-type-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .chart-type-btn {
        padding: 1rem 0.5rem;
    }

    .metadata-content {
        grid-template-columns: 1fr;
    }

    /* --- auth.css --- */
    .login-card {
        padding: 24px;
    }

    .login-header h1 {
        font-size: 16px;
    }
}