/* ==========================================================================
   VOILÀ — Responsive & PWA fixes — v001.000.000 (2026-10-28, task T-079)
   1. Sidebar: every block keeps its natural height and the sidebar scrolls to the very bottom
      (plan badge, languages, IA ON/OFF, theme, legal links, version, user menu) on short screens.
   2. PWA iOS/Android (viewport-fit=cover + black-translucent status bar): safe-area padding so the
      hamburger and the mobile header never sit under the status bar / notch in portrait.
   3. "Fournisseur en surbrillance" banner: readable contrast in dark and light modes, mobile stacking.
   ========================================================================== */

/* 1. Sidebar — no squashed footer block ------------------------------------------------------- */
.v-sidebar[data-flux-sidebar] {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

/* Flex children with overflow-x:hidden get min-height:0 and were being compressed instead of
   overflowing. Keep their intrinsic height; only the spacer may grow. */
.v-sidebar[data-flux-sidebar] > * {
  flex-shrink: 0;
}

.v-sidebar[data-flux-sidebar] > [data-flux-spacer] {
  flex: 1 0 8px;
  min-height: 8px;
}

/* Room below the last element (user menu) + iOS home indicator */
.v-sidebar[data-flux-sidebar] {
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

/* 2. PWA / notch safe areas ------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  [data-flux-header] {
    position: sticky;
    top: 0;
    z-index: 30;
    min-height: calc(56px + env(safe-area-inset-top, 0px));
    padding-top: max(env(safe-area-inset-top, 0px), 8px);
    padding-left: max(env(safe-area-inset-left, 0px), 12px);
    padding-right: max(env(safe-area-inset-right, 0px), 12px);
    background: var(--v-sidebar, #0b1020);
    border-bottom: 1px solid var(--v-border, rgba(255, 255, 255, 0.08));
  }

  /* Bigger tap target for the hamburger (44 x 44 minimum) */
  [data-flux-header] [data-flux-sidebar-toggle],
  [data-flux-header] button:first-child {
    min-width: 44px;
    min-height: 44px;
  }

  /* Mobile drawer: close button and logo below the status bar */
  .v-sidebar[data-flux-sidebar] {
    padding-top: max(env(safe-area-inset-top, 0px), 12px);
    padding-left: max(env(safe-area-inset-left, 0px), 0px);
  }

  [data-flux-main] {
    padding-left: max(env(safe-area-inset-left, 0px), 1rem);
    padding-right: max(env(safe-area-inset-right, 0px), 1rem);
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  }
}

/* The sticky impersonation / notice bar must also clear the status bar on mobile */
@media (max-width: 1023.98px) {
  body > .sticky.top-0 {
    top: env(safe-area-inset-top, 0px);
  }
}

/* 3. Supplier highlight banner ---------------------------------------------------------------- */
.voila-supplier-highlight {
  border-width: 1px !important;
  border-color: rgba(217, 119, 6, 0.45) !important;
  background: linear-gradient(100deg, rgba(251, 191, 36, 0.16), rgba(251, 191, 36, 0.05) 55%, transparent) !important;
}

.voila-supplier-highlight .voila-supplier-highlight__label {
  color: #92400e;
  letter-spacing: 0.08em;
}

.voila-supplier-highlight .voila-supplier-highlight__name {
  color: var(--v-text, #0f172a);
}

.voila-supplier-highlight .voila-supplier-highlight__badge {
  border: 1px solid rgba(146, 64, 14, 0.35);
  background: rgba(251, 191, 36, 0.18);
  color: #78350f;
}

.voila-supplier-highlight .voila-supplier-highlight__text {
  color: var(--v-text-secondary, #334155);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.voila-supplier-highlight .voila-supplier-highlight__text strong {
  color: var(--v-text, #0f172a);
  font-weight: 700;
}

html.dark .voila-supplier-highlight,
[data-theme="dark"] .voila-supplier-highlight {
  border-color: rgba(251, 191, 36, 0.40) !important;
  background:
    linear-gradient(100deg, rgba(251, 191, 36, 0.14), rgba(251, 191, 36, 0.04) 60%, transparent),
    #141821 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 30px rgba(0, 0, 0, 0.35);
}

html.dark .voila-supplier-highlight .voila-supplier-highlight__label,
[data-theme="dark"] .voila-supplier-highlight .voila-supplier-highlight__label {
  color: #fcd34d;
}

html.dark .voila-supplier-highlight .voila-supplier-highlight__name,
[data-theme="dark"] .voila-supplier-highlight .voila-supplier-highlight__name {
  color: #ffffff;
}

html.dark .voila-supplier-highlight .voila-supplier-highlight__badge,
[data-theme="dark"] .voila-supplier-highlight .voila-supplier-highlight__badge {
  border-color: rgba(252, 211, 77, 0.45);
  background: rgba(252, 211, 77, 0.12);
  color: #fde68a;
}

html.dark .voila-supplier-highlight .voila-supplier-highlight__text,
[data-theme="dark"] .voila-supplier-highlight .voila-supplier-highlight__text {
  color: #d6dbe4;
}

html.dark .voila-supplier-highlight .voila-supplier-highlight__text strong,
[data-theme="dark"] .voila-supplier-highlight .voila-supplier-highlight__text strong {
  color: #ffffff;
}

.voila-supplier-highlight .voila-supplier-highlight__cta {
  color: #1c1917 !important;
  font-weight: 800;
}

@media (max-width: 639.98px) {
  .voila-supplier-highlight {
    padding: 1rem !important;
  }

  .voila-supplier-highlight .voila-supplier-highlight__actions,
  .voila-supplier-highlight .voila-supplier-highlight__cta {
    width: 100%;
  }

  .voila-supplier-highlight .voila-supplier-highlight__cta {
    justify-content: center;
    min-height: 44px;
  }
}