/* ============================================================
   LBWO — Responsive CSS
   ============================================================ */

/* ── Viewport meta safety (au cas où le thème l'oublie) ── */
/* Note : le meta viewport doit être ajouté côté PHP si absent */

@media (max-width: 768px) {

  /* ────────────────────────────────────────────────────────
     DASHBOARD — Structure principale
     ──────────────────────────────────────────────────────── */
  .lbwo-dashboard {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    min-height: unset;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  /* Sidebar → barre horizontale de navigation en haut */
  .lbwo-dashboard__nav {
    border-right: none;
    border-bottom: 2px solid var(--lbwo-border);
    padding: 8px 0 0;
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--lbwo-white);
  }

  .lbwo-dashboard__brand {
    display: none; /* Masqué sur mobile — la boutique est visible dans le contenu */
  }

  .lbwo-dashboard__footer-links {
    display: none; /* Masqué dans la sidebar mobile */
  }

  /* Menu horizontal scrollable */
  .lbwo-dashboard__menu {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0;
    padding: 0 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE/Edge */
  }
  .lbwo-dashboard__menu::-webkit-scrollbar { display: none; }

  .lbwo-dashboard__menu li {
    flex-shrink: 0;
  }

  .lbwo-dashboard__menu-item {
    padding: 10px 12px 12px;
    font-size: .78rem;
    white-space: nowrap;
    border-right: none;
    border-bottom: 3px solid transparent;
    flex-direction: column;
    gap: 3px;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    text-align: center;
    border-radius: 0;
  }

  .lbwo-dashboard__menu-item:hover {
    background: var(--lbwo-bg);
    border-bottom-color: var(--lbwo-green);
  }

  .lbwo-dashboard__menu-item.is-active {
    border-right: none;
    border-bottom: 3px solid var(--lbwo-green);
    background: var(--lbwo-green-light);
    color: var(--lbwo-green-dark);
  }

  .lbwo-dashboard__menu-icon {
    font-size: 1.3rem;
    display: block;
  }

  /* Badge de notification dans le menu */
  .lbwo-dashboard__menu-item .lbwo-badge-count {
    position: absolute;
    top: 6px;
    right: 6px;
    margin-left: 0;
  }

  .lbwo-dashboard__menu-item {
    position: relative;
  }

  /* Contenu principal */
  .lbwo-dashboard__content {
    padding: 14px;
    overflow-y: visible;
  }

  /* Liens footer en bas du contenu sur mobile */
  .lbwo-dashboard__mobile-footer {
    display: flex;
    gap: 16px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--lbwo-border);
    flex-wrap: wrap;
  }
  .lbwo-dashboard__mobile-footer a {
    font-size: .82rem;
    color: var(--lbwo-muted);
    text-decoration: none;
  }
  .lbwo-dashboard__mobile-footer a:hover { color: var(--lbwo-green); }

  /* ────────────────────────────────────────────────────────
     FORMULAIRES — Colonne unique
     ──────────────────────────────────────────────────────── */
  .lbwo-form__row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .lbwo-form__group--2 {
    grid-column: span 1;
  }

  .lbwo-form__input,
  .lbwo-form__textarea,
  .lbwo-form__select {
    font-size: 16px; /* Évite le zoom auto sur iOS */
  }

  /* ────────────────────────────────────────────────────────
     VUE D'ENSEMBLE — Stats
     ──────────────────────────────────────────────────────── */
  .lbwo-stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
  }

  .lbwo-stat-card {
    padding: 14px 10px;
  }

  .lbwo-stat-card__value {
    font-size: 1.5rem;
  }

  .lbwo-stat-card__icon {
    font-size: 1.4rem;
    margin-bottom: 4px;
  }

  /* Quick actions */
  .lbwo-quick-actions__grid {
    gap: 8px;
  }

  .lbwo-quick-action-btn {
    font-size: .82rem;
    padding: 8px 12px;
  }

  /* ────────────────────────────────────────────────────────
     PRODUITS
     ──────────────────────────────────────────────────────── */
  .lbwo-tab-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .lbwo-tab-header .lbwo-btn {
    width: 100%;
    justify-content: center;
  }

  /* Liste produits en rows */
  .lbwo-product-row {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
  }

  .lbwo-product-row__info {
    flex: 1 1 calc(100% - 70px);
  }

  .lbwo-product-row__price {
    margin-left: 0;
  }

  .lbwo-product-row__actions {
    width: 100%;
    justify-content: flex-end;
    margin-top: 4px;
    gap: 8px;
  }

  .lbwo-product-row__actions .lbwo-btn {
    flex: 1;
    justify-content: center;
  }

  /* Grille produits (vue boutique publique) */
  .lbwo-product-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  /* Zone upload image produit */
  .lbwo-image-upload-zone {
    min-height: 100px;
  }

  /* ────────────────────────────────────────────────────────
     COMMANDES — Tableau scrollable
     ──────────────────────────────────────────────────────── */
  .lbwo-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -14px;
    padding: 0 14px;
  }

  .lbwo-table {
    min-width: 560px;
    font-size: .82rem;
  }

  .lbwo-table th,
  .lbwo-table td {
    padding: 8px 10px;
  }

  /* ────────────────────────────────────────────────────────
     PROFIL VENDEUR (dashboard)
     ──────────────────────────────────────────────────────── */
  .lbwo-form__section {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--lbwo-border);
  }

  /* Upload logo/cover côte à côte → empilés */
  .lbwo-image-upload {
    margin-bottom: 12px;
  }

  .lbwo-image-upload__preview--cover {
    height: 140px;
  }

  /* ────────────────────────────────────────────────────────
     PROFIL PUBLIC — Page boutique
     ──────────────────────────────────────────────────────── */
  .lbwo-profile__identity {
    flex-direction: column;
    align-items: flex-start;
    margin-top: -30px;
    gap: 8px;
  }

  .lbwo-profile__logo {
    width: 70px;
    height: 70px;
  }

  .lbwo-profile__name {
    font-size: 1.2rem;
  }

  .lbwo-profile__actions {
    flex-direction: column;
    gap: 8px;
  }

  .lbwo-profile__actions .lbwo-btn,
  .lbwo-profile__actions .lbwo-whatsapp-btn {
    width: 100%;
    justify-content: center;
  }

  .lbwo-profile__info-grid {
    grid-template-columns: 1fr;
  }

  /* ────────────────────────────────────────────────────────
     BADGES
     ──────────────────────────────────────────────────────── */
  .lbwo-badge-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .lbwo-badge-card {
    padding: 16px 10px;
  }

  .lbwo-badge-card__icon {
    font-size: 2rem;
  }

  /* ────────────────────────────────────────────────────────
     MESSAGES — Chat
     ──────────────────────────────────────────────────────── */
  .lbwo-chat {
    height: 340px;
  }

  .lbwo-chat__bubble {
    max-width: 88%;
  }

  /* Admin chat */
  .lbwo-admin-chat-layout {
    flex-direction: column;
  }

  .lbwo-admin-thread-list {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--lbwo-border);
    max-height: 180px;
    overflow-y: auto;
  }

  /* ────────────────────────────────────────────────────────
     ANNUAIRE VENDEURS
     ──────────────────────────────────────────────────────── */
  .lbwo-vendor-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  /* Barre de recherche */
  .lbwo-search-bar__inner {
    flex-direction: column;
    gap: 8px;
  }

  .lbwo-search-bar__field,
  .lbwo-search-bar__select,
  .lbwo-search-bar__btn {
    width: 100%;
  }

  /* ────────────────────────────────────────────────────────
     ADMIN STATS
     ──────────────────────────────────────────────────────── */
  .lbwo-admin-stats {
    grid-template-columns: 1fr 1fr;
  }

  .lbwo-admin-quick-links {
    flex-wrap: wrap;
  }

  /* ────────────────────────────────────────────────────────
     RADIO GROUP (formulaire commande)
     ──────────────────────────────────────────────────────── */
  .lbwo-radio-group {
    flex-direction: column;
    gap: 8px;
  }

  /* ────────────────────────────────────────────────────────
     NOTICES & CARDS
     ──────────────────────────────────────────────────────── */
  .lbwo-card {
    padding: 14px;
  }

  .lbwo-notice {
    font-size: .85rem;
    padding: 10px 14px;
  }

}

