/**
 * OraBooks - WPMU Frontend Basic Inventory
 * Responsive CSS for Full Mobile, Tablet, and Desktop Support
 * Version: 1.0
 */

/* ===================================
   ROOT VARIABLES
   =================================== */
:root {
    --inv-sidebar-width: 280px;
    --inv-mobile-header-height: 64px;
    --inv-transition: all 0.3s ease;
}

/* ===================================
   BASE RESPONSIVE UTILITIES
   =================================== */

/* Ensure all images are responsive - scoped to inventory */
.orabooks-inventory img,
body.orabooks-inventory img,
.inventory-page img {
    max-width: 100%;
    height: auto;
}

/* Responsive tables - scoped to inventory */
.orabooks-inventory .table-responsive,
body.orabooks-inventory .table-responsive,
.inventory-page .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ===================================
   MOBILE FIRST: BASE STYLES (320px+)
   =================================== */

/* Typography scaling for mobile - scoped to inventory pages */
.orabooks-inventory body,
body.orabooks-inventory,
body.inventory-page {
    font-size: 14px;
    line-height: 1.5;
}

.orabooks-inventory h1,
body.orabooks-inventory h1,
.inventory-page h1 {
    font-size: 1.5rem;
}

.orabooks-inventory h2,
body.orabooks-inventory h2,
.inventory-page h2 {
    font-size: 1.25rem;
}

.orabooks-inventory h3,
body.orabooks-inventory h3,
.inventory-page h3 {
    font-size: 1.125rem;
}

/* Buttons - Full width on mobile */
.orabooks-inventory .btn-mobile-full,
body.orabooks-inventory .btn-mobile-full,
.inventory-page .btn-mobile-full {
    width: 100%;
    margin-bottom: 0.5rem;
}

/* Form inputs - Better touch targets - scoped */
.orabooks-inventory input[type="text"],
.orabooks-inventory input[type="email"],
.orabooks-inventory input[type="number"],
.orabooks-inventory input[type="password"],
.orabooks-inventory input[type="search"],
.orabooks-inventory input[type="tel"],
.orabooks-inventory input[type="url"],
.orabooks-inventory input[type="date"],
.orabooks-inventory select,
.orabooks-inventory textarea,
body.orabooks-inventory input[type="text"],
body.orabooks-inventory input[type="email"],
body.orabooks-inventory input[type="number"],
body.orabooks-inventory input[type="password"],
body.orabooks-inventory input[type="search"],
body.orabooks-inventory input[type="tel"],
body.orabooks-inventory input[type="url"],
body.orabooks-inventory input[type="date"],
body.orabooks-inventory select,
body.orabooks-inventory textarea,
.inventory-page input[type="text"],
.inventory-page input[type="email"],
.inventory-page input[type="number"],
.inventory-page input[type="password"],
.inventory-page input[type="search"],
.inventory-page input[type="tel"],
.inventory-page input[type="url"],
.inventory-page input[type="date"],
.inventory-page select,
.inventory-page textarea {
    min-height: 44px;
    font-size: 16px;
    /* Prevents zoom on iOS */
}

/* Cards - Reduce padding on mobile */
.orabooks-inventory .card-mobile,
body.orabooks-inventory .card-mobile,
.inventory-page .card-mobile {
    padding: 1rem;
}

/* ===================================
   DASHBOARD GRID - RESPONSIVE
   =================================== */

/* Stats cards - Stack on mobile */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* Charts - Full width on mobile */
.charts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* ===================================
   TABLE RESPONSIVENESS
   =================================== */

/* Mobile table - Horizontal scroll */
@media (max-width: 767px) {
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 800px;
        /* Ensures table doesn't collapse */
    }

    /* Reduce table padding on mobile */
    table th,
    table td {
        padding: 0.5rem !important;
        font-size: 0.875rem !important;
    }

    /* Hide less important columns on mobile */
    .hide-mobile {
        display: none !important;
    }
}

/* ===================================
   FORM LAYOUTS - RESPONSIVE
   =================================== */

/* Form rows - Stack on mobile */
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.form-col {
    flex: 1 1 100%;
    min-width: 0;
}

/* ===================================
   MODAL RESPONSIVENESS
   =================================== */

@media (max-width: 767px) {
    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100% - 1rem) !important;
    }

    .modal-content {
        border-radius: 0.5rem !important;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 1rem !important;
    }
}

