/* FOBAK V129.6.72 — Audit UI Responsive: Accueil + Dashboard Mobile
   CSS ONLY — Pas de JS destructif, pas de duplication des handlers existants.
   Cible: Accueil public + Dashboard mobile (320-480 / tablette)
   Problèmes corrigés:
   - Navigation publique mobile: espaces padding/margin
   - Panneau recherche header: z-index, ouverture sans masquage
   - Header trop envahissement: hauteur réduite, padding optimisé
   - Marges cartes dashboard: espacements uniformes
   - Barre communiqués fixe: z-index + padding-bottom adapté
   - Débordements horizontaux: overflow-x hidden
   - Z-index hiérarchie: clarification CSS
   - Sticky positioning: scroll-padding-top
   - Responsive 320-480: media queries précis
   - Boutons, formulaires, modals: spacing corrigé
   - Sidebar, topbar, notifications: padding/gaps
   - Espaces fantômes: suppression ciblée (non globale)
   NOTA: CSS ciblé uniquement. Zéro changement DB/logique/migrations.
*/

/* ============================================================
   1. CORRECTIFS HIÉRARCHIE Z-INDEX CSS
   ============================================================ */
:root {
  --z-watermark: -1;
  --z-page-bg: 0;
  --z-page-content: 1;
  --z-sticky-elements: 10;
  --z-modals-backdrop: 100;
  --z-modals: 101;
  --z-notifications: 110;
  --z-tooltips: 120;
  --z-dropdown-menus: 130;
  --z-search-panel: 140;
  --z-topbar-fixed: 150;
  --z-mobile-menu-toggle: 160;
  --z-mobile-menu-overlay: 170;
  --z-mobile-menu: 180;
  --z-page-loader: 9999;
}

/* ============================================================
   2. SUPPRESSION ESPACES FANTÔMES - CIBLÉE
   ============================================================ */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

body.public-layout {
  padding-bottom: 0 !important;
}

body.admin-layout {
  padding-bottom: 0 !important;
}

/* Suppression ciblée des espaces réservés: première charge de wrappers */
.public-content > :first-child,
.workspace-content > :first-child,
.home-premium-v129663 > :first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ============================================================
   3. HEADER PUBLIC: RÉDUCTION ENVAHISSEMENT
   ============================================================ */
@media screen and (max-width: 860px) {
  .site-header.public-header {
    padding: 6px 8px !important;
    gap: 6px !important;
    min-height: auto !important;
  }

  .site-header.public-header .brand-block strong {
    font-size: 13px !important;
  }

  .site-header.public-header .brand-block span,
  .site-header.public-header .brand-block em {
    font-size: 9px !important;
  }

  .site-header.public-header .logo-box {
    width: 40px !important;
    height: 40px !important;
  }

  .site-header.public-header .flag-mini {
    width: 48px !important;
    height: 32px !important;
  }
}

/* ============================================================
   4. NAVIGATION MOBILE: ESPACES INTERNE
   ============================================================ */
@media screen and (max-width: 860px) {
  /* Menu burger toggle */
  #mobile-sidebar-toggle,
  .mobile-sidebar-toggle,
  [aria-controls="public-main-nav"] {
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Drawer menu: largeur max, padding interne */
  #main-sidebar,
  .side-dashboard,
  #public-main-nav,
  .top-nav.public-nav {
    width: min(85vw, 320px) !important;
    padding: 12px 8px !important;
    margin: 0 !important;
  }

  /* Items menu mobile: spacing régulier */
  .side-menu a,
  #public-main-nav a,
  .top-nav.public-nav a {
    padding: 12px 12px !important;
    margin: 0 !important;
    gap: 8px !important;
  }

  /* Séparation items */
  .side-menu a:not(:first-child),
  #public-main-nav a:not(:first-child),
  .top-nav.public-nav a:not(:first-child) {
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  }
}

/* ============================================================
   5. BARRE COMMUNIQUÉS: Z-INDEX + PADDING-BOTTOM
   ============================================================ */
.communique-ticker {
  z-index: var(--z-topbar-fixed) !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 28px !important;
  padding: 0 12px !important;
}

/* Ticker track ne doit PAS être fixe; reste dans le flux du ticker */
.ticker-track {
  position: relative !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  flex: 1 !important;
}

/* Réserver l'espace du ticker au body pour ne pas masquer le contenu */
body.public-layout.has-ticker,
body.admin-layout.has-ticker {
  padding-bottom: 28px !important;
}

/* Contenu ne doit pas être masqué par le ticker */
.workspace-content.has-ticker,
.public-content.has-ticker,
.main-content.has-ticker {
  padding-bottom: 40px !important;
}

/* ============================================================
   6. PANNEAU RECHERCHE ADMIN: POSITIONNEMENT + Z-INDEX
   ============================================================ */
.side-menu-search {
  position: relative !important;
  z-index: var(--z-sticky-elements) !important;
  display: flex !important;
  gap: 6px !important;
  margin-bottom: 10px !important;
  padding: 0 !important;
}

#side-menu-search-input {
  flex: 1 !important;
  z-index: var(--z-sticky-elements) !important;
}

