/* ==========================================================================
   LegaBill Mobile Responsive Styles
   Comprehensive responsive design for 320px - 1920px viewports
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties for Responsive Design
   -------------------------------------------------------------------------- */
:root {
    --touch-target-min: 44px;
    --mobile-padding: 12px;
    --mobile-gap: 8px;
    --mobile-radius: 8px;
    --mobile-font-body: 14px;
    --mobile-font-small: 12px;
}

/* --------------------------------------------------------------------------
   Extra Small Devices (320px - 479px) - iPhone SE, older phones
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
    /* Layout */
    .page-content {
        padding: 10px !important;
    }

    .modern-topbar {
        height: 56px !important;
        padding: 0 10px !important;
    }

    /* Hide search on very small screens, show icon instead */
    .search-container {
        display: none !important;
    }

    /* Breadcrumb */
    .current-page {
        font-size: 14px !important;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Topbar */
    .topbar-right {
        gap: 4px !important;
    }

    .user-name {
        display: none !important;
    }

    .logout-btn {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }

    /* Notifications panel positioned for small screens */
    #notificationsPanel {
        right: 5px !important;
        left: 5px !important;
        width: auto !important;
        max-width: calc(100vw - 10px) !important;
    }

    /* Status menu */
    #statusMenu {
        right: 0 !important;
        left: auto !important;
    }

    /* Dashboard */
    .dashboard-container {
        padding: 10px !important;
    }

    .dashboard-header {
        padding: 15px !important;
        border-radius: 8px !important;
        margin-bottom: 15px !important;
    }

    .dashboard-header h2 {
        font-size: 20px !important;
    }

    .stats-row {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .stat-card {
        padding: 12px !important;
    }

    .stat-card h3, .stat-number {
        font-size: 18px !important;
    }

    /* Quick Actions - single column on tiny screens */
    .quick-actions-top,
    .quick-actions-bar {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    .action-link, .action-btn-top {
        padding: 10px 6px !important;
        font-size: 11px !important;
    }

    /* Tables - card layout for tiny screens */
    .table thead {
        display: none !important;
    }

    .table tbody tr {
        display: block !important;
        margin-bottom: 10px !important;
        border: 1px solid #e9ecef !important;
        border-radius: 8px !important;
        padding: 10px !important;
    }

    .table tbody td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 6px 0 !important;
        border-bottom: 1px solid #f1f1f1 !important;
        font-size: 13px !important;
    }

    .table tbody td:last-child {
        border-bottom: none !important;
    }

    .table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #495057;
        font-size: 12px;
    }

    /* Modals */
    .modal-overlay,
    [style*="position: fixed"][style*="z-index: 1000"],
    [style*="position:fixed"][style*="z-index:1000"] {
        padding: 10px !important;
    }

    .modal-content,
    [style*="max-width: 600px"],
    [style*="max-width:600px"],
    [style*="max-width: 700px"],
    [style*="max-width:700px"] {
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px !important;
        max-height: 85vh !important;
    }

    /* Forms */
    .form-row,
    .form-grid,
    [style*="display: grid"][style*="grid-template-columns: 1fr 1fr"],
    [style*="display:grid"][style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Task items */
    .task-item {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .task-actions {
        margin-top: 8px !important;
        width: 100% !important;
        justify-content: flex-end !important;
    }

    /* Calendar */
    .calendar-header {
        flex-direction: column !important;
        gap: 8px !important;
    }
}

/* --------------------------------------------------------------------------
   Small Devices (480px - 767px) - Larger phones, landscape phones
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Core touch target sizing */
    .btn,
    button,
    a.btn,
    .action-link,
    .action-btn-top,
    .nav-toggle,
    .notification-btn,
    .logout-btn,
    .close-btn {
        min-height: var(--touch-target-min) !important;
        min-width: var(--touch-target-min) !important;
    }

    /* Prevent iOS zoom on input focus */
    input, select, textarea {
        font-size: 16px !important;
    }

    /* Tables need horizontal scroll */
    .table-container,
    .table-responsive,
    .table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 0 -12px;
        padding: 0 12px;
    }

    .table {
        min-width: 500px;
    }

    /* Modal improvements for phones */
    .modal-overlay {
        align-items: flex-end !important;
    }

    .modal-content {
        border-radius: 16px 16px 0 0 !important;
        max-height: 90vh !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .modal-body {
        padding: 15px !important;
    }

    .modal-footer {
        padding: 15px !important;
        flex-direction: column !important;
    }

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

    /* Form groups need spacing */
    .form-group,
    .mb-3 {
        margin-bottom: 12px !important;
    }

    .form-group label,
    label {
        font-size: 13px !important;
        margin-bottom: 4px !important;
    }

    /* Button groups stack on mobile */
    .btn-group {
        flex-wrap: wrap !important;
    }

    .btn-group .btn {
        flex: 1 !important;
        min-width: 0 !important;
    }

    /* Action buttons at top of pages */
    .page-actions,
    .page-header-actions,
    [style*="display: flex"][style*="gap"] > .btn {
        width: 100%;
    }

    /* Cards */
    .dashboard-card,
    .card {
        margin-bottom: 12px !important;
    }

    /* Status badges more readable */
    .badge,
    .status-badge,
    .priority-badge {
        font-size: 11px !important;
        padding: 3px 8px !important;
    }

    /* Time entries / timer */
    .timer-time {
        font-size: 1.8rem !important;
    }

    .timer-controls {
        flex-wrap: wrap !important;
    }

    /* Messages */
    .message-item {
        padding: 12px !important;
    }

    /* Team chat */
    .show-chat-btn {
        bottom: 12px !important;
        right: 12px !important;
        padding: 12px 18px !important;
        font-size: 14px !important;
    }

    /* Client portal - invoices, documents */
    .invoice-card,
    .document-card {
        padding: 12px !important;
    }

    /* Search results dropdown */
    .search-results-dropdown {
        position: fixed !important;
        top: 60px !important;
        left: 10px !important;
        right: 10px !important;
        max-height: 60vh !important;
    }
}

