/* 
 * Mobile-Responsive Purchase Invoice Detail for ERPAthos Purchase
 * 
 * This CSS provides a mobile-friendly layout for the Purchase Invoice Detail page
 * with responsive cards, action buttons, and table handling for small screens.
 * 
 * Breakpoints:
 * - Mobile: < 768px
 * - Tablet: 768px - 1023px
 * - Desktop: >= 1024px
 */

/* ==========================================
   MOBILE: < 768px - Responsive Detail Layout
   ========================================== */
@media (max-width: 767px) {
    /* Stack columns vertically on mobile */
    .purchase-invoice-detail-page .row .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Card spacing adjustments */
    .purchase-invoice-detail-page .card {
        margin-bottom: 1rem;
    }

    /* Header actions - wrap on mobile */
    .purchase-invoice-detail-page .row .col-auto {
        flex: 0 0 100%;
        max-width: 100%;
        margin-top: 1rem;
    }

    .purchase-invoice-detail-page .row .col-auto button {
        width: 100%;
        margin-bottom: 0.5rem;
        margin-right: 0 !important;
        min-height: 44px;
    }

    /* Invoice lines table - enable horizontal scroll */
    .purchase-invoice-detail-page .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .purchase-invoice-detail-page .table-responsive table {
        min-width: 800px; /* Force horizontal scroll for wide table */
    }

    /* Reduce table font size on mobile */
    .purchase-invoice-detail-page .table {
        font-size: 0.875rem;
    }

    .purchase-invoice-detail-page .table th,
    .purchase-invoice-detail-page .table td {
        padding: 0.5rem;
        white-space: nowrap;
    }

    /* Card headers - smaller on mobile */
    .purchase-invoice-detail-page .card-header h5 {
        font-size: 1rem;
    }

    /* Better spacing for mobile cards */
    .purchase-invoice-detail-page .card-body table th {
        font-size: 0.85rem;
    }

    .purchase-invoice-detail-page .card-body table td {
        font-size: 0.9rem;
    }

    /* Status badges - ensure readable */
    .purchase-invoice-detail-page .badge {
        font-size: 0.7rem;
        padding: 4px 8px;
    }

    /* Alert messages - better mobile spacing */
    .purchase-invoice-detail-page .alert {
        font-size: 0.9rem;
        padding: 0.75rem;
    }

    .purchase-invoice-detail-page .alert h5 {
        font-size: 1rem;
    }
}

/* ==========================================
   TABLET: 768px - 1023px
   ========================================== */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Two-column layout for tablet */
    .purchase-invoice-detail-page .row .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Header actions - keep in row but wrap if needed */
    .purchase-invoice-detail-page .row .col-auto button {
        min-height: 44px;
    }

    /* Invoice lines table - slightly smaller */
    .purchase-invoice-detail-page .table {
        font-size: 0.9rem;
    }
}

/* ==========================================
   DESKTOP: >= 1024px - Default Layout
   ========================================== */
@media (min-width: 1024px) {
    /* Desktop uses default Bootstrap grid - no changes needed */
}

/* ==========================================
   EXTRA SMALL MOBILE: < 480px
   ========================================== */
@media (max-width: 479px) {
    /* Even more compact on very small screens */
    .purchase-invoice-detail-page h2 {
        font-size: 1.5rem;
    }

    .purchase-invoice-detail-page .card-header h5 {
        font-size: 0.95rem;
    }

    .purchase-invoice-detail-page .card-body table th {
        font-size: 0.8rem;
        width: 45%;
    }

    .purchase-invoice-detail-page .card-body table td {
        font-size: 0.85rem;
    }

    .purchase-invoice-detail-page .table {
        font-size: 0.8rem;
    }

    .purchase-invoice-detail-page .table th,
    .purchase-invoice-detail-page .table td {
        padding: 0.4rem;
    }
}

/* ==========================================
   ACTION BUTTONS - Mobile Optimization
   ========================================== */
@media (max-width: 767px) {
    /* Make action buttons more prominent on mobile */
    .purchase-invoice-detail-page button.btn {
        font-size: 0.9rem;
        font-weight: 500;
    }

    .purchase-invoice-detail-page button.btn i {
        font-size: 1rem;
    }

    /* Ensure touch targets */
    .purchase-invoice-detail-page .btn {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ==========================================
   TABLE OVERFLOW HANDLING
   ========================================== */
@media (max-width: 1023px) {
    /* Prevent page-wide horizontal scroll */
    .purchase-invoice-detail-page .container-fluid {
        overflow-x: hidden;
    }

    /* Allow only table to scroll horizontally */
    .purchase-invoice-detail-page .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 1rem;
    }

    /* Add scroll indicator shadow */
    .purchase-invoice-detail-page .table-responsive::-webkit-scrollbar {
        height: 8px;
    }

    .purchase-invoice-detail-page .table-responsive::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .purchase-invoice-detail-page .table-responsive::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
    }

    .purchase-invoice-detail-page .table-responsive::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
}

/* ==========================================
   DARK MODE SUPPORT
   ========================================== */
@media (prefers-color-scheme: dark) {
    html.dark-mode .purchase-invoice-detail-page .card {
        background: #2d3748;
        border-color: #4a5568;
    }

    html.dark-mode .purchase-invoice-detail-page .card-header {
        border-color: #4a5568;
    }

    html.dark-mode .purchase-invoice-detail-page .table {
        color: #e2e8f0;
    }

    html.dark-mode .purchase-invoice-detail-page .table-light {
        background-color: #1a202c;
        color: #e2e8f0;
    }

    html.dark-mode .purchase-invoice-detail-page .text-muted {
        color: #a0aec0 !important;
    }

    html.dark-mode .purchase-invoice-detail-page .table-responsive::-webkit-scrollbar-track {
        background: #1a202c;
    }

    html.dark-mode .purchase-invoice-detail-page .table-responsive::-webkit-scrollbar-thumb {
        background: #4a5568;
    }

    html.dark-mode .purchase-invoice-detail-page .table-responsive::-webkit-scrollbar-thumb:hover {
        background: #718096;
    }
}

/* ==========================================
   ACCESSIBILITY
   ========================================== */
@media (max-width: 1023px) {
    /* Better focus indicators */
    .purchase-invoice-detail-page button:focus,
    .purchase-invoice-detail-page a:focus {
        outline: 2px solid #0d6efd;
        outline-offset: 2px;
    }

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

    /* Smooth scrolling */
    .purchase-invoice-detail-page {
        scroll-behavior: smooth;
    }
}