#side-menu-search-results,
.side-search-results {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  z-index: var(--z-dropdown-menus) !important;
  max-height: 380px !important;
  overflow-y: auto !important;
  margin-top: 4px !important;
  padding: 6px 0 !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18) !important;
  border-radius: 10px !important;
  display: block !important;
}

#side-menu-search-results[hidden],
.side-search-results[hidden] {
  display: none !important;
}

/* Global search form topbar */
.global-search-form {
  position: relative !important;
  z-index: var(--z-sticky-elements) !important;
  display: flex !important;
  flex: 1 !important;
  max-width: 400px !important;
}

.advanced-search-field {
  position: relative !important;
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.advanced-search-field input {
  flex: 1 !important;
  z-index: var(--z-sticky-elements) !important;
}

.advanced-search-results {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  z-index: var(--z-dropdown-menus) !important;
  max-height: 400px !important;
  overflow-y: auto !important;
  margin-top: 4px !important;
  padding: 6px 0 !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18) !important;
  border-radius: 10px !important;
}

.advanced-search-results[hidden] {
  display: none !important;
}

/* Scroll padding pour sticky header */
html {
  scroll-behavior: smooth !important;
  scroll-padding-top: 80px !important;
}

@media screen and (max-width: 860px) {
  html {
    scroll-padding-top: 70px !important;
  }
}

/* ============================================================
   7. TOPBAR ADMIN FIXE: HAUTEUR EXACTE
   ============================================================ */
@media screen and (max-width: 860px) {
  .workspace-topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: var(--z-topbar-fixed) !important;
    height: auto !important;
    min-height: 70px !important;
    max-height: 120px !important;
    margin: 0 !important;
    padding: 6px 8px 6px 58px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .workspace-topbar .workspace-welcome strong {
    font-size: 14px !important;
  }

  .workspace-topbar .top-actions {
    gap: 4px !important;
  }

  .workspace-topbar .top-actions > a {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
  }

  /* Contenu décalé sous topbar fixe */
  .workspace-content,
  .main-content.workspace-content {
    position: relative !important;
    margin-top: 0 !important;
    padding-top: 82px !important;
    box-sizing: border-box !important;
  }
}

@media screen and (max-width: 420px) {
  .workspace-topbar {
    min-height: 66px !important;
    max-height: 110px !important;
    padding: 6px 6px 6px 56px !important;
  }

  .workspace-content {
    padding-top: 78px !important;
  }
}

/* ============================================================
   8. SIDEBAR MOBILE: DRAWER PADDING
   ============================================================ */
@media screen and (max-width: 860px) {
  .side-dashboard {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: min(85vw, 320px) !important;
    height: 100dvh !important;
    z-index: var(--z-mobile-menu) !important;
    margin: 0 !important;
    padding: 10px 8px !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  .side-menu {
    gap: 4px !important;
    padding-right: 3px !important;
    margin-bottom: 8px !important;
  }

  .side-menu a {
    padding: 10px 10px !important;
    font-size: 13px !important;
  }

  .side-brand {
    gap: 8px !important;
    margin: 10px 0 12px !important;
  }

  .side-logo {
    width: 42px !important;
    height: 42px !important;
  }
}

/* ============================================================
   9. CARTES DASHBOARD: MARGES UNIFORMES
   ============================================================ */
.kpi-card,
.panel-card,
.stat,
.card,
.activity-card,
.home-news-card,
.home-premium-quicklinks a {
  margin: 0 !important;
  padding: 14px 12px !important;
  gap: 12px !important;
  box-sizing: border-box !important;
}

.kpi-grid,
.dashboard-panels,
.activity-grid,
.home-activities-grid,
.home-premium-quicklinks {
  gap: 12px !important;
  margin: 12px 0 !important;
}

/* ============================================================
   10. HOME QUICKLINKS: CARTES ESPACÉES MOBILE
   ============================================================ */
.home-premium-quicklinks {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-inline: auto !important;
  width: min(1180px, calc(100% - 32px)) !important;
}

.home-premium-quicklinks a {
  min-height: 110px !important;
  padding: 16px 12px !important;
  border: 1px solid rgba(23, 95, 157, 0.12) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.93) !important;
  text-decoration: none !important;
  color: inherit !important;
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  column-gap: 10px !important;
  align-content: center !important;
  transition: 0.2s ease !important;
}

.home-premium-quicklinks a > span {
  grid-row: 1 / 3 !important;
  font-size: 1.4rem !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  background: #edf6fc !important;
  display: grid !important;
  place-items: center !important;
}

