/*
 * Camada responsiva canônica. A base é mobile-first; os únicos breakpoints
 * compartilhados são 600, 900 e 1200 px. Estilos de domínio continuam nas
 * respectivas folhas para evitar acoplamento entre módulos.
 */

:root {
  --layout-gap: var(--space-md);
  --layout-panel-padding: clamp(16px, 4vw, 24px);
  --hero-heading-size: clamp(2.25rem, 5.25vw, 4.75rem);
}

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

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

input[type="file"] {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

input:not([type="checkbox"]):not([type="radio"]),
select {
  min-height: var(--control-min-height);
}

.site-header,
.app-shell,
.workspace,
.hero-panel,
.remote-shell,
.tool-layout,
.tool-stack,
.tool-panel,
.online-dashboard,
.accountability-layout,
.reports-shell,
.maintenance-content,
.admin-control-content,
.admin-control-panel,
.admin-toolbar {
  min-width: 0;
}

.workspace {
  width: min(100%, var(--content-max-width));
  margin-inline: auto;
  padding-inline: var(--content-gutter);
}

/* Navegação: menu explícito, legível e navegável em telas pequenas. */
.site-header {
  gap: var(--space-sm);
  min-height: var(--site-header-height);
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));
}

.menu-toggle {
  display: inline-flex;
  width: var(--control-min-height);
  min-height: var(--control-min-height);
  align-items: center;
  justify-content: center;
}

.header-nav {
  position: fixed;
  z-index: 50;
  top: calc(var(--site-header-height) + var(--space-xs));
  right: var(--space-sm);
  left: var(--space-sm);
  width: auto;
  display: none;
  max-height: calc(100dvh - var(--site-header-height) - 24px);
  overflow: auto;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xs);
  padding: var(--space-sm);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: rgba(4, 9, 17, 0.98);
  box-shadow: var(--shadow);
}

.hero-copy {
  min-width: 0;
}

.hero-copy h1 {
  max-width: 100%;
  font-size: var(--hero-heading-size);
  line-height: 0.98;
  letter-spacing: -0.035em;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}

#home .home-hero .hero-copy h1 {
  font-size: clamp(2rem, 8.75vw, 3.25rem);
  letter-spacing: -0.045em;
}

#admin .admin-hero .hero-copy h1,
#maintenance .admin-hero .hero-copy h1 {
  font-size: clamp(2.1rem, 4.7vw, 4.6rem);
}

.header-nav.is-open {
  display: grid;
}

.header-nav > .nav-image-link,
.header-nav > .passwords-menu > .nav-image-button,
.header-nav > #logoutButton,
.passwords-dropdown .nav-image-link {
  width: 100%;
  min-height: var(--control-min-height);
}

.passwords-menu,
.passwords-dropdown,
.admin-dropdown {
  min-width: 0;
}

.passwords-dropdown,
.admin-dropdown {
  position: static;
  width: 100%;
  margin-top: var(--space-xs);
}

.passwords-dropdown .nav-image-link {
  grid-template-columns: 38px minmax(0, 1fr);
  min-height: 56px;
  gap: 12px;
  padding: 10px 12px;
  text-align: left;
}

.passwords-dropdown .nav-image-link.password-vault-link {
  grid-template-columns: 38px minmax(0, 1fr);
  min-height: 64px;
  padding: 10px 12px;
}

.passwords-dropdown .password-vault-link .dropdown-icon {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  background-size: contain;
}

.header-nav.is-open .passwords-menu.is-open .passwords-dropdown {
  max-height: none;
  overflow: visible;
}

.dropdown-copy {
  gap: 2px;
}

.dropdown-copy > span {
  font-size: 0.9rem;
  line-height: 1.15;
  text-align: left;
}

.dropdown-copy small {
  max-width: none;
  font-size: 0.72rem;
  line-height: 1.25;
}

.dropdown-icon {
  width: 30px;
  height: 30px;
}

/* Blocos e ações: nada excede o viewport; conteúdo denso vira uma coluna. */
.hero-panel,
.remote-shell,
.tool-panel,
.result-panel,
.auth-main-card,
.auth-side-card,
.online-filter-panel,
.accountability-panel,
.accountability-detail {
  padding: var(--layout-panel-padding);
}

