/* ============================================================
   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
       Cible .data-table, .stock-table et .responsive-table.
       Les libellés (td::before) viennent de l'attribut data-label posé
       automatiquement par public/js/utils/responsive-table.js.
       ---------------------------------------------------------- */
    .data-table thead,
    .stock-table thead,
    .responsive-table thead {
        display: none;
    }

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

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

    /* Neutralisation du zébrage desktop en mode carte : chaque ligne paire
       reste une carte blanche (sinon une carte sur deux hériterait du fond gris
       #EEEEEE). La spécificité de nth-child(even) prime sur la règle `tr`
       ci-dessus → on la ré-annule explicitement. */
    .data-table tbody tr:nth-child(even),
    .stock-table tbody tr:nth-child(even),
    .responsive-table tbody tr:nth-child(even) {
        background-color: var(--surface);
    }

    /* Pas de lignes verticales en mode carte (les cellules sont empilées). */
    .data-table th:not(:last-child),
    .data-table td:not(:last-child),
    .stock-table th:not(:last-child),
    .stock-table td:not(:last-child),
    .responsive-table th:not(:last-child),
    .responsive-table td:not(:last-child) {
        border-right: none;
    }

    .data-table td,
    .stock-table td,
    .responsive-table td {
        padding: 0.375rem 0.75rem;
        border-bottom: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .data-table td + td,
    .stock-table td + td,
    .responsive-table td + td {
        border-top: 1px solid #f1f5f9;
    }

    .data-table td::before,
    .stock-table td::before,
    .responsive-table td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.72rem;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.02em;
        flex-shrink: 0;
    }

    /* Cellule contenant un contrôle (bouton/input) : libellé conservé, le bloc
       de contrôle peut passer à la ligne sans déborder (variante A — boutons
       compacts près du libellé). */
    .data-table td.mobile-cell-has-controls,
    .stock-table td.mobile-cell-has-controls,
    .responsive-table td.mobile-cell-has-controls {
        row-gap: 0.4rem;
    }

    /* Cellule sans valeur (continuation d'une ligne multi-marques) : masquée
       pour ne pas afficher un libellé orphelin. */
    .data-table td.cell-empty,
    .stock-table td.cell-empty,
    .responsive-table td.cell-empty {
        display: none;
    }

    /* Cellule pleine largeur (colspan : message « vide », ligne de détail
       dépliée) : pas de libellé ni de mise en page label/valeur. */
    .data-table td[colspan],
    .stock-table td[colspan],
    .responsive-table td[colspan] {
        display: block;
    }
    .data-table td[colspan]::before,
    .stock-table td[colspan]::before,
    .responsive-table td[colspan]::before {
        content: none;
    }

    /* ----------------------------------------------------------
       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;
    }
}