/* ===================================
   BUTTON GROUPS - RESPONSIVE
   =================================== */

@media (max-width: 767px) {
    .btn-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .btn-group button,
    .btn-group a {
        width: 100%;
        margin: 0 !important;
    }
}

/* ===================================
   SEARCH & FILTER BARS
   =================================== */

@media (max-width: 767px) {
    .search-filter-bar {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .search-filter-bar>* {
        width: 100% !important;
    }
}

/* ===================================
   PAGINATION - RESPONSIVE
   =================================== */

@media (max-width: 767px) {
    .pagination {
        font-size: 0.875rem !important;
    }

    .pagination li a {
        padding: 0.375rem 0.625rem !important;
    }

    /* Show only current, prev, next on very small screens */
    @media (max-width: 480px) {
        .pagination li:not(.active):not(:first-child):not(:last-child):not(:nth-child(2)):not(:nth-last-child(2)) {
            display: none;
        }
    }
}

/* ===================================
   TABLET: 768px - 1024px
   =================================== */

@media (min-width: 768px) {
    body {
        font-size: 15px;
    }

    h1 {
        font-size: 2rem !important;
    }

    h2 {
        font-size: 1.5rem !important;
    }

    /* Stats grid - 2 columns */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    /* Form columns - 2 columns */
    .form-col-md-6 {
        flex: 1 1 calc(50% - 0.5rem);
    }

    .form-col-md-4 {
        flex: 1 1 calc(33.333% - 0.67rem);
    }

    /* Cards - Normal padding */
    .card-mobile {
        padding: 1.5rem !important;
    }
}

/* ===================================
   DESKTOP: 1025px+
   =================================== */

@media (min-width: 1025px) {
    body {
        font-size: 16px;
    }

    h1 {
        font-size: 2.25rem !important;
    }

    h2 {
        font-size: 1.75rem !important;
    }

    /* Stats grid - 4 columns */
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Charts grid - 2/3 and 1/3 split */
    .charts-grid {
        grid-template-columns: 2fr 1fr;
    }

    /* Form columns - 3 columns */
    .form-col-lg-4 {
        flex: 1 1 calc(33.333% - 0.67rem);
    }

    .form-col-lg-3 {
        flex: 1 1 calc(25% - 0.75rem);
    }
}

/* ===================================
   LARGE DESKTOP: 1440px+
   =================================== */

@media (min-width: 1440px) {

    /* Increase max content width */
    .container-fluid {
        max-width: 1400px;
        margin: 0 auto;
    }
}

/* Dashboard stats cards */
@media (max-width: 767px) {
    .stats-card {
        padding: 1rem !important;
    }

    .stats-card h2 {
        font-size: 1.5rem !important;
    }

    .stats-card .icon {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
}

/* Chart containers */
@media (max-width: 767px) {
    .chart-container {
        height: 250px !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .chart-container {
        height: 300px !important;
    }
}

/* Action buttons in tables */
@media (max-width: 767px) {
    .action-buttons {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .action-buttons a,
    .action-buttons button {
        display: block;
        width: 100%;
        text-align: center;
        padding: 0.5rem;
    }
}

/* Export buttons toolbar */
@media (max-width: 767px) {
    .export-toolbar {
        flex-wrap: wrap !important;
    }

    .export-toolbar button {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 120px;
    }
}

/* ===================================
   PRINT STYLES
   =================================== */

@media print {

    /* Hide navigation and non-essential elements */
    #inventory-sidebar,
    #inventory-mobile-header,
    #sidebar-overlay,
    .no-print,
    .action-buttons,
    .export-toolbar,
    button,
    .pagination {
        display: none !important;
    }

    /* Full width for content */
    main {
        width: 100% !important;
        padding: 0 !important;
    }

    /* Optimize table for print */
    table {
        page-break-inside: auto;
    }

    tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }

    /* Black and white optimization */
    * {
        color: #000 !important;
        background: #fff !important;
    }

    table th {
        background: #f0f0f0 !important;
        border: 1px solid #000 !important;
    }

    table td {
        border: 1px solid #ccc !important;
    }
}

/* ===================================
   ACCESSIBILITY IMPROVEMENTS
   =================================== */

/* Focus states for keyboard navigation */
button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px !important;
}

/* Skip to content link */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: #3b82f6;
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 100;
}

.skip-to-content:focus {
    top: 0;
}

/* ===================================
   LANDSCAPE ORIENTATION (Mobile)
   =================================== */

@media (max-width: 767px) and (orientation: landscape) {
    #inventory-mobile-header {
        height: 48px !important;
    }

    #inventory-sidebar {
        width: 240px !important;
    }

    main {
        padding: 0.75rem !important;
    }
}

