/* TrésoFlow — couche responsive globale 2026
   S'applique aux vues privées et aux pages publiques. */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body {
  max-width: 100%;
}

img, svg, video, canvas, iframe {
  max-width: 100%;
  height: auto;
}

input, select, textarea, button {
  max-width: 100%;
  font: inherit;
}

textarea {
  resize: vertical;
}

.table-responsive,
.rt-table-responsive,
[class*="table-wrap"] {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.r-grid-2,
.r-grid-2-1,
.r-grid-form,
.rt-main-grid,
.dashboard-grid,
.stats-grid {
  min-width: 0;
}

.card,
.fin-card,
.stat-card,
.form-card,
.page-header,
.card-body,
.card-header {
  min-width: 0;
  max-width: 100%;
}

.page-header-right,
.actions,
.action-buttons,
.form-actions,
.btn-group {
  flex-wrap: wrap;
}

.page-header h1,
.card-title,
.fin-title,
.header-title,
p,
td,
th {
  overflow-wrap: anywhere;
}

/* Tablette */
@media (max-width: 1024px) {
  #page-main {
    padding: 16px !important;
  }

  .r-grid-2,
  .r-grid-2-1,
  .rt-main-grid {
    grid-template-columns: 1fr !important;
  }

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

  .fin-grid {
    gap: 12px !important;
  }

  .span-4,
  .span-6,
  .span-8 {
    grid-column: span 12 !important;
  }
}

/* Téléphone */
@media (max-width: 640px) {
  body {
    min-width: 0;
  }

  #top-header {
    height: 56px !important;
    padding: 0 10px !important;
    gap: 7px !important;
  }

  #page-main {
    padding: 12px 10px calc(24px + env(safe-area-inset-bottom)) !important;
  }

  .flash-wrap {
    padding: 0 10px !important;
  }

  .flash {
    align-items: flex-start !important;
    padding: 10px 11px !important;
  }

  .header-title {
    font-size: 13px !important;
  }

  #notif-panel {
    position: fixed !important;
    top: 62px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-height: calc(100dvh - 75px);
  }

  .page-header {
    margin-bottom: 14px !important;
  }

  .page-header-left,
  .page-header-right,
  .page-header-right > *,
  .page-header > div {
    max-width: 100%;
  }

  .page-header-right {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .page-header-right .btn,
  .form-actions .btn,
  .action-buttons .btn {
    width: 100%;
    justify-content: center;
  }

  .card-body,
  .fin-card {
    padding: 14px !important;
  }

  .card-header {
    padding: 12px 14px !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }

  .stat-card {
    padding: 14px !important;
  }

  .stat-value,
  .fin-kpi {
    font-size: 20px !important;
  }

  .r-grid-2,
  .r-grid-2-1,
  .r-grid-form,
  .rt-main-grid,
  .rt-csv-grid,
  .dashboard-grid,
  .stats-grid,
  .fin-form {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .fin-form .full,
  .r-grid-form > *,
  .rt-csv-grid > * {
    grid-column: 1 / -1 !important;
  }

  .btn {
    min-height: 40px;
    white-space: normal !important;
    text-align: center;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
  select,
  textarea,
  .form-control {
    width: 100% !important;
    min-height: 44px;
    font-size: 16px !important; /* évite le zoom automatique iOS */
  }

  input[type="checkbox"],
  input[type="radio"] {
    min-width: 20px;
    min-height: 20px;
  }

  /* Les tableaux marqués par app.js deviennent des cartes verticales. */
  table.mobile-card-table {
    min-width: 0 !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
  }

  table.mobile-card-table thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  table.mobile-card-table tbody,
  table.mobile-card-table tr,
  table.mobile-card-table td {
    display: block !important;
    width: 100% !important;
  }

  table.mobile-card-table tr {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    overflow: hidden;
  }

  table.mobile-card-table td {
    display: grid !important;
    grid-template-columns: minmax(96px, 38%) minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 9px 11px !important;
    border: 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    text-align: right !important;
    white-space: normal !important;
  }

  table.mobile-card-table td:last-child {
    border-bottom: 0 !important;
  }

  table.mobile-card-table td::before {
    content: attr(data-label);
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .035em;
    line-height: 1.4;
    text-align: left;
    text-transform: uppercase;
  }

  table.mobile-card-table td[data-label=""]::before {
    display: none;
  }

  table.mobile-card-table td[data-label=""] {
    grid-template-columns: 1fr;
  }

  table.mobile-card-table td .btn,
  table.mobile-card-table td form,
  table.mobile-card-table td .actions {
    margin-left: auto;
  }

  .total-card {
    align-items: flex-start !important;
    padding: 18px !important;
  }

  .total-amount {
    font-size: 30px !important;
    overflow-wrap: anywhere;
  }

  .total-icon {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px;
  }

  /* Pages publiques */
  body > main,
  body > .container,
  body > .wrapper {
    width: 100%;
    max-width: 100%;
  }

  .auth-card,
  .login-card,
  .register-card,
  .pay-card,
  .legal-card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 14px !important;
  }
}

/* Très petits écrans */
@media (max-width: 380px) {
  #page-main {
    padding-inline: 8px !important;
  }

  .card-body,
  .fin-card,
  .stat-card {
    padding: 12px !important;
  }

  table.mobile-card-table td {
    grid-template-columns: 1fr !important;
    text-align: left !important;
  }
}

/* Accessibilité et confort */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  table.mobile-card-table {
    display: table !important;
    border-collapse: collapse !important;
  }

  table.mobile-card-table thead {
    position: static !important;
    width: auto !important;
    height: auto !important;
    clip: auto !important;
  }

  table.mobile-card-table tbody {
    display: table-row-group !important;
  }

  table.mobile-card-table tr {
    display: table-row !important;
    box-shadow: none !important;
  }

  table.mobile-card-table td {
    display: table-cell !important;
    text-align: initial !important;
  }

  table.mobile-card-table td::before {
    display: none !important;
  }
}