/* --------------------------------------------------------------------------
   Tablet Devices (768px - 1024px)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
    .page-content {
        padding: 20px !important;
    }

    .modern-search {
        width: 200px !important;
    }

    .dashboard-grid {
        grid-template-columns: 1fr !important;
    }

    .stats-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Modal sizing for tablets */
    .modal-content {
        max-width: 80% !important;
    }

    /* Two-column forms on tablet */
    .form-row-2col {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 15px !important;
    }
}

/* --------------------------------------------------------------------------
   Large Desktop (1440px+)
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
    .dashboard-container {
        max-width: 1400px;
        margin: 0 auto;
    }
}

/* --------------------------------------------------------------------------
   Global Mobile Utilities
   -------------------------------------------------------------------------- */

/* Ensure all images are responsive */
img {
    max-width: 100%;
    height: auto;
}

/* Prevent horizontal overflow globally - mobile only */
@media (max-width: 768px) {
    * {
        max-width: 100vw;
    }
}

html, body {
    overflow-x: hidden;
}

/* Better text rendering on mobile */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Responsive typography */
@media (max-width: 767px) {
    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.3rem !important; }
    h3 { font-size: 1.15rem !important; }
    h4 { font-size: 1rem !important; }
}

/* Safe area insets for notched devices */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .modern-app-shell {
        padding-bottom: env(safe-area-inset-bottom);
    }

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

    .show-chat-btn {
        bottom: calc(12px + env(safe-area-inset-bottom));
    }
}

/* --------------------------------------------------------------------------
   Print Styles (hide navigation for printing)
   -------------------------------------------------------------------------- */
@media print {
    .sidebar,
    .modern-topbar,
    .nav-toggle,
    .show-chat-btn,
    .mobile-overlay {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
    }

    .page-content {
        padding: 0 !important;
    }
}