/* ============================================================
   Gestion Production - Mobile Overrides
   Applies for screens < 768px
   ============================================================ */

@media screen and (max-width: 767px) {

    /* ----------------------------------------------------------
       Layout
       ---------------------------------------------------------- */
    #main-content {
        padding: 0.5rem;
    }

    .page-container {
        padding: 0.5rem;
    }

    .page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .page-title {
        font-size: 1.25rem;
    }

    /* ----------------------------------------------------------
       Typography
       ---------------------------------------------------------- */
    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.25rem;
    }

    h3 {
        font-size: 1.125rem;
    }

    body {
        font-size: 1.0625rem;
    }

    /* ----------------------------------------------------------
       Header
       ---------------------------------------------------------- */
    #app-header {
        padding: 0.5rem 0.75rem;
        min-height: 48px;
    }

    #app-header .header-title {
        font-size: 1rem;
    }

    #app-header .header-nav {
        gap: 0.25rem;
    }

    #app-header .header-nav a,
    #app-header .header-nav button {
        padding: 0.375rem 0.5rem;
        font-size: 0.75rem;
    }

    /* ----------------------------------------------------------
       Navigation - Horizontal scroll on mobile
       ---------------------------------------------------------- */
    .nav-menu {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        gap: 0.125rem;
    }

    .nav-menu a {
        padding: 0.375rem 0.5rem;
        font-size: 0.75rem;
    }

    /* ----------------------------------------------------------
       Buttons - Full width on mobile
       ---------------------------------------------------------- */
    .btn {
        padding: 0.875rem 1.25rem;
        font-size: 1.0625rem;
        min-height: 52px;
    }

    .btn-block-mobile {
        display: flex;
        width: 100%;
    }

    .btn-large {
        padding: 1rem 1.5rem;
        font-size: 1.125rem;
        min-height: 56px;
    }

    /* ----------------------------------------------------------
       Forms - Larger touch targets
       ---------------------------------------------------------- */
    .form-input {
        padding: 0.875rem 1rem;
        font-size: 1.125rem;
        min-height: 52px;
    }

    .form-label {
        font-size: 0.8125rem;
    }

    .form-actions {
        flex-direction: column;
    }

    .form-actions .btn {
        width: 100%;
    }

    /* ----------------------------------------------------------
       Tables - Card layout on mobile
       ---------------------------------------------------------- */
    .data-table thead {
        display: none;
    }

    .data-table,
    .data-table tbody,
    .data-table tr,
    .data-table td {
        display: block;
        width: 100%;
    }

    .data-table tr {
        background-color: var(--surface);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        margin-bottom: 0.75rem;
        padding: 0.75rem;
        border: 1px solid var(--border);
    }

    .data-table td {
        padding: 0.375rem 0.75rem;
        border-bottom: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
    }

    .data-table td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.75rem;
        color: var(--text-secondary);
        text-transform: uppercase;
        flex-shrink: 0;
    }

    /* ----------------------------------------------------------
       Cards - Full width
       ---------------------------------------------------------- */
    .card-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .card {
        padding: 1rem;
    }

    /* ----------------------------------------------------------
       Dialog - Full width on mobile
       ---------------------------------------------------------- */
    .dialog-overlay {
        padding: 0.5rem;
        align-items: flex-end;
    }

    .dialog-content {
        max-width: 100%;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        max-height: 85vh;
        padding: 1.25rem;
    }

    .dialog-actions {
        flex-direction: column-reverse;
    }

    .dialog-actions .btn {
        width: 100%;
    }

    /* ----------------------------------------------------------
       Toast - Full width
       ---------------------------------------------------------- */
    .toast-container {
        left: 0.5rem;
        right: 0.5rem;
        max-width: none;
    }

    /* ----------------------------------------------------------
       Scanner - Full width
       ---------------------------------------------------------- */
    .scanner-input-group {
        flex-direction: column;
    }

    .camera-btn {
        width: 100%;
    }

    .camera-scan-zone {
        width: 85vw;
        height: 55vw;
        max-width: 320px;
        max-height: 200px;
    }

    /* ----------------------------------------------------------
       Picking - Optimized for mobile
       ---------------------------------------------------------- */
    .picking-item {
        flex-wrap: wrap;
        padding: 0.875rem;
    }

    .picking-item-info {
        flex-basis: calc(100% - 100px);
    }

    .picking-quantity {
        font-size: 1.75rem;
        min-width: 100%;
        margin-top: 0.5rem;
    }

    .order-info-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.375rem;
    }

    .confirm-area {
        padding: 0.75rem 0;
    }

    /* ----------------------------------------------------------
       Week Selector - Stacked on mobile
       ---------------------------------------------------------- */
    .week-selector {
        flex-wrap: wrap;
        justify-content: center;
    }

    .week-display {
        flex-basis: 100%;
        text-align: center;
        order: -1;
        margin-bottom: 0.5rem;
    }

    .sync-btn {
        width: 100%;
        margin-left: 0;
    }

    /* ----------------------------------------------------------
       Order Detail Panel
       ---------------------------------------------------------- */
    .order-detail-panel {
        padding: 1rem;
    }

    .detail-header {
        flex-direction: column;
        align-items: stretch;
    }

    .detail-actions {
        flex-direction: column;
    }

    .detail-actions .btn {
        width: 100%;
    }

    .detail-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    /* ----------------------------------------------------------
       Login
       ---------------------------------------------------------- */
    .login-container {
        min-height: calc(100vh - 48px);
        align-items: flex-start;
        padding-top: 2rem;
    }

    .login-card {
        padding: 1.5rem 1.25rem;
        box-shadow: none;
        border: 1px solid var(--border);
    }

    /* ----------------------------------------------------------
       Code Display
       ---------------------------------------------------------- */
    .generated-code {
        font-size: 2rem;
    }

    /* ----------------------------------------------------------
       Visibility Helpers
       ---------------------------------------------------------- */
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
    }

    span.mobile-only,
    a.mobile-only,
    button.mobile-only {
        display: inline !important;
    }
}

/* ----------------------------------------------------------
   Extra small screens (< 400px)
   ---------------------------------------------------------- */
@media screen and (max-width: 399px) {
    .btn {
        font-size: 1rem;
        padding: 0.75rem 1rem;
    }

    .form-input {
        font-size: 1rem;
    }

    .picking-quantity {
        font-size: 1.5rem;
    }

    .generated-code {
        font-size: 1.5rem;
        letter-spacing: 0.2em;
    }

    .login-card {
        padding: 1.25rem 1rem;
    }
}