.home-premium-quicklinks strong {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

.home-premium-quicklinks small {
  color: #667085 !important;
  font-size: 0.8rem !important;
  margin: 0 !important;
}

@media screen and (max-width: 820px) {
  .home-premium-quicklinks {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: calc(100% - 24px) !important;
  }

  .home-premium-quicklinks a {
    min-height: 90px !important;
    padding: 12px 10px !important;
    border-radius: 16px !important;
  }

  .home-premium-quicklinks a > span {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.2rem !important;
  }

  .home-premium-quicklinks strong {
    font-size: 0.9rem !important;
  }
}

@media screen and (max-width: 480px) {
  .home-premium-quicklinks {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: calc(100% - 16px) !important;
  }

  .home-premium-quicklinks a {
    min-height: 75px !important;
    padding: 10px 8px !important;
    border-radius: 14px !important;
  }

  .home-premium-quicklinks a > span {
    width: 38px !important;
    height: 38px !important;
    font-size: 1.1rem !important;
  }

  .home-premium-quicklinks strong {
    font-size: 0.85rem !important;
  }

  .home-premium-quicklinks small {
    font-size: 0.75rem !important;
  }
}

/* ============================================================
   11. FORMULAIRES ET FILTRES: ESPACES
   ============================================================ */
.form {
  gap: 10px !important;
  padding: 0 !important;
}

.form label {
  margin-top: 0 !important;
  margin-bottom: 4px !important;
  display: block !important;
}

.form input,
.form select,
.form textarea,
.filters input,
.filters select {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 9px 10px !important;
  box-sizing: border-box !important;
}

.filters {
  gap: 8px !important;
  margin: 10px 0 !important;
}

/* ============================================================
   12. BOUTONS: PADDING RÉGULIER
   ============================================================ */
.btn,
button[type="submit"],
button[type="button"] {
  padding: 9px 12px !important;
  gap: 6px !important;
  margin: 0 !important;
  border-radius: 10px !important;
  min-height: 36px !important;
}

.btn.small {
  padding: 6px 10px !important;
  font-size: 11px !important;
}

/* ============================================================
   13. OVERFLOW-X: PRÉVENTION DÉBORDEMENTS
   ============================================================ */
.table-wrap {
  overflow-x: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  -webkit-overflow-scrolling: touch !important;
}

table {
  min-width: 100% !important;
  table-layout: auto !important;
  box-sizing: border-box !important;
}

@media screen and (max-width: 860px) {
  table {
    font-size: 12px !important;
  }

  th, td {
    padding: 8px 6px !important;
    max-width: 80px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* ============================================================
   14. STICKY POSITIONING: VALEURS
   ============================================================ */
.sticky-header,
.sticky-nav,
.sticky-topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: var(--z-sticky-elements) !important;
  background: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================================
   15. RESPONSIVE 320-480px (TRÈS PETIT MOBILE)
   ============================================================ */
@media screen and (max-width: 480px) {
  /* STRUCTURES */
  .app-shell {
    grid-template-columns: 1fr !important;
  }

  /* HEADER */
  .site-header.public-header {
    padding: 5px 6px !important;
    gap: 5px !important;
  }

  .site-header.public-header .logo-box {
    width: 36px !important;
    height: 36px !important;
  }

  .site-header.public-header .brand-block strong {
    font-size: 11px !important;
  }

  /* PANELS */
  .kpi-grid,
  .dashboard-panels,
  .dashboard-head,
  .public-info-strip {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .kpi-card,
  .panel-card,
  .card,
  .activity-card {
    padding: 11px 8px !important;
    border-radius: 12px !important;
  }

  .kpi-icon {
    width: 48px !important;
    height: 48px !important;
    font-size: 22px !important;
  }

  /* TABLEAU */
  th, td {
    padding: 7px 5px !important;
  }

  /* FORMULAIRES */
  .form {
    gap: 8px !important;
  }

  .form input,
  .form select,
  .form textarea {
    padding: 8px 8px !important;
    font-size: 14px !important;
  }

  .checkbox-grid {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 8px !important;
  }

  /* FLEX/GAP */
  .actions-row,
  .admin-menu,
  .flex-wrap {
    gap: 6px !important;
  }
}

/* ============================================================
   16. RESPONSIVE 481-800px (TABLETTE)
   ============================================================ */
@media screen and (481px <= width <= 800px) {
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .dashboard-panels {
    grid-template-columns: 1fr 1fr !important;
  }

  .dashboard-head {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .home-premium-quicklinks {
    grid-template-columns: 1fr 1fr !important;
  }

  .home-activities-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .home-social-video-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .filters {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .form-signatures {
    grid-template-columns: 1fr 1fr !important;
  }

  .workspace-topbar {
    padding: 6px 8px 6px 56px !important;
    min-height: 68px !important;
  }

  .workspace-content {
    padding: 80px 12px 28px !important;
  }
}

/* ============================================================
   17. IMPRESSION: MASQUAGE ÉLÉMENTS NON-IMPRIMABLES
   ============================================================ */
@media print {
  .communique-ticker,
  .mobile-sidebar-toggle,
  .site-header,
  .top-nav,
  .workspace-topbar,
  .side-dashboard,
  .fixed-footer,
  .pro-footer,
  .no-print {
    display: none !important;
  }

  body {
    padding: 0 !important;
    margin: 0 !important;
  }

  .workspace-content,
  .public-content,
  .main-content {
    padding: 0 !important;
    margin: 0 !important;
  }
}