/* ===================================
   TOUCH DEVICE OPTIMIZATIONS
   =================================== */

@media (hover: none) and (pointer: coarse) {

    /* Larger touch targets */
    button,
    a,
    input[type="checkbox"],
    input[type="radio"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Remove hover effects on touch devices */
    .hover\:bg-gray-100:hover {
        background-color: inherit;
    }

    /* Add active states instead */
    button:active,
    a:active {
        opacity: 0.7;
        transform: scale(0.98);
    }
}

/* ===================================
   UTILITY CLASSES
   =================================== */

/* Responsive spacing */
.p-responsive {
    padding: 1rem;
}

@media (min-width: 768px) {
    .p-responsive {
        padding: 1.5rem;
    }
}

@media (min-width: 1025px) {
    .p-responsive {
        padding: 2rem;
    }
}

/* Responsive text alignment */
.text-mobile-center {
    text-align: center;
}

@media (min-width: 768px) {
    .text-mobile-center {
        text-align: left;
    }
}

/* Flex direction responsive */
.flex-mobile-col {
    flex-direction: column;
}

@media (min-width: 768px) {
    .flex-mobile-col {
        flex-direction: row;
    }
}

/* Hide/Show utilities */
.hide-on-mobile {
    display: none;
}

@media (min-width: 768px) {
    .hide-on-mobile {
        display: block;
    }
}

.show-on-mobile {
    display: block;
}

@media (min-width: 768px) {
    .show-on-mobile {
        display: none;
    }
}

/* ===================================
   SPECIFIC PAGE FIXES
   =================================== */

/* Add/Edit Forms */
@media (max-width: 767px) {
    .form-section {
        margin-bottom: 1.5rem;
    }

    .form-section-title {
        font-size: 1.125rem !important;
        margin-bottom: 1rem;
    }

    /* File upload areas */
    .file-upload-area {
        min-height: 150px !important;
    }
}

/* Invoice/Print pages */
@media (max-width: 767px) {
    .invoice-container {
        padding: 1rem !important;
        font-size: 0.875rem !important;
    }

    .invoice-header {
        flex-direction: column !important;
        text-align: center !important;
    }

    .invoice-table {
        font-size: 0.75rem !important;
    }
}

/* Reports */
@media (max-width: 767px) {
    .report-filters {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .report-filters>* {
        width: 100% !important;
    }

    .report-summary-cards {
        grid-template-columns: 1fr !important;
    }
}

/* ===================================
   SCROLLBAR STYLING (Optional)
   =================================== */

/* Custom scrollbar for webkit browsers */
@media (min-width: 1025px) {
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-track {
        background: #f1f5f9;
    }

    ::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }
}

/* ===================================
   LOADING STATES
   =================================== */

.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

@media (max-width: 767px) {
    .loading-overlay {
        font-size: 0.875rem;
    }
}

/* ===================================
   ANIMATION PERFORMANCE
   =================================== */

/* Reduce animations on low-end devices */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===================================
   DARK MODE SUPPORT (Optional)
   =================================== */

@media (prefers-color-scheme: dark) {
    /* Add dark mode styles if needed */
    /* Currently using light theme only */
}

/* ===================================
   POS TERMINAL RESPONSIVENESS
   =================================== */

@media (max-width: 1024px) {
    .h-\[calc\(100vh-100px\)\] {
        height: auto !important;
        min-height: calc(100vh - 120px) !important;
    }

    #pos-cart-tbody td {
        padding: 0.5rem 0.25rem !important;
    }

    #pos_total {
        font-size: 1.25rem !important;
    }

    .product-card .h-32 {
        height: 100px !important;
    }
}

@media (max-width: 640px) {
    #product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    .product-card .p-3 {
        padding: 0.5rem !important;
    }

    .product-card .font-bold {
        font-size: 0.75rem !important;
    }
}