/* ================================================================
   responsive.css — Synergieloc SaaS
   Fixes pour tous les écrans : mobile, tablette, desktop
   ================================================================ */

/* ── 1. Base & box-model ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, video, iframe { max-width: 100%; }

/* ── 2. Utility classes ──────────────────────────────────────── */
.flex-wrap     { flex-wrap: wrap !important; }
.w-full        { width: 100% !important; }
.overflow-x    { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.show-mobile   { display: none; }

/* ── 3. Tables scrollables partout ──────────────────────────── */
.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table { border-collapse: collapse; }

/* ── 4. Boutons — wrap automatique ──────────────────────────── */
.btn-row, .action-bar, .actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

/* ── 5. Grilles inline style — override responsive ──────────── */
/* Ces règles ciblent les grilles à colonne fixe écrites en style inline */

/* ── 6. Modals full-width mobile ─────────────────────────────── */
@media (max-width: 600px) {
  .modal-box,
  [class*="modal"][class*="box"],
  div[style*="max-width:480px"],
  div[style*="max-width: 480px"],
  div[style*="max-width:540px"],
  div[style*="max-width: 540px"] {
    width: 96vw !important;
    max-width: 96vw !important;
    padding: 1.1rem !important;
  }
}

/* ================================================================
   TABLET — max-width: 1024px
   ================================================================ */
@media (max-width: 1024px) {
  .container { padding-left: var(--admin-gutter, var(--portal-side-padding, 1rem)); padding-right: var(--admin-gutter, var(--portal-side-padding, 1rem)); }

  /* Grilles 3+ colonnes → 2 colonnes */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ================================================================
   MOBILE — max-width: 768px
   ================================================================ */
@media (max-width: 768px) {

  /* Container */
  .container { padding-left: var(--admin-gutter, var(--portal-side-padding, .7rem)); padding-right: var(--admin-gutter, var(--portal-side-padding, .7rem)); margin-top: .6rem; }

  /* ── Tables scrollables ── */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    font-size: .82rem;
  }
  thead th, tbody td { padding: .45rem .6rem; }

  /* ── Toutes les grilles fixes → 1 colonne ── */
  [style*="grid-template-columns:350px"],
  [style*="grid-template-columns: 350px"],
  [style*="grid-template-columns:300px"],
  [style*="grid-template-columns: 300px"],
  [style*="grid-template-columns:280px"],
  [style*="grid-template-columns: 280px"],
  [style*="grid-template-columns:320px"],
  [style*="grid-template-columns: 320px"],
  [style*="grid-template-columns:260px"],
  [style*="grid-template-columns: 260px"],
  [style*="grid-template-columns:1fr 2fr"],
  [style*="grid-template-columns: 1fr 2fr"],
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Panels 350px (tickets, messages) → max-height quand stacked ── */
  [style*="grid-template-columns:350px"] > div:first-child,
  [style*="grid-template-columns: 350px"] > div:first-child {
    max-height: 260px;
    overflow-y: auto;
  }

  /* ── Flex rows → wrap ── */
  [style*="display:flex"][style*="gap:1rem"],
  [style*="display:flex"][style*="gap: 1rem"],
  [style*="display:flex"][style*="gap:1.5rem"],
  [style*="display:flex"][style*="gap: 1.5rem"],
  [style*="display:flex"][style*="gap:2rem"],
  [style*="display: flex"][style*="gap:1rem"],
  [style*="display: flex"][style*="gap: 1rem"] {
    flex-wrap: wrap !important;
  }

  /* ── Action buttons / toolbars ── */
  .btn-toolbar,
  div[style*="justify-content:space-between"][style*="display:flex"],
  div[style*="justify-content: space-between"][style*="display: flex"] {
    flex-wrap: wrap !important;
    gap: .5rem !important;
  }

  /* ── Cards padding ── */
  .card { padding: 1rem !important; }
  .info-card { padding: .85rem !important; }

  /* ── Page title ── */
  .page-title, h2.page-title { font-size: 1.2rem !important; }
  h1.page-title { font-size: 1.3rem !important; }

  /* ── Filters bar ── */
  .filters, .filter-bar, .search-bar {
    flex-wrap: wrap !important;
    gap: .4rem !important;
  }
  .filters input, .filter-bar input, .filters select, .filter-bar select {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  /* ── Stats row ── */
  .stats-row {
    grid-template-columns: 1fr 1fr !important;
    gap: .65rem;
  }

  /* ── Tabs scrollables ── */
  .tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex-shrink: 0 !important; white-space: nowrap !important; }

  /* ── Modals ── */
  .modal-box {
    width: 94vw !important;
    max-width: 94vw !important;
    padding: 1.3rem !important;
    margin: .5rem !important;
  }

  /* ── Portal header ── */
  .portal-header {
    padding: .65rem 1rem;
    flex-wrap: wrap;
    gap: .4rem;
  }

  /* ── Hide secondary columns in tables on mobile ── */
  table.table-compact th:nth-child(n+5),
  table.table-compact td:nth-child(n+5) {
    display: none;
  }

  /* ── Fix inline min-width > 100vw ── */
  [style*="min-width:600px"],
  [style*="min-width: 600px"],
  [style*="min-width:700px"],
  [style*="min-width: 700px"],
  [style*="min-width:800px"],
  [style*="min-width: 800px"] {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* ── Hide long text labels on very small screens ── */
  .hide-sm { display: none !important; }
  .show-sm { display: inline !important; }
}

/* ================================================================
   SMALL MOBILE — max-width: 480px
   ================================================================ */
@media (max-width: 480px) {

  /* ── 1 colonne ── */
  .stats-row { grid-template-columns: 1fr !important; }

  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Tables: font encore plus petit ── */
  table { font-size: .78rem; }
  thead th, tbody td { padding: .35rem .5rem; }

  /* ── Boutons ── */
  .btn { padding: .45rem .75rem !important; font-size: .82rem !important; }
  .btn-sm { padding: .3rem .6rem !important; font-size: .76rem !important; }

  /* ── Cards ── */
  .card { padding: .75rem !important; border-radius: 10px !important; }

  /* ── Portal header minimal ── */
  .portal-header h1 { font-size: .85rem; }
  .logout-btn { display: none; }
  /* Espace partenaire : icône seule, pas le libellé — le bouton reste cliquable. */
  #pwTiers .logout-btn { display: inline-flex !important; align-items: center; justify-content: center; padding: .4rem; min-width: 38px; min-height: 38px; }
  #pwTiers .logout-label { display: none; }

  /* ── Filter date inputs ── */
  input[type="date"] { width: 100%; font-size: .82rem; }

  /* ── Modal plein écran ── */
  .modal-box {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 12px 12px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }

  /* ── Section title ── */
  .section-title { font-size: .9rem; }

  /* ── Hide helper text ── */
  .hide-xs { display: none !important; }
}

/* ================================================================
   PRINT
   ================================================================ */
@media print {
  .btn, button, .no-print, nav, .nav, .header,
  #chatbot, #chatWidget, .toast-container {
    display: none !important;
  }
  body { font-size: 11pt; color: #000; background: #fff; }
  table { width: 100%; border-collapse: collapse; }
  th, td { border: 1px solid #999; padding: 4pt 6pt; font-size: 9pt; }
  .card, .info-card { box-shadow: none; border: 1px solid #ddd; }
  a { color: #000; text-decoration: none; }
}

/* iOS Safari fix: only targeted modals */
#invoiceModal, #missionModal {
  overflow-x: hidden !important;
}

/* ================================================================
   PAGES ADMIN PRIORITAIRES — Flux, CRG, Factures, Syndic
   ================================================================ */
@media (max-width: 1024px) {
  .form-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .flow-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .workflow-steps { flex-wrap: wrap !important; }
  .workflow-step { flex: 1 1 calc(50% - .5rem) !important; min-width: 140px; }
}

@media (max-width: 768px) {
  html, body { overflow-x: hidden; max-width: 100vw; }

  .form-grid { grid-template-columns: 1fr !important; }
  .flows-header { flex-direction: column !important; align-items: stretch !important; gap: .75rem !important; }
  .flows-header > div { display: flex !important; flex-wrap: wrap !important; gap: .45rem !important; width: 100% !important; }
  .flows-header .btn { flex: 1 1 calc(50% - .25rem) !important; min-width: 120px !important; }

  .flow-stats { grid-template-columns: 1fr 1fr !important; gap: .65rem !important; }
  .flow-stat { padding: .9rem !important; }
  .flow-stat .value { font-size: 1.25rem !important; }

  .table-scroll,
  .table-responsive,
  .data-table-wrap {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .crg-container { flex-direction: column !important; height: auto !important; min-height: 0 !important; }
  .crg-sidebar { width: 100% !important; max-width: 100% !important; }
  .crg-main { min-height: 50vh !important; }
  .preview-frame { min-height: 40vh !important; }

  .workflow-steps { gap: .5rem !important; }
  .workflow-step { flex: 1 1 calc(50% - .25rem) !important; padding: .65rem !important; }
  .workflow-step .num { font-size: 1.15rem !important; }

  .page-header { flex-wrap: wrap !important; gap: .5rem !important; padding: .65rem 1rem !important; margin: .5rem !important; }
  .page-header h1 { font-size: 1.05rem !important; }

  .tab-bar { overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tab-bar::-webkit-scrollbar { display: none; }
  .tab-btn { flex-shrink: 0 !important; }

  .acc-header { padding: 1rem 1.1rem !important; }
  .sdc-bar { flex-direction: column !important; align-items: stretch !important; }
  .sdc-bar select, .sdc-bar input { width: 100% !important; max-width: 100% !important; }

  .flow-modal { width: 96vw !important; max-width: 96vw !important; padding: 1.2rem !important; }
}

@media (max-width: 480px) {
  .flow-stats { grid-template-columns: 1fr !important; }
  .flows-header .btn { flex: 1 1 100% !important; }
  .workflow-step { flex: 1 1 100% !important; }
  .flow-stat .value { font-size: 1.1rem !important; }
  .page-header h1 { font-size: .92rem !important; }
  .page-header p { display: none; }
}

/* ================================================================
   PROFILS PROPRIÉTAIRE / LOCATAIRE
   ================================================================ */
.profile-table-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.profile-table-scroll .profile-mov-table {
  display: table !important;
  width: 100%;
  min-width: 580px;
  white-space: normal;
}

@media (max-width: 768px) {
  .profile-main .tabs,
  .profile-page .tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .profile-main .tab,
  .profile-page .tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  .profile-grid { grid-template-columns: 1fr !important; }
  .info-grid { grid-template-columns: 1fr !important; }
  .profile-page > .tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .profile-page > .tabs .tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  .account-summary-grid,
  #accountSummary {
    grid-template-columns: 1fr !important;
  }
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── Portail propriétaire : largeur utile maximale ── */
#pw .container {
  width: 100%;
  max-width: min(1680px, calc(100vw - 2rem));
  padding-left: clamp(.75rem, 1.5vw, 1.25rem);
  padding-right: clamp(.75rem, 1.5vw, 1.25rem);
}
#pw .portal-header {
  padding-left: clamp(.75rem, 1.5vw, 1.25rem);
  padding-right: clamp(.75rem, 1.5vw, 1.25rem);
}

body.tenant-portal .container {
  width: 100%;
  max-width: min(1680px, calc(100vw - 2rem));
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(.75rem, 1.5vw, 1.25rem);
  padding-right: clamp(.75rem, 1.5vw, 1.25rem);
  box-sizing: border-box;
}
body.tenant-portal .portal-header {
  padding-left: clamp(.75rem, 1.5vw, 1.25rem);
  padding-right: clamp(.75rem, 1.5vw, 1.25rem);
}