/**
 * Responsive CSS for Mobile and Tablet Devices
 * Optimizes the TendPOS Admin interface for smaller screens
 */

/* ==========================================
   MOBILE-FIRST BASE STYLES
   ========================================== */

/* Ensure proper viewport scaling */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* Touch-friendly tap targets - buttons and links only on all screens */
button,
a,
input[type="button"],
input[type="submit"],
select {
    min-height: 44px;
    min-width: 44px;
}

/* Checkboxes and radios only need larger tap targets on touch devices */
@media (max-width: 768px), (hover: none) {
    input[type="checkbox"],
    input[type="radio"] {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Prevent text overflow on small screens */
* {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ==========================================
   TABLET LANDSCAPE (1024px and below)
   ========================================== */

@media (max-width: 1024px) {
    /* Container adjustments */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Reduce header padding */
    .gradient-bg {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    /* Make tables scrollable */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    /* Stack grid layouts */
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Analytics cards - 2 columns on tablet */
    .analytics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================
   TABLET PORTRAIT (768px and below)
   ========================================== */

@media (max-width: 768px) {
    /* Typography adjustments */
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    /* Single column layouts */
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: 1fr;
    }

    /* Navigation adjustments */
    .flex.gap-3 {
        flex-direction: column;
        width: 100%;
    }

    .flex.gap-3 > * {
        width: 100%;
    }

    /* Card padding reduction */
    .bg-white.rounded-lg.shadow-sm.p-6 {
        padding: 1rem;
    }

    /* Button groups - stack vertically */
    .flex.items-center.gap-2 button,
    .flex.items-center.gap-3 button {
        width: 100%;
    }

    /* Form inputs full width */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    select,
    textarea {
        width: 100%;
        font-size: 16px; /* Prevents zoom on iOS */
    }

    /* Analytics dashboard - single column */
    .analytics-grid {
        grid-template-columns: 1fr;
    }

    /* Chart containers */
    canvas {
        max-height: 300px;
    }

    /* Feature cards */
    .feature-card,
    .request-card {
        padding: 0.75rem;
    }

    /* Bulk actions toolbar - vertical layout */
    #bulkActionsToolbar .flex.items-center.justify-between {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    #bulkActionsToolbar .flex.items-center.gap-3,
    #bulkActionsToolbar .flex.items-center.gap-4 {
        flex-direction: column;
        width: 100%;
    }

    #bulkActionsToolbar select,
    #bulkActionsToolbar button {
        width: 100%;
    }

    /* Dependency graph - smaller on mobile */
    #graphCanvas {
        height: 400px !important;
    }

    /* Modal adjustments */
    .modal-content {
        width: 95%;
        max-height: 90vh;
        overflow-y: auto;
    }

    /* Time tracking cards */
    .grid.grid-cols-3.gap-2 {
        grid-template-columns: 1fr;
    }

    /* Status badges - better wrapping */
    .flex.items-center.gap-4 {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* ==========================================
   MOBILE (640px and below)
   ========================================== */

@media (max-width: 640px) {
    /* Header title sizing */
    h1 {
        font-size: 1.75rem;
    }

    /* Hide non-essential elements on mobile */
    .hidden-mobile {
        display: none !important;
    }

    /* Compact padding */
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .py-8 {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    /* Navigation - hamburger menu on mobile */
    .desktop-nav {
        display: none;
    }

    /* Smaller text for better fit */
    .text-sm {
        font-size: 0.8rem;
    }

    /* Tables - card view on mobile */
    thead {
        display: none;
    }

    tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
        padding: 0.75rem;
    }

    td {
        display: block;
        text-align: right;
        padding: 0.5rem 0;
        border-bottom: 1px solid #f3f4f6;
    }

    td:last-child {
        border-bottom: none;
    }

    td::before {
        content: attr(data-label);
        float: left;
        font-weight: 600;
        color: #374151;
    }

    /* Filter buttons - full width */
    .filter-btn {
        flex: 1;
        min-width: auto;
    }

    /* Saved views - scrollable horizontal */
    #savedViewsContainer {
        overflow-x: auto;
        display: flex;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    #savedViewsContainer button {
        flex-shrink: 0;
    }

    /* Analytics overview cards - stack */
    .grid.grid-cols-1.md\\:grid-cols-4 {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    /* Checkbox adjustments for bulk select */
    .bulk-select-checkbox {
        transform: scale(1.2);
        margin-right: 0.5rem;
    }

    /* Comment section */
    .comment-thread {
        max-height: 300px;
        overflow-y: auto;
    }

    /* Chart legend - horizontal scroll */
    .chart-legend {
        overflow-x: auto;
        white-space: nowrap;
    }

    /* Priority and vertical badges - better wrap */
    .vertical-badge {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }

    /* Form labels stack */
    .flex.items-center.justify-between {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    /* Touch-friendly spacing */
    .p-6 {
        padding: 1rem;
    }

    .mb-8 {
        margin-bottom: 1.5rem;
    }

    .gap-6 {
        gap: 1rem;
    }
}

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

@media (max-height: 500px) and (orientation: landscape) {
    /* Reduce vertical padding in landscape */
    .py-12 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .py-8 {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    /* Modals take full screen in landscape */
    .modal-content {
        max-height: 95vh;
    }

    /* Header compact mode */
    .gradient-bg {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    h1 {
        font-size: 1.5rem;
    }
}

/* ==========================================
   TOUCH-FRIENDLY ENHANCEMENTS
   ========================================== */

/* Larger tap targets */
@media (hover: none) and (pointer: coarse) {
    /* Touch device detected */
    button:not(.bulk-select-checkbox),
    a:not(.text-link),
    input[type="button"],
    input[type="submit"],
    .clickable {
        min-height: 48px;
        padding: 0.75rem 1rem;
    }

    /* Better spacing between interactive elements */
    button + button,
    a + a {
        margin-top: 0.5rem;
    }

    /* Highlight touch targets */
    button:active,
    a:active {
        opacity: 0.7;
        transform: scale(0.98);
    }

    /* Prevent text selection on buttons */
    button,
    a {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }

    /* Better form input sizing */
    input,
    select,
    textarea {
        padding: 0.75rem;
    }

    /* Scrollable areas show scroll indicator */
    .overflow-auto,
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
}

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

@media print {
    /* Hide non-printable elements */
    button,
    .no-print,
    #bulkActionsToolbar {
        display: none !important;
    }

    /* Expand all collapsed sections */
    .hidden,
    .collapsed {
        display: block !important;
        height: auto !important;
    }

    /* Remove shadows and backgrounds for print */
    .shadow-sm,
    .shadow-lg {
        box-shadow: none !important;
    }

    /* Black text for print */
    * {
        color: #000 !important;
    }

    /* Page breaks */
    .page-break {
        page-break-after: always;
    }
}

/* ==========================================
   ACCESSIBILITY ENHANCEMENTS
   ========================================== */

/* Focus visible for keyboard navigation */
*:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

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

.skip-link:focus {
    top: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    button,
    a {
        border: 2px solid currentColor;
    }

    .bg-blue-600 {
        background-color: #0000ff !important;
    }

    .bg-green-600 {
        background-color: #008000 !important;
    }

    .bg-red-600 {
        background-color: #ff0000 !important;
    }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================
   MOBILE UX POLISH (2024)
   ========================================== */

/* Prevent iOS zoom on input focus - requires 16px minimum */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Safe area padding for notched devices */
@supports (padding: max(0px)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .admin-header {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

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

/* Improve touch targets for mobile */
@media (max-width: 768px) {
    /* Buttons need minimum 44px touch targets */
    .btn,
    button:not(.quantity-btn),
    [role="button"] {
        min-height: 44px;
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
    }

    /* Form inputs need adequate height */
    .form-input,
    .form-select,
    .form-textarea,
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        min-height: 44px;
        padding: 0.75rem 1rem;
    }

    /* Increase checkbox/radio touch areas */
    input[type="checkbox"],
    input[type="radio"] {
        width: 1.25rem;
        height: 1.25rem;
    }

    /* Badge and chip touch targets */
    .badge,
    .chip,
    .tag {
        min-height: 32px;
        padding: 0.375rem 0.75rem;
    }

    /* Header icons spacing */
    .header-right,
    .admin-header .flex {
        gap: 0.75rem;
    }

    /* Action buttons in cards */
    .card-actions button,
    .card-actions a {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Modal improvements for mobile */
@media (max-width: 640px) {
    .modal-content,
    [class*="modal"] > div {
        max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 2rem);
        margin: 1rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Stack modal buttons on mobile */
    .modal-footer,
    .modal-actions {
        flex-direction: column-reverse;
        gap: 0.5rem;
    }

    .modal-footer button,
    .modal-actions button {
        width: 100%;
    }
}

/* Toast positioning for mobile */
@media (max-width: 640px) {
    #toast-container,
    .toast-container {
        left: 1rem;
        right: 1rem;
        bottom: calc(1rem + env(safe-area-inset-bottom));
    }

    .toast {
        width: 100%;
    }
}

/* Improve table scrolling on mobile */
@media (max-width: 768px) {
    .table-container,
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    /* Add scroll hint shadow */
    .table-container::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 20px;
        background: linear-gradient(to left, rgba(0,0,0,0.1), transparent);
        pointer-events: none;
    }
}

/* Prevent horizontal scroll */
html, body {
    overflow-x: hidden;
}

/* Smooth momentum scrolling */
.overflow-y-auto,
.overflow-x-auto,
.scrollable {
    -webkit-overflow-scrolling: touch;
}