/* ── Très petits écrans (≤ 480px) ───────────────────────────────── */
@media (max-width: 480px) {

  .lbwo-dashboard__content {
    padding: 10px;
  }

  .lbwo-dashboard__menu-item {
    padding: 8px 10px 10px;
    font-size: .72rem;
    min-width: 48px;
  }

  .lbwo-dashboard__menu-icon {
    font-size: 1.15rem;
  }

  .lbwo-stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .lbwo-vendor-grid {
    grid-template-columns: 1fr;
  }

  .lbwo-product-grid {
    grid-template-columns: 1fr;
  }

  .lbwo-badge-grid {
    grid-template-columns: 1fr 1fr;
  }

  .lbwo-admin-stats {
    grid-template-columns: 1fr 1fr;
  }

  .lbwo-admin-quick-links {
    flex-direction: column;
  }

  .lbwo-profile__cover {
    height: 150px;
  }

  .lbwo-tab-title {
    font-size: 1.1rem;
  }

  .lbwo-product-card__name {
    font-size: .88rem;
  }

  .lbwo-product-card__price {
    font-size: .9rem;
  }

  /* Formulaire commande */
  .lbwo-order-form {
    padding: 16px;
  }

  /* Boutons d'action pleine largeur sur très petit écran */
  .lbwo-form__actions {
    flex-direction: column;
    gap: 8px;
  }

  .lbwo-form__actions .lbwo-btn {
    width: 100%;
    justify-content: center;
  }
}