.tool-layout,
.hero-panel,
.tool-panel,
.remote-grid,
.sicom-grid,
.upload-grid,
.summary-grid,
.online-filter-primary,
.online-filter-secondary,
.online-stats,
.maintenance-grid,
.online-reference-grid,
.online-reference-admin-grid,
.online-reference-rules-form,
.online-module-row,
.maintenance-row,
.maintenance-row.wide,
.maintenance-row.url-row,
.admin-layout,
.admin-control-panel,
.admin-toolbar,
.admin-user-card,
.sector-select-row,
.reports-additional-grid,
.reports-additional-row,
.reports-credit-row,
.reports-supplementation-base,
.reports-workflow-guide,
.reports-result-grid,
.reports-draft-form,
.reports-upload-form,
.reports-draft-row,
.reports-month-row,
.accountability-layout,
.accountability-filters,
.accountability-cycle-form,
.accountability-template-item,
.accountability-item-form {
  grid-template-columns: minmax(0, 1fr);
}

/* O módulo remoto possui uma regra histórica com coluna fixa de 350 px.
   Mantê-lo em uma coluna até haver espaço evita que o cartão visual cubra
   título e descrição em celulares. */
#remote .hero-panel.remote-hero {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  align-items: start;
}

#remote .remote-hero-visual {
  min-height: 0;
  justify-items: center;
  padding: clamp(20px, 6vw, 28px);
  text-align: center;
}

#remote .remote-device-art {
  width: min(100%, 248px);
  aspect-ratio: 248 / 180;
  height: auto;
  margin-inline: auto;
}

#remote .remote-search-panel {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

#remote .remote-search-panel .search-box {
  width: 100%;
  min-width: 0;
}

.tool-sidebar {
  position: static;
  max-height: none;
  padding: var(--layout-panel-padding);
}

.tool-tab {
  min-height: 76px;
  align-content: center;
  gap: 5px;
  padding-block: 12px;
}

.tool-tab span {
  line-height: 1.2;
}

.tool-tab strong {
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.tool-nav {
  max-height: min(45dvh, 360px);
  padding-right: 0;
}

/* Cada entregável inclui campo, obrigatório e remoção. O intervalo entre
   itens evita que o botão de um seja confundido com o próximo campo. */
#accountability .accountability-template-builder #accountabilityTemplateItems {
  display: grid;
  gap: var(--space-md);
}

.remote-search-panel,
.remote-results-head,
.online-dashboard-head,
.admin-toolbar,
.admin-actions,
.admin-form-actions,
.reports-panel-head,
.reports-step-heading,
.reports-input-actions,
.reports-approval-actions,
.reports-upload-actions,
.accountability-actions,
.accountability-panel-heading,
.accountability-dialog form > div {
  align-items: stretch;
  flex-direction: column;
}

.remote-search-panel > *,
.remote-results-head > *,
.online-dashboard-head > *,
.admin-toolbar > *,
.admin-actions > *,
.admin-form-actions > *,
.reports-panel-head > *,
.reports-step-heading > *,
.reports-input-actions > *,
.reports-approval-actions > *,
.reports-upload-actions > *,
.accountability-actions > * {
  min-width: 0;
}

.primary-button,
.secondary-button,
.admin-tab,
.tool-tab,
.online-page-chip,
.accountability-cycle {
  min-height: var(--control-min-height);
}

.online-table-scroll,
.accountability-calendar {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.admin-tabs,
.online-pagination-controls {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.admin-tabs {
  flex-wrap: nowrap;
}

.admin-users,
.audit-list,
.security-alert-list,
.sector-access-list,
.session-list {
  grid-template-columns: minmax(0, 1fr);
}

.admin-user-card,
.admin-record-card {
  min-width: 0;
}

.admin-user-content,
.admin-user-summary,
.admin-user-details,
.sector-access-summary,
.sector-access-details {
  display: grid;
  gap: var(--space-sm);
  min-width: 0;
}

.admin-user-details,
.sector-access-details {
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line);
}

.admin-user-details[hidden],
.sector-access-details[hidden] {
  display: none;
}

.admin-user-details-toggle,
.sector-access-details-toggle {
  width: 100%;
}

.admin-tab {
  flex: 0 0 auto;
}

.accountability-wide,
.accountability-item-form > div {
  grid-column: auto;
}

.accountability-calendar {
  grid-template-columns: repeat(7, minmax(78px, 1fr));
}

.vault-maintenance-grid {
  grid-template-columns: minmax(0, 1fr);
}

.reports-document-item,
.reports-audit-item {
  align-items: flex-start;
  flex-direction: column;
}

.reports-context-bar small {
  width: 100%;
  margin-left: 0;
}

@media (min-width: 600px) {
  .workspace {
    padding-inline: clamp(24px, 4vw, 48px);
  }

  .remote-grid,
  .sicom-grid,
  .summary-grid,
  .online-stats,
  .accountability-totals,
  .reports-result-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .upload-grid,
  .accountability-cycle-form,
  .accountability-filters,
  .reports-workflow-guide,
  .reports-draft-form,
  .reports-upload-form,
  .reports-draft-row,
  .reports-month-row,
  .reports-additional-grid,
  .reports-additional-row,
  .reports-credit-row,
  .reports-supplementation-base {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sector-select-row {
    grid-template-columns: minmax(160px, 1fr) auto;
  }

  .admin-user-details-toggle,
  .sector-access-details-toggle {
    width: fit-content;
  }

  .remote-search-panel,
  .remote-results-head,
  .online-dashboard-head,
  .admin-toolbar,
  .admin-actions,
  .admin-form-actions,
  .reports-panel-head,
  .reports-step-heading,
  .reports-input-actions,
  .reports-approval-actions,
  .reports-upload-actions,
  .accountability-actions,
  .accountability-panel-heading,
  .accountability-dialog form > div {
    align-items: center;
    flex-direction: row;
  }

  .accountability-wide,
  .accountability-item-form > div {
    grid-column: 1 / -1;
  }
}

@media (min-width: 900px) {
  .tool-layout {
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  }

  .tool-sidebar {
    position: sticky;
    top: calc(var(--site-header-height) + var(--space-md));
    max-height: calc(100dvh - var(--site-header-height) - 2 * var(--space-md));
  }

  .tool-panel,
  .hero-panel,
  .accountability-layout,
  .maintenance-grid,
  .online-reference-admin-grid,
  .admin-toolbar,
  .admin-user-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .admin-toolbar {
    grid-template-columns: minmax(160px, 1fr) minmax(220px, 360px);
  }

  .admin-user-card {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.72fr);
  }

  .remote-grid,
  .sicom-grid,
  .online-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .reports-draft-form {
    grid-template-columns: minmax(220px, 1fr) minmax(120px, 160px) minmax(150px, 180px) auto;
  }

  .reports-draft-row {
    grid-template-columns: minmax(160px, 1fr) 120px 120px 120px auto auto;
  }

  .reports-month-row {
    grid-template-columns: minmax(140px, 160px) repeat(3, minmax(150px, 1fr)) auto;
  }

  .reports-upload-form {
    grid-template-columns: minmax(180px, 1fr) auto minmax(200px, 280px) auto;
  }

  .admin-tabs {
    flex-wrap: wrap;
    overflow: visible;
  }

  .vault-maintenance-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 1200px) {
  .workspace {
    padding-inline: clamp(32px, 5vw, 72px);
  }

  .online-stats,
  .summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .remote-grid,
  .sicom-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .online-filter-primary {
    grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(145px, 1fr));
  }

  #remote .hero-panel.remote-hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.72fr);
    min-height: 420px;
    align-items: stretch;
  }

  #remote .remote-search-panel {
    grid-template-columns: minmax(200px, 0.34fr) minmax(0, 1fr);
    align-items: end;
  }
}

/* Em notebook, a navegação reduzida cabe sem recorrer ao menu lateral. */
@media (min-width: 1280px) {
  .site-header {
    gap: 12px;
    padding-inline: clamp(16px, 2vw, 32px);
  }

  .brand img {
    width: clamp(150px, 11vw, 188px);
  }

  .menu-toggle {
    display: none;
  }

  .header-nav,
  .header-nav.is-open {
    position: static;
    display: flex;
    flex-wrap: nowrap;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    max-height: none;
    overflow: visible;
    width: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .header-nav > .nav-image-link,
  .header-nav > .passwords-menu > .nav-image-button,
  .header-nav > #logoutButton {
    width: auto;
    min-width: 0;
    height: 46px;
    padding-inline: 10px;
  }

  .header-nav > .remote-link,
  .header-nav > .online-update-link {
    min-width: 126px;
  }

  .header-nav > .accountability-link {
    min-width: 164px;
  }

  .header-nav > .nav-image-link > span,
  .header-nav > .passwords-menu > .nav-image-button > span,
  .header-nav > #logoutButton > span {
    font-size: 0.8rem;
    letter-spacing: 0;
  }

  /* Evita 20 px de rolagem residual no cartão de acesso em notebook. */
  #login .workspace {
    padding-top: 12px;
    padding-bottom: 18px;
  }

  .passwords-dropdown,
  .admin-dropdown {
    position: absolute;
    width: min(300px, calc(100vw - 32px));
    margin-top: 0;
  }

  .passwords-dropdown .nav-image-link,
  .passwords-dropdown .nav-image-link.password-vault-link {
    grid-template-columns: 44px minmax(0, 1fr);
    min-height: 68px;
    padding: 10px 14px;
  }

  /* A regra histórica dos cofres usa 72 px; neste menu compacto o ícone
     precisa respeitar a primeira coluna para não invadir os rótulos. */
  .passwords-dropdown .password-vault-link .dropdown-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    background-size: contain;
  }

  .passwords-dropdown .dropdown-copy {
    align-self: center;
  }
}