/**
 * WebTAI Responsive Styles
 * Mobile-first breakpoints for all components
 *
 * Breakpoints:
 * - Mobile: max-width 640px
 * - Tablet: max-width 1024px
 * - Desktop: min-width 1025px (default)
 */

/* ===== TABLET (max-width: 1024px) ===== */
@media (max-width: 1024px) {
    /* Layout adjustments */
    .app-content {
        padding: var(--space-lg);
    }

    /* Reduce dashboard grid minimum */
    .dashboard-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: var(--space-md);
    }

    /* Smaller quick action buttons */
    .quick-actions-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }

    .quick-action-btn {
        padding: var(--space-md);
    }
}


/* ===== MOBILE (max-width: 640px) ===== */
@media (max-width: 640px) {
    /* ===== HEADER ===== */
    .app-header {
        padding: 0 var(--space-sm);
    }

    .header-center {
        display: none;
    }

    .header-context {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    /* Hide "WebTAI" text on mobile, show company badge instead */
    .app-logo-text {
        display: none;
    }

    .header-company-badge {
        display: flex;
        flex: 1;
        min-width: 0;
        max-width: none;
        flex-wrap: wrap;
        align-content: center;
    }

    .header-company-code {
        margin-right: var(--space-xs);
    }

    /* Show company name, allow it to wrap */
    .header-company-name {
        flex: 1 1 100px;
        min-width: 0;
    }

    .user-info {
        display: none;
    }

    .user-menu {
        padding: var(--space-xs);
    }

    /* ===== SIDEBAR (Drawer) ===== */
    .app-sidebar {
        transform: translateX(-100%);
        width: 280px;
        z-index: 200;
        box-shadow: var(--shadow-xl);

        &.open {
            transform: translateX(0);
        }
    }

    /* On mobile, never icon-collapse — always full drawer */
    .app-sidebar.collapsed {
        width: 280px;
    }

    .app-sidebar.collapsed .sidebar-section-label {
        color: var(--color-sidebar-section);
    }

    .app-sidebar.collapsed .sidebar-section-label::after {
        display: none;
    }

    .app-sidebar.collapsed .sidebar-header {
        height: auto;
        padding: var(--space-md);
        overflow: visible;
        border-bottom: 1px solid var(--color-border);
    }

    .app-sidebar.collapsed .sidebar-nav .nav-item,
    .app-sidebar.collapsed .sidebar-nav .nav-section-header {
        color: var(--color-text-secondary);
        gap: var(--space-sm);
        padding: var(--space-sm) var(--space-md);
    }

    /* Hide the collapse toggle on mobile — hamburger serves that role */
    .sidebar-collapse-toggle {
        display: none;
    }

    .sidebar-overlay {
        &.visible {
            display: block;
        }
    }

    /* ===== MAIN CONTENT ===== */
    .app-content {
        margin-left: 0;
        max-width: 100%;
        padding: var(--space-md);
    }

    /* ===== PAGE HEADER ===== */
    .page-header {
        margin-bottom: var(--space-lg);
    }

    .page-title {
        font-size: var(--font-size-xl);
    }

    .page-subtitle {
        font-size: var(--font-size-sm);
    }

    /* ===== DASHBOARD ===== */
    .dashboard-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-sm);
    }

    .stat-card {
        padding: var(--space-md);
    }

    .stat-card-value {
        font-size: var(--font-size-xl);
    }

    /* ===== QUICK ACTIONS ===== */
    .quick-actions {
        padding: var(--space-md);
    }

    .quick-actions-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-sm);
    }

    .quick-action-btn {
        padding: var(--space-sm);
        font-size: var(--font-size-xs);

        & svg {
            width: 20px;
            height: 20px;
        }
    }

    /* ===== CARDS ===== */
    .card {
        padding: var(--space-md);
        border-radius: var(--radius-lg);
    }

    /* ===== VENDOR COMPONENTS ===== */
    .vendor-card {
        padding: var(--space-md);
    }

    .vendor-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .vendor-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }

    /* ===== TABLES ===== */
    .table-container {
        margin: 0 calc(-1 * var(--space-md));
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .data-table th,
    .data-table td {
        padding: var(--space-xs) var(--space-sm);
        font-size: var(--font-size-xs);
    }

    /* ===== VIEW TABS ===== */
    .view-tabs {
        margin: 0 calc(-1 * var(--space-md));
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }

    .tab-btn {
        padding: var(--space-sm) var(--space-md);
        font-size: var(--font-size-xs);
    }

    /* ===== PAGE TABS ===== */
    .page-tabs {
        gap: var(--space-md);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .page-tab {
        font-size: var(--font-size-sm);
        white-space: nowrap;
    }

    /* ===== FORMS ===== */
    .form-control {
        font-size: 16px; /* Prevents iOS zoom on focus */
    }

    /* ===== BUTTONS ===== */
    .btn {
        min-height: 44px;
        padding: var(--space-sm) var(--space-md);
    }

    .list-controls {
        flex-direction: column;
        align-items: stretch;

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

    /* ===== MODALS ===== */
    .context-modal {
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
        align-items: flex-end;
    }

    .context-modal-content {
        max-width: 100%;
        max-height: 85vh;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }

    /* ===== STALE DATA BANNER ===== */
    .stale-data-banner {
        left: 0;
        padding: var(--space-sm) var(--space-md);
        flex-wrap: wrap;
    }

    .stale-data-banner-timestamp {
        width: 100%;
        margin-top: var(--space-xs);
    }

    .app-content.has-stale-banner {
        padding-top: calc(var(--space-md) + 60px);
    }

    /* ===== VISIBILITY UTILITIES ===== */
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
    }
}

/* ===== VERY SMALL SCREENS (max-width: 380px) ===== */
@media (max-width: 380px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .quick-actions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== TOUCH DEVICE ENHANCEMENTS ===== */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .nav-item,
    .nav-section-header {
        min-height: 44px;
    }

    .context-modal-item {
        min-height: 48px;
    }

    .typeahead-item {
        min-height: 44px;
    }

    /* Remove hover effects that don't work on touch */
    .stat-card:hover {
        box-shadow: none;
    }

    .quick-action-btn:hover {
        box-shadow: none;
    }
}

/* ===== SAFE AREA INSETS (for notched phones) ===== */
@supports (padding: env(safe-area-inset-bottom)) {
    .app-sidebar {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .context-modal-content {
        padding-bottom: env(safe-area-inset-bottom);
    }
}