/**
 * Hermes Mobile & Touch CSS
 * Improvements for staff interfaces on tablets and phones.
 */

:root {
    --touch-min: 44px; /* Apple/Google minimum touch target size */
}

/* Base Mobile Improvements */
@media (max-width: 768px) {
    body {
        font-size: 16px; /* Prevents auto-zoom on iOS inputs */
    }

    input, select, textarea, button {
        min-height: var(--touch-min);
    }

    /* Scrollable Tables */
    .panel {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 12px !important;
    }

    /* A table that does not sit inside a .panel (e.g. one built into a
     * .modal, which has its own overflow-y for the sheet but none on X) gets
     * this instead -- pos.html wraps such tables in <div class="table-wrap">
     * rather than growing every modal to be a .panel. */
    .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 600px; /* Force scroll instead of squishing */
    }

    /* Grid Adjustments */
    .grid {
        grid-template-columns: 1fr !important;
    }

    /* Hide less important columns in tables on mobile if possible */
    /* This requires specific classes in the HTML, but we can do some general ones */
    .mobile-hide {
        display: none !important;
    }
}

/* Touch Friendliness for all sizes */
button, 
.btn, 
.lane-chip, 
.nav-link,
.queue-item {
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(243, 163, 64, 0.2);
}

button:active, 
.btn:active {
    transform: translateY(1px);
    opacity: 0.8;
}

/* Improve inputs for fat fingers */
input[type="number"], 
input[type="text"], 
input[type="search"] {
    padding: 10px 12px !important;
    font-size: 16px !important;
}

/* Responsive Sidebar for Admin Dashboard */
@media (max-width: 1024px) {
    .sidebar {
        width: 72px !important;
    }
    .sidebar span, 
    .sidebar .p-6 span {
        display: none;
    }
    .sidebar .nav-link {
        justify-content: center;
        padding: 12px 0 !important;
    }
    .sidebar .nav-link i {
        margin: 0 !important;
        font-size: 1.25rem;
    }
}

/* Even smaller sidebar for phones */
@media (max-width: 640px) {
    .flex {
        flex-direction: column;
    }
    .sidebar {
        width: 100% !important;
        height: auto !important;
        flex-direction: row !important;
        position: sticky;
        top: 0;
        z-index: 50;
    }
    .sidebar nav {
        display: flex;
        flex-direction: row !important;
        margin-top: 0 !important;
        overflow-x: auto;
        padding: 8px !important;
        gap: 4px !important;
    }
    .sidebar .nav-link {
        min-width: 60px;
        white-space: nowrap;
    }
    .sidebar .p-6, 
    .sidebar .border-t {
        display: none !important;
    }
    main {
        padding: 16px !important;
    }
}

/* Better lane cards for touch */
.lane-card {
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px !important;
}

.lane-number {
    font-size: 2.2rem !important;
}