/* Styles de base pour les conteneurs */
.quantity-container { 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
}
.order-quantity { 
    width: 80px; 
    margin-bottom: 5px; 
}
.quantity-unit { 
    display: block; 
    font-size: 12px; 
    color: #555; 
}
.tulipwork-orderstock-table input[type="number"] {
    width: 90px;
}

/* Styles pour les filtres (commun à toutes les pages admin) */
.order-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px 0;
    align-items: center;
    box-sizing: border-box;
    padding-right:20px;
}

.order-filters form {
    margin: 0;
    padding: 14px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    min-width: 250px;
    max-width: 100%;
    flex: 1 0 auto;
}

.order-filters label {
    margin: 0;
    font-weight: bold;
    color: #333;
}

.order-filters select, 
.order-filters input[type="number"], 
.order-filters input[type="date"] { /* Ajout pour "Reports" */
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
}

.order-filters input[type="submit"] {
    padding: 5px 10px;
    background: #2271b1;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.order-filters input[type="submit"]:hover {
    background: #135e96;
    color: white !important;
}

.order-filters small {
    font-size: 12px;
    color: #666;
    margin-left: 10px;
}

/* Styles spécifiques à Pro/multistore */
.multistore-enabled .order-filters .orderstock-pro-notice {
    color: #d63638;
    font-weight: bold;
    margin: 0;
    padding: 14px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: flex;
    align-items: center;
    min-width: 250px;
    flex: 1 0 auto;
    padding-right: 14px;
}

/* Styles pour les tableaux */
.tulipwork-orderstock-table {
    margin-top: 20px;
}

/* Notifications génériques */
.orderstock-notice {
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 14px;
}

.orderstock-notice--success {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #3c763d;
}

.orderstock-notice--error {
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442;
}

.orderstock-notice--warning {
    background-color: #fcf8e3;
    border-color: #faebcc;
    color: #8a6d3b;
}

.orderstock-notice__inner-warning {
    margin-top: 10px;
    padding: 8px;
    background-color: #fcf8e3;
    border: 1px solid #faebcc;
    color: #8a6d3b;
    font-size: 0.9em;
}

/* Info spécifique (ex. order-calc-info) */
.orderstock-info {
    margin-bottom: 15px;
    font-style: italic;
    color: #555;
}

#trend_score {
    width: 100px;
}

/* Media query pour petits écrans */
@media (max-width: 600px) {
    /* Colonnes à cacher pour Stock Page */
    .stock-page-categories,
    .stock-page-supplier {
        display: none;
    }

    /* Colonnes à cacher pour Place an Order */
    .order-page-categories,
    .order-page-packaging,
    .order-page-calc-mode,
    .order-page-supplier,
    .order-page-price-excl-tax {
        display: none;
    }

    /* Maintenir les règles existantes pour les totaux */
    .wp-list-table th.total-excl-tax,
    .wp-list-table td.total-excl-tax,
    .wp-list-table th.total-incl-tax,
    .wp-list-table td.total-incl-tax {
        display: none;
    }

    .order-quantity {
        width: 70px;
    }
    .recap-table {
        width: 100%;
    }
    .tulipwork-orderstock-table input[type="number"] {
        width: 80px;
    }

    .order-filters {
        flex-direction: column;
        gap: 15px;
        padding-right:15px;
    }

    .order-filters form, 
    .order-filters p,
    .multistore-enabled .order-filters .orderstock-pro-notice {
        width: calc(100% - 15px);
        min-width: 0;
        flex-wrap: wrap;
    }

    .order-filters select, 
    .order-filters input[type="number"],
    .order-filters input[type="date"] {
        width: 100%;
    }

    .order-filters input[type="submit"] {
        width: auto;
    }

    .order-filters small {
        margin-left: 0;
        width: 100%;
    }

    .order-filters label[for="store"],
    .order-filters #store {
        flex: 0 0 100%; /* Prend toute la largeur */
        max-width: 100%; /* S'assure qu'il ne dépasse pas */
    }
    /* Styles pour Supplier */
    .order-filters label[for="supplier"],
    .order-filters #supplier {
        flex: 0 0 100%; /* Prend toute la largeur */
        max-width: 100%; /* S'assure qu'il ne dépasse pas */
    }
    #trend_score {
        width: 100%;
    }
}

.order-filters .filter-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

.order-filters .filter-group label {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.order-filters .filter-group select,
.order-filters .filter-group input[type="date"] {
    width: 100%;
    max-width: 200px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.order-filters .filter-submit {
    text-align: right;
}

@media (max-width: 600px) {
    .order-filters .filter-group {
        margin-bottom: 10px;
    }
    .order-filters .filter-submit {
        text-align: left;
    }
}

.settings-content {
    background: #fff;
    padding: 25px;
    border: 1px solid #ccd0d4;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    margin-bottom: 30px;
    margin-top: 10px;
}

/* WordPress 7.1 : le CSS responsive du cœur (list-tables.css) passe toutes les
   lignes de .wp-list-table en display:flex + flex-wrap sous 782px, même pour
   les tableaux sans le balisage responsive du cœur (column-primary /
   data-colname) — ce que nos tableaux n'utilisent pas. Résultat : sur mobile,
   chaque cellule s'empilait sur sa propre ligne pleine largeur (pages Commande,
   Stock, historique, etc.) sous une rangée d'en-têtes restée horizontale.
   On rétablit le rendu tableau ; les colonnes secondaires restent masquées par
   les règles ≤600px ci-dessus. table.wp-list-table (spécificité 0,1,2) bat le
   .wp-list-table tr (0,1,1) du cœur quel que soit l'ordre de chargement. */
@media screen and (max-width: 782px) {
    table.wp-list-table tr {
        display: table-row;
    }
}