/* SyndicOS responsive enhancements (mobile-first additions)
   Scope: dashboard, documents, lots, appels de fonds, situation, assemblees, updates
   Desktop layout intentionally unchanged (min-width: 769px retains original styles)
*/

/* Utility: safe area padding on root containers when off-canvas & top bar present */
@media (max-width: 768px) {
  /* Force override of desktop fixed layout: make content flow full width */
  .index-content {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    margin: 0 !important;
  padding: 64px 14px 36px !important; /* slightly tighter side padding */
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important; /* let gradient from menu.php show through */
    min-height: 100vh;
    display: block !important;
    overflow: visible !important;
  }
  /* Remove inner spacing assumptions used for centered layout */
  .index-content .grid { width: 100% !important; margin: 0 !important; }
  .modern-section { margin-bottom: 24px; }
  /* Prevent horizontal shift when sidebar opens; content inert */
  body.sidebar-open .index-content { filter: blur(0); }
  body { -webkit-font-smoothing: antialiased; }
  .index-content { padding-top: 68px; }
  body.sidebar-open .index-content { pointer-events: none; } /* avoid accidental taps under scrim */

  /* Page-specific classes: ensure no horizontal scroll leaks */
  body.page-meslots, body.page-appelsdefonds, body.page-masituation, body.page-assemblees { overflow-x:hidden !important; }
  body.page-meslots .overview-waves .wave,
  body.page-appelsdefonds .overview-waves .wave,
  body.page-masituation .overview-waves .wave,
  body.page-assemblees .overview-waves .wave { width:130% !important; }

  /* ===== Ma situation (page-masituation) specific ===== */
  body.page-masituation .modern-section.section-overview { 
    height: auto !important; 
    min-height: 0 !important; 
    max-height: none !important; 
    padding-bottom: 28px !important; 
  }
  body.page-masituation .modern-section.section-overview .overview-inner { 
    position: relative; 
    min-height: 0; 
  }
  body.page-masituation .modern-section.section-overview .overview-waves { 
    position:absolute; inset:0; width:100% !important; overflow:hidden; 
  }
  body.page-masituation .modern-section.section-overview .overview-waves .wave { width:140% !important; }
  body.page-masituation .modern-section.section-overview .section-header { 
    flex-direction: row; 
    align-items: center; 
    gap: 12px; 
  }
  body.page-masituation .modern-section.section-overview .section-header h4 { 
    margin: 0; 
    font-size: 20px; 
    flex: 1; 
  }
  /* Allow three stat cards to auto-height wrap under header */
  body.page-masituation .modern-section.section-overview .overview-stats { 
    margin-top: 8px !important; 
    grid-template-columns: repeat(auto-fit,minmax(150px,1fr)) !important; 
  }
  body.page-masituation .modern-section.section-overview .overview-stats .stat-card { 
    min-height: 78px !important; 
    height: auto !important; 
  }
  body.page-masituation .modern-section.section-overview .overview-stats .stat-card .stat-meta { 
    gap: 6px !important; 
  }

  /* Generic grid -> vertical stack */
  .overview-stats.compact-3 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .overview-stats.compact-3 .stat-card { min-width: 0; }
  @media (max-width: 560px) { .overview-stats.compact-3 { grid-template-columns: 1fr; } }

  /* Unified stat pill (ATTESTATIONS / UTILISATION / QUOTA etc.) mobile fixes */
  .modern-section.section-overview .overview-stats { 
    display: grid !important; 
    grid-template-columns: repeat(auto-fit,minmax(140px,1fr));
    gap: 10px !important;
    width: 100% !important;
  }
  .modern-section.section-overview .overview-stats .stat-card { 
    flex: initial !important; 
    height: auto !important; 
    min-height: 70px !important; 
    max-height: none !important; 
    padding: 12px 14px !important; 
    display: flex !important; 
    flex-direction: column !important; 
    align-items: flex-start !important; 
    justify-content: flex-start !important; 
    border: 1px solid rgba(255,255,255,0.5) !important;
    background: rgba(255,255,255,0.45) !important;
    backdrop-filter: blur(12px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.03), inset 0 1px 0 rgba(255,255,255,0.6) !important;
  }
  .modern-section.section-overview .overview-stats .stat-card .stat-meta { 
    flex-direction: column !important; 
    align-items: flex-start !important; 
    gap: 6px !important; 
    width: 100% !important;
  }
  .modern-section.section-overview .overview-stats .stat-card .stat-meta .label { 
    white-space: normal !important; 
    line-height: 1.2 !important; 
    font-size: 13px !important; 
  }
  .modern-section.section-overview .overview-stats .stat-card .stat-meta .value { 
    align-self: flex-start !important; 
    white-space: nowrap !important; 
    font-size: 13px !important; 
    padding: 4px 10px !important; 
  }
  /* Extremely narrow phones: stack stats vertical single column */
  @media (max-width:480px){
    .modern-section.section-overview .overview-stats { grid-template-columns: 1fr; }
    .modern-section.section-overview .overview-stats .stat-card { min-width: 0 !important; }
  }

  /* Prevent overview section from imposing desktop fixed widths that cause horizontal scroll */
  html body .index-content .modern-section.section-overview,
  body .index-content .modern-section.section-overview,
  .modern-section.section-overview { 
    width: 100% !important; 
    max-width: 100% !important; 
    margin-left: 0 !important; 
    margin-right: 0 !important; 
  }
  /* Ensure decorative waves never overflow horizontally */
  .modern-section.section-overview .overview-waves .wave { width: 130% !important; max-width:none !important; }
  @media (max-width:480px){ .modern-section.section-overview .overview-waves .wave { width:150% !important; } }

  /* Documents page */
  .docs-grid { display: flex; flex-direction: column; gap: 24px; }
  .docs-col, .docs-col-right { width: 100% !important; }
  .document-item { padding: 14px 16px; }
  .document-item .doc-link { width: 100%; }

  /* Lots page (assuming similar column classes) */
  .lots-grid, .lots-wrapper { display: flex; flex-direction: column; gap: 20px; }

  /* Appels de fonds */
  .funds-layout, .appels-grid { display: flex; flex-direction: column; gap: 20px; }
  .appels-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.responsive-collapse { font-size: 13px; }

  /* Generic tables: allow horizontal scroll without breaking layout */
  .table-responsive-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ===== Responsive tables ===== */
  /* Force all tables inside main content to behave well on mobile */
  .index-content table {
    font-size: 13px !important;
    word-break: break-word;
  }
  .index-content table th,
  .index-content table td {
    padding: 10px 8px !important;
    line-height: 1.35;
  }
  /* Make any parent of a table scrollable to prevent layout blow-out */
  .sit-card, .modern-section, .db-card, .section-body, .card-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Known table classes: compact treatment */
  .budget-table,
  .premium-table,
  .modern-table,
  .balance-table,
  .journal-table,
  .ledger-table,
  .presence-table,
  .vote-detail-table,
  .echeances-table,
  .an-table,
  .comp-table,
  .ce-table,
  .tx-table,
  .compare-table,
  table.table {
    width: 100% !important;
    min-width: 0 !important;
  }
  /* Hide low-priority columns on small screens (opt-in via class) */
  .hide-mobile { display: none !important; }

  /* Cards spacing tighter */
  .modern-section { padding: 18px 16px 20px; }
  .modern-section .section-header h4 { font-size: 15px; }

  /* Dashboard (macopropriete) specific tightening & overflow guard */
  .modern-section.section-overview { padding: 28px 18px 32px !important; }
  .overview-inner, .modern-section, .container { max-width:100% !important; }
  html, body { overflow-x: hidden !important; }
  .overview-waves { left:0 !important; right:0 !important; width:100% !important; }
  .overview-waves .wave { min-width:120%; }
  .hero-grid, .kpi-grid { width:100% !important; margin:0 !important; }
  .section-header { gap:12px; }
  .section-header h4 { font-size:17px; }

  /* Hide non-essential decorative waves if performance needed */
  .overview-waves { opacity: .5; }
  /* Prevent wave overflow causing horizontal scroll */
  .overview-waves { position:absolute; inset:0; width:100% !important; overflow:hidden; }
  .overview-waves .wave { width:140%; max-width:none; }
  /* Hero / overview card full bleed inside mobile padding */
  body.page-macopropriete .modern-section.section-overview { margin-left:0 !important; margin-right:0 !important; width:100% !important; border-radius:20px !important; }
  body.page-macopropriete .modern-section.section-overview .section-header h4 { font-size:20px; }

  /* Adjust topbar search hide on very small widths */
  .desktop-topbar .topbar-search { display: none; }
}

/* Ultra narrow tweaks */
@media (max-width: 400px) {
  .modern-section { padding: 16px 14px 18px; }
  .panel-item { font-size: 13px; }
  .overview-stats.compact-3 { gap: 8px; }
  .document-item { padding: 12px 12px; }
  /* Further table compaction */
  .index-content table { font-size: 11px !important; }
  .index-content table th,
  .index-content table td { padding: 6px 5px !important; }
}

/* Accessibility focus visibility improvements when reduced motion */
@media (prefers-reduced-motion: reduce) {
  .index-sidebar { transition: none !important; }
  body.sidebar-open .sidebar-scrim { transition: none !important; }
}