/* Responsive adaptation layer for SISPROJ-SAES.
   Loaded last: it fixes layout behavior without changing business logic. */

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

body {
  overflow-x: hidden;
}

.skip-link {
  left: 12px;
  top: 12px;
  transform: translateY(-140%);
}

.skip-link:focus {
  left: 12px;
  top: 12px;
  transform: translateY(0);
}

:where(
  .app,
  .app-shell,
  .main,
  .content,
  .main-col,
  .app-shell__main,
  .plx,
  .plx-main,
  .hub-page,
  .page-container,
  .content-area,
  .responsive-container
) {
  min-width: 0;
  max-width: 100%;
}

:where(img, svg, canvas, video, iframe) {
  max-width: 100%;
}

:where(input, select, textarea, button, .btn, .icon-btn) {
  max-width: 100%;
}

:where(
  h1,
  h2,
  h3,
  .plx-hero__headline,
  .plx-tools__title,
  .hub-card__title,
  .mod-title,
  .card-title,
  .shell-topbar__title,
  .field-label,
  .form-hero-title,
  .drawer-title
) {
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.responsive-container {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  padding-inline: clamp(12px, 2vw, 28px);
}

.responsive-grid,
.responsive-card-grid,
.responsive-kpi-grid,
.portal-grid,
.portal-modgrid,
.portal-landing__grid,
.plx-tools__grid,
.hub-page__cards,
.area-grid,
.mnl-group__grid,
.cgp-grid,
.cgp-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(10px, 1.4vw, 18px);
}

.responsive-kpi-grid,
.kpi-grid,
.kpi-row,
.metric-strip,
.metric-row,
.hub-page__kpis,
.hero-kpis,
.plx-hero__kpis,
.plx-hero__kpis-inner,
.ted-dashboard-summary-grid,
.ted-dashboard-highlight-grid,
.cgp-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: clamp(8px, 1vw, 14px);
}

.responsive-form,
.responsive-form-grid,
.field-grid,
.fb-grid,
.ff-field-grid,
.dm-field-grid,
.ws-fields,
.ws-form-grid,
.form-grid {
  min-width: 0;
}

:where(
  .field-grid.cols-2,
  .field-grid.cols-3,
  .field-grid.cols-4,
  .ff-grid-2,
  .ff-grid-3,
  .ff-grid-4,
  .dm-field-grid.cols-2,
  .dm-field-grid.cols-3,
  .dm-field-grid.cols-4,
  .ws-fields--2,
  .ws-fields--3,
  .ws-fields--4,
  .cgp-grid--2,
  .cgp-grid--3,
  .cgp-grid--4,
  .responsive-form-grid
) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

:where(.field, .field-group, .form-group, .ws-field, .fb-field, .cn-field) {
  min-width: 0;
}

:where(.field input, .field select, .field textarea,
  .field-group input, .field-group select, .field-group textarea,
  .form-group input, .form-group select, .form-group textarea,
  .ws-field input, .ws-field select, .ws-field textarea,
  .fb-field input, .fb-field select, .fb-field textarea) {
  width: 100%;
}

.responsive-actions,
.form-hero-actions,
.drawer-shell-actions,
.drawer-shell-footer-actions,
.form-actions,
.grid-actions,
.table-actions,
.filter-actions,
.topbar-actions,
.shell-topbar__actions,
.plx-nav__actions,
.cgp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.responsive-table-wrapper,
.table-wrapper,
.table-scroll,
.grid-table-scroll,
.ff-subtable-scroll,
.subtable-scroll,
.ted-dashboard-table-wrap,
.ssp-table-wrap,
.list-table-wrap,
.mk-list__table-wrap,
.cgp-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

:where(table, .grid-table, .data-table, .ff-subtable, .ssp-table) {
  max-width: 100%;
  border-collapse: collapse;
}

:where(th, td, .grid-cell, .ssp-cell) {
  overflow-wrap: anywhere;
}

.responsive-modal,
.modal-content,
.detail-modal,
.confirm-box,
.confirm-deps-card,
.drawer-modal-panel,
.drawer,
.trd-dw,
.side-panel,
.cgp-modal {
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
}

:where(.modal-content, .detail-modal, .drawer-modal-panel, .drawer, .trd-dw, .side-panel, .cgp-modal) {
  overflow-y: auto;
}

@media (pointer: coarse) {
  :where(button, .btn, .icon-btn, .nav-item, .shell-sidebar__item, .plx-nav__icon, .plx-ms__trigger) {
    min-height: 44px;
  }
}

/* Cap de leitura só para páginas de marca/hub (texto). Views de dados
   (.main-col / .app-shell__main: listas, grids, dashboards) NÃO entram aqui —
   precisam usar a largura total em telas amplas. */
@media (min-width: 1440px) {
  :where(.plx-main, .hub-page, .portal-landing) {
    max-width: min(1480px, calc(100vw - 64px));
  }
}

@media (max-width: 1024px) {
  :where(.app-shell:not(.app-shell--focus-home), .app) {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  :where(.content, .trd-layout, .trd-layout--stack .trd-body, .ws-shell, .ws-form, .cgp-sec--split, .cgp-reg) {
    grid-template-columns: minmax(0, 1fr);
  }

  :where(.trd-main, .main-col, .app-shell__main) {
    padding-inline: clamp(12px, 2vw, 22px);
  }
}

@media (max-width: 768px) {
  :where(.topbar, .app-shell__topbar, .plx-nav) {
    gap: 8px;
    padding-inline: 12px;
  }

  :where(.topbar-search, .shell-topbar__search, .plx-nav__search, .plx-nav__env, .user-role) {
    display: none;
  }

  :where(.plx-main, .portal-landing, .hub-page, .main-col, .app-shell__main) {
    padding-inline: 14px;
  }

  :where(.plx-hero, .portal-hero, .form-hero-top, .plx-tools__head, .portal-section-h) {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .plx-hero__kpis--with-panels {
    display: grid;
    grid-template-columns: 1fr;
  }

  .plx-hero__kpis--with-panels > .plx-hs--panels {
    width: 100%;
    min-height: 80px;
  }
}

@media (max-width: 640px) {
  :where(.app-shell:not(.app-shell--focus-home), .app) {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  :where(.app-shell__sidebar, .sidebar) {
    width: 52px;
  }

  :where(.brand-text, .brand-name, .brand-sub, .nav-label, .nav-badge, .nav-group-title, .shell-sidebar__module-label, .shell-sidebar__footer) {
    display: none;
  }

  :where(.shell-sidebar__brand, .sidebar-brand) {
    justify-content: center;
    padding-inline: 0;
  }

  :where(.shell-sidebar__groups, .sidebar-nav) {
    padding-inline: 4px;
  }

  :where(.plx-nav) {
    height: auto;
    min-height: 56px;
    padding-block: 8px;
    flex-wrap: wrap;
  }

  :where(.plx-nav__actions, .shell-topbar__actions, .topbar-actions) {
    margin-left: 0;
  }
}

@media (max-width: 480px) {
  :where(.responsive-card-grid, .responsive-grid, .portal-grid, .portal-modgrid, .hub-page__cards, .plx-tools__grid, .portal-landing__grid),
  :where(.responsive-kpi-grid, .kpi-grid, .kpi-row, .metric-strip, .metric-row, .hub-page__kpis, .hero-kpis, .plx-hero__kpis, .plx-hero__kpis-inner),
  :where(.field-grid.cols-2, .field-grid.cols-3, .field-grid.cols-4, .fb-grid, .ff-grid-2, .ff-grid-3, .ff-grid-4, .dm-field-grid, .ws-fields) {
    grid-template-columns: 1fr;
  }

  :where(.plx-main, .portal-landing, .hub-page, .main-col, .app-shell__main) {
    padding-inline: 10px;
  }

  :where(.form-hero-actions, .drawer-shell-actions, .drawer-shell-footer-actions, .form-actions, .grid-actions, .responsive-actions) {
    width: 100%;
  }

  :where(.form-hero-actions > *, .drawer-shell-actions > *, .drawer-shell-footer-actions > *, .form-actions > *, .grid-actions > *, .responsive-actions > *) {
    flex: 1 1 150px;
  }

  :where(.modal-content, .detail-modal, .drawer-modal-panel, .drawer, .trd-dw, .side-panel, .cgp-modal) {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }
}