/* ============================================================
   OBSIDIAN mobile overrides — loaded AFTER the Tailwind bundle
   Fixes layout breakage on <= 768px viewports.
   ============================================================ */

/* --- Hide /api-docs link for non-admin users (all viewports) --- */
html:not([data-role="admin"]) a[href="/api-docs"],
html:not([data-role="admin"]) a[href^="/api-docs/"] {
  display: none !important;
}


@media (max-width: 768px) {

  /* --- Global: enable natural scroll + prevent horizontal overflow --- */
  html, body { overflow-x: hidden !important; }
  body > div, .h-screen { height: auto !important; min-height: 100vh !important; overflow: visible !important; }
  .overflow-hidden { overflow: visible !important; }

  /* --- Verified / vouch cards: stack boutique + pills + stats vertically --- */
  div[class*="rounded-xl"][class*="flex"][class*="items-center"][class*="px-5"][class*="py-4"] {
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 14px 14px !important;
    align-items: flex-start !important;
  }
  div[class*="rounded-xl"][class*="flex"][class*="items-center"][class*="px-5"][class*="py-4"] > .flex-1 {
    flex-basis: 100% !important;
    min-width: 0 !important;
  }
  /* Pills row goes full width under name */
  div[class*="flex"][class*="flex-wrap"][class*="max-w-\[200px\]"] {
    max-width: 100% !important;
    justify-content: flex-start !important;
    flex-basis: 100% !important;
  }
  /* MAX / Dernier stats become inline chips */
  div[class*="rounded-xl"][class*="flex"][class*="items-center"] [class*="text-right"] {
    text-align: left !important;
  }

  /* --- Merchants list: filter sidebar collapses --- */
  /* Hide inline sidebar on narrow, let user tap a trigger — if sidebar is left column of a grid */
  main [class*="grid-cols-"][class*="md:"],
  main [class*="flex"][class*="flex-row"] {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }
  aside, [class*="w-72"], [class*="w-80"], [class*="w-\[280px\]"], [class*="w-\[320px\]"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* --- Tables: let their existing overflow-x-auto wrapper handle it --- */
  div.overflow-x-auto > table { min-width: max-content; }

  /* --- Fixed bottom nav: compact labels, equal share --- */
  nav[class*="fixed"][class*="bottom-0"],
  div[class*="fixed"][class*="bottom-0"][class*="border-t"] {
    padding: 6px 2px !important;
    gap: 0 !important;
  }
  nav[class*="fixed"] button span,
  nav[class*="fixed"] a span,
  div[class*="fixed"][class*="bottom-0"] button span,
  div[class*="fixed"][class*="bottom-0"] a span {
    font-size: 8.5px !important;
    letter-spacing: 0 !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }
  nav[class*="fixed"] button,
  nav[class*="fixed"] a,
  div[class*="fixed"][class*="bottom-0"] button,
  div[class*="fixed"][class*="bottom-0"] a {
    min-width: 0 !important;
    padding: 6px 2px !important;
    flex: 1 1 0 !important;
    overflow: hidden !important;
    gap: 2px !important;
  }
  /* Compact KNOWLEDGE badge (loses pill padding on mobile) */
  nav[class*="fixed"] [class*="rounded-full"],
  div[class*="fixed"][class*="bottom-0"] [class*="rounded-full"] {
    padding: 4px 6px !important;
    font-size: 8.5px !important;
  }

  /* --- /merchants: liste AVANT filtres sur mobile --- */
  /* The merchants layout is sidebar (filters) + list; flip order */
  main > div[class*="flex"] > aside,
  main [class*="flex-col"] > [class*="w-72"],
  main [class*="flex-col"] > [class*="w-80"] {
    order: 2 !important;
  }
  main > div[class*="flex"] > :not(aside),
  main [class*="flex-col"] > [class*="flex-1"] {
    order: 1 !important;
  }

  /* --- Search inputs: shrink padding so placeholder fits --- */
  input[placeholder*="Rechercher"] {
    font-size: 12px !important;
    padding-left: 24px !important;
  }

  /* --- Hero stat grids: force 2 or 1 col --- */
  [class*="grid-cols-3"]:not([class*="md:"]):not([class*="sm:"]),
  [class*="grid-cols-4"],
  [class*="grid-cols-5"],
  [class*="grid-cols-6"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* --- Signals page: 2-col layout (taxonomy + list) stacks --- */
  main > div[class*="grid"][class*="grid-cols-"] {
    grid-template-columns: 1fr !important;
  }

  /* --- Login card: shrink badge "ORACLE SHIELD" --- */
  [class*="rounded"][class*="border"][class*="amber"] [class*="text-[8px]"],
  [class*="rounded"][class*="border"][class*="amber"] [class*="text-[9px]"] {
    font-size: 7px !important;
    line-height: 1.2 !important;
  }

  /* --- Modal / drawer sheets: full width --- */
  [role="dialog"], [class*="max-w-["] {
    max-width: 100% !important;
  }

  /* --- Prevent fixed-width search bar overflow --- */
  [class*="w-\[420px\]"] { width: 100% !important; max-width: 100% !important; }

  /* --- Export / action buttons at list bottom: wrap --- */
  div[class*="border-t"][class*="flex"][class*="items-center"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* --- Readable minimum font --- */
  body { -webkit-text-size-adjust: 100%; }

  /* --- Admin panel: sidebar becomes horizontal tabs top --- */
  nav[class*="w-44"][class*="border-r"] {
    width: 100% !important;
    height: auto !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-right: 0 !important;
    border-bottom: 1px solid #1e1e1e !important;
    padding: 6px 8px !important;
    gap: 4px !important;
    scrollbar-width: none;
  }
  nav[class*="w-44"][class*="border-r"]::-webkit-scrollbar { display: none; }
  nav[class*="w-44"][class*="border-r"] > * {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  /* Parent container stacks vertical */
  div.relative.z-10.flex.flex-1 {
    flex-direction: column !important;
  }
  /* Main content full width + reduced padding */
  main.flex-1.p-8,
  main[class*="flex-1"][class*="p-8"] {
    padding: 16px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* --- Admin header: hide "ADMIN PANEL <user>" branding mobile (header too crowded) --- */
  header > div:last-child,
  header [class*="ADMIN"] {
    max-width: 110px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 10px !important;
  }
  header { overflow: hidden !important; }
  header > * { min-width: 0 !important; }

  /* --- Admin tables: condensed, parent handles scroll --- */
  main table { font-size: 11px !important; }
  main table th, main table td {
    padding: 8px 10px !important;
    white-space: nowrap !important;
  }

  /* --- Button "Nouveau client" that overflows: wrap --- */
  main [class*="flex"][class*="justify-between"] {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  main button[class*="whitespace-nowrap"] {
    white-space: normal !important;
  }
}

/* --- Tablet refinements --- */
@media (min-width: 641px) and (max-width: 1023px) {
  nav[class*="fixed"][class*="bottom-0"] span,
  div[class*="fixed"][class*="bottom-0"] a span {
    font-size: 10px !important;
  }
}