/**
 * FDA Products Management System - Mobile Optimizations
 * Responsive enhancements for phones and tablets
 */

/* Prevent horizontal scroll */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

/* Safe area support for notched devices */
@supports (padding: max(0px)) {
    .topbar {
        padding-left: max(var(--space-4), env(safe-area-inset-left));
        padding-right: max(var(--space-4), env(safe-area-inset-right));
    }

    .content-wrapper {
        padding-left: max(var(--space-4), env(safe-area-inset-left));
        padding-right: max(var(--space-4), env(safe-area-inset-right));
        padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
    }

    .sidebar {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* Tablet and below */
@media (max-width: 1024px) {
    .sidebar {
        box-shadow: var(--shadow-xl);
    }

    body.sidebar-open {
        overflow: hidden;
        touch-action: none;
    }
}

/* Mobile layout */
@media (max-width: 768px) {
    /* Topbar */
    .topbar {
        height: auto;
        min-height: 56px;
        padding: var(--space-3) var(--space-4);
        gap: var(--space-2);
        flex-wrap: nowrap;
    }

    .topbar-left {
        flex: 1;
        min-width: 0;
        gap: var(--space-3);
    }

    .topbar-right {
        flex-shrink: 0;
        gap: var(--space-2);
    }

    .topbar-title {
        min-width: 0;
    }

    .topbar-title h1 {
        font-size: var(--text-lg);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .topbar-title p {
        display: none;
    }

    .topbar-user-info,
    .topbar-user .fa-chevron-down {
        display: none;
    }

    .topbar-user {
        padding: var(--space-1);
    }

    .mobile-toggle {
        flex-shrink: 0;
    }

    /* Content */
    .content-wrapper {
        padding: var(--space-4);
    }

    .page-header h1 {
        font-size: var(--text-2xl);
    }

    .page-header-actions {
        flex-direction: column;
        width: 100%;
    }

    .page-header-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* Grids with inline column spans */
    .grid > [style*="grid-column"],
    [style*="grid-column: span"] {
        grid-column: span 1 !important;
    }

    /* Cards */
    .card-header,
    .table-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-4);
    }

    .card-body,
    .card-footer {
        padding: var(--space-4);
    }

    .card-header .btn,
    .table-actions {
        width: 100%;
    }

    .table-actions {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .table-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    /* Filter / toolbar forms */
    .card-body > div[style*="display: flex"],
    .card-body form.d-flex,
    .card-body .d-flex {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
    }

    .card-body form[style*="display: flex"] {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
    }

    .content-wrapper .form-input[style*="min-width"],
    .content-wrapper input.form-input[style*="min-width"],
    .content-wrapper select.form-input[style*="min-width"],
    .content-wrapper select[style*="min-width"],
    .content-wrapper input[type="text"][style*="min-width"] {
        min-width: 0 !important;
        width: 100% !important;
    }

    .card-body .input-group[style*="min-width"] {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .card-body form .btn,
    .card-body > div[style*="display: flex"] > .btn,
    .card-body > div[style*="display: flex"] > a.btn {
        width: 100%;
        justify-content: center;
    }

    /* Stats */
    .stat-card {
        padding: var(--space-4);
    }

    .stat-card-info h3 {
        font-size: var(--text-2xl);
    }

    .stat-card-icon {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }

    /* Tables */
    .table th,
    .table td {
        padding: var(--space-3);
        font-size: var(--text-sm);
    }

    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }

    /* Tabs */
    .tabs-list {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

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

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

    /* Charts */
    .card-body:has(canvas) {
        min-height: 220px;
        position: relative;
    }

    /* Breadcrumb */
    .breadcrumb {
        flex-wrap: wrap;
    }

    /* Dropdown menus */
    .dropdown-menu {
        min-width: 180px;
        right: 0;
        left: auto;
    }

    /* Modals */
    .modal-backdrop {
        padding: var(--space-3);
        align-items: flex-end;
    }

    .modal {
        max-width: 100%;
        max-height: 92vh;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .modal-footer {
        flex-direction: column-reverse;
        gap: var(--space-2);
    }

    .modal-footer .btn {
        width: 100%;
    }

    /* Pagination */
    .pagination {
        flex-wrap: wrap;
        gap: var(--space-1);
    }

    /* Toast notifications */
    .toast-container {
        left: var(--space-4) !important;
        right: var(--space-4) !important;
        top: max(16px, env(safe-area-inset-top)) !important;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .topbar-actions .topbar-btn:not(:last-of-type) {
        display: none;
    }

    .stats-grid {
        gap: var(--space-4);
    }

    .stat-card-content {
        gap: var(--space-3);
    }

    .btn {
        padding: var(--space-3) var(--space-4);
    }

    .btn-sm {
        padding: var(--space-2) var(--space-3);
    }

    h1 { font-size: var(--text-2xl); }
    h2 { font-size: var(--text-xl); }
    h3 { font-size: var(--text-lg); }
}

/* Touch-friendly targets */
@media (hover: none) and (pointer: coarse) {
    .btn,
    .nav-link,
    .topbar-btn,
    .mobile-toggle,
    .pagination-btn,
    .tab-btn {
        min-height: 44px;
    }

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

    .form-input,
    .form-select,
    .form-textarea {
        font-size: 16px; /* Prevents iOS zoom on focus */
    }
}

/* Chat widget (public pages) */
@media (max-width: 480px) {
    .chat-widget {
        bottom: max(16px, env(safe-area-inset-bottom));
        right: max(16px, env(safe-area-inset-right));
    }

    .chat-window {
        width: calc(100vw - 32px);
        max-width: 100%;
        height: min(520px, calc(100vh - 120px));
        right: 0;
        bottom: 72px;
    }

    .chat-toggle {
        width: 56px;
        height: 56px;
    }
}