/*
 * Moventra ERP — couche de mise en page responsive.
 *
 * Cette feuille est volontairement chargée après les thèmes existants. Elle ne
 * change ni couleurs, ni formes, ni contenus : elle limite les débordements et
 * réorganise seulement les conteneurs lorsque l'espace disponible diminue.
 */

@media screen {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

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

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

  .app-shell,
  .main-area,
  .content,
  .workspace-view,
  .master-home,
  .panel,
  .card,
  .data-panel,
  .dashboard-grid,
  .lower-grid,
  .page-heading,
  .panel-header,
  .table-toolbar,
  .form-grid,
  .heading-actions,
  .top-actions {
    min-width: 0;
  }

  .app-shell {
    width: 100%;
    max-width: 100vw;
  }

  .main-area {
    width: calc(100% - 232px);
    max-width: calc(100vw - 232px);
  }

  .content {
    width: 100%;
    max-width: none;
    padding-inline: clamp(12px, 1.45vw, 28px);
  }

  .master-home,
  .workspace-view,
  .financial-content,
  .treasury-embedded,
  .treasury-embedded iframe {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .treasury-embedded iframe {
    display: block;
    border: 0;
  }

  /* Les tableaux conservent leurs colonnes métier, mais ne poussent jamais la page. */
  .table-panel,
  .table-wrap,
  .table-wrapper,
  .table-shell,
  .data-grid,
  .data-grid-wrap,
  .moventra-datagrid-shell,
  .planning-table-shell,
  .orders-print-area,
  .fleet-table,
  .orders-table,
  .inventory-table,
  .document-vault-list,
  .access-matrix,
  .reliability-priority,
  .failure-mode-panel,
  .intervention-request-list,
  .personnel-table,
  .consumption-table-shell,
  .fuel-history-table {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
  }

  table {
    max-width: 100%;
  }

  .topbar,
  .module-tabs,
  .page-heading,
  .panel-header,
  .table-toolbar,
  .heading-actions,
  .top-actions,
  .alert-banner,
  .forecast-summary,
  .attention-footer,
  .history-range-toolbar,
  .history-inline-actions {
    max-width: 100%;
  }

  .page-heading > div,
  .panel-header > div,
  .topbar > div,
  .alert-banner > div,
  .master-home-hero > div {
    min-width: 0;
  }

  .page-heading h1,
  .panel-header h2,
  .master-home h1,
  .master-home h2,
  .master-home h3 {
    overflow-wrap: anywhere;
  }

  .modal-backdrop,
  .home-personalization-backdrop {
    padding: clamp(10px, 2vw, 24px);
  }

  .modal,
  .home-personalization-panel,
  .driver-detail-modal,
  .intervention-request-modal,
  .intervention-convert-modal {
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }
}

/* Ordinateurs portables et tablettes en mode paysage. */
@media screen and (max-width: 1280px) {
  .content {
    padding: 14px 16px 30px;
  }

  .metric-grid,
  .summary-strip,
  .workshop-kpis,
  .access-kpis,
  .consumption-kpis,
  .reliability-live-kpis,
  .master-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-grid,
  .lower-grid,
  .master-home-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-heading,
  .master-home-hero {
    align-items: flex-start;
  }

  .heading-actions,
  .top-actions,
  .table-toolbar,
  .panel-header {
    flex-wrap: wrap;
  }

  .global-search {
    width: clamp(190px, 25vw, 280px);
  }
}

/* Le menu devient un panneau hors-canvas sans modifier son arborescence. */
@media screen and (max-width: 920px) {
  .sidebar,
  .sidebar.maintenance-sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(286px, 88vw) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    transform: translateX(-101%);
    transition: transform .2s ease;
    z-index: 80;
  }

  .sidebar.is-open,
  .sidebar.maintenance-sidebar.is-open {
    transform: translateX(0);
  }

  .mobile-scrim {
    position: fixed;
    inset: 0;
    z-index: 70;
    width: 100%;
    height: 100dvh;
  }

  .main-area {
    width: 100%;
    max-width: 100vw;
    margin-left: 0 !important;
  }

  .menu-button {
    display: inline-grid !important;
    flex: 0 0 34px;
    place-items: center;
  }

  .topbar {
    gap: 8px;
    padding-inline: 10px;
  }

  .breadcrumb {
    min-width: 0;
    flex: 1 1 auto;
  }

  .breadcrumb strong,
  .breadcrumb span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .module-tabs {
    padding-inline: 10px;
  }

  .module-tabs-label {
    display: none;
  }

  .module-tabs-scroll {
    width: 100%;
  }

  .read-only-access-banner,
  .overdue-global-alert {
    margin-inline: 10px;
  }

  .home-zone-grid,
  .form-grid,
  .asset-form-grid,
  .company-fields,
  .document-metadata-fields,
  .intervention-detail-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid .full,
  .asset-form-grid .full,
  .company-fields .full {
    grid-column: 1 / -1;
  }
}

/* Tablettes en mode portrait et petits ordinateurs. */
@media screen and (max-width: 760px) {
  .content {
    padding: 12px 10px 24px;
  }

  .topbar {
    min-height: 54px;
    height: auto;
  }

  .top-actions {
    flex: 0 1 auto;
    justify-content: flex-end;
    gap: 5px;
  }

  .top-actions .global-search {
    width: min(210px, 34vw);
  }

  .top-actions .primary-button,
  .top-actions .secondary-button {
    min-height: 30px;
    padding-inline: 8px;
    font-size: 10px;
  }

  .page-heading,
  .panel-header,
  .alert-banner,
  .forecast-summary,
  .attention-footer,
  .master-home-hero,
  .master-home-section > header {
    align-items: stretch;
    flex-direction: column;
  }

  .heading-actions,
  .page-heading .heading-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .heading-actions > *,
  .page-heading .heading-actions > * {
    flex: 1 1 150px;
  }

  .page-heading h1 {
    font-size: clamp(21px, 5vw, 25px);
    line-height: 1.15;
  }

  .metric-grid,
  .summary-strip,
  .workshop-kpis,
  .access-kpis,
  .consumption-kpis,
  .reliability-live-kpis,
  .master-module-grid,
  .master-quick-grid,
  .home-zone-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .summary-strip {
    overflow: visible;
  }

  .summary-strip > div:nth-child(2n) {
    border-right: 0;
  }

  .form-grid,
  .asset-form-grid,
  .company-fields,
  .document-metadata-fields,
  .intervention-detail-summary,
  .enterprise-modal form {
    grid-template-columns: minmax(0, 1fr);
  }

  .form-grid > *,
  .asset-form-grid > *,
  .company-fields > *,
  .document-metadata-fields > * {
    grid-column: auto !important;
  }

  .modal-backdrop,
  .home-personalization-backdrop {
    align-items: stretch;
    padding: 0;
  }

  .modal,
  .home-personalization-panel,
  .driver-detail-modal,
  .intervention-request-modal,
  .intervention-convert-modal {
    width: 100% !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    margin: 0;
  }

  .modal-header,
  .modal-actions,
  .home-personalization-panel > header,
  .home-personalization-panel > footer {
    position: sticky;
    z-index: 2;
  }

  .modal-header,
  .home-personalization-panel > header {
    top: 0;
  }

  .modal-actions,
  .home-personalization-panel > footer {
    bottom: 0;
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 560px) {
  .breadcrumb span,
  .breadcrumb b,
  .top-actions .global-search {
    display: none;
  }

  .metric-grid,
  .summary-strip,
  .workshop-kpis,
  .access-kpis,
  .consumption-kpis,
  .reliability-live-kpis,
  .master-module-grid,
  .master-quick-grid,
  .home-zone-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .summary-strip > div {
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .summary-strip > div:last-child {
    border-bottom: 0;
  }

  .top-actions .primary-button,
  .top-actions .secondary-button {
    white-space: normal;
  }

  .donut-row {
    align-items: center;
    flex-direction: column;
  }

  .donut-row ul {
    width: 100%;
  }
}