/* Kamel - camada responsiva global da area restrita.
   Carregada por ultimo para proteger todas as telas, inclusive modulos legados. */

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

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

button,
a,
input,
select,
textarea {
  touch-action: manipulation;
}

.sidebar,
.scope-sidebar {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.scroll-top-button {
  position: fixed;
  right: 16px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 95;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  background: #0b3761;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 20, 38, .28);
  font-size: 23px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px) scale(.92);
  transition: opacity .18s ease, transform .18s ease, background-color .18s ease;
}

.scroll-top-button:hover,
.scroll-top-button:focus-visible {
  background: #14538c;
}

.scroll-top-button.is-visible {
  opacity: .94;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

body.mobile-sidebar-open .scroll-top-button {
  opacity: 0;
  pointer-events: none;
}

/* Protecao principal: nenhuma foto de usuario pode usar o tamanho original. */
.sidebar .perfil .avatar,
.scope-sidebar .scope-profile-avatar {
  position: relative !important;
  display: block !important;
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  max-width: 58px !important;
  max-height: 58px !important;
  margin: 0 auto 8px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  contain: layout paint size !important;
  background: #e7edf3 !important;
}

.sidebar .perfil .avatar {
  width: 62px !important;
  height: 62px !important;
  min-width: 62px !important;
  min-height: 62px !important;
  max-width: 62px !important;
  max-height: 62px !important;
}

.sidebar .perfil .avatar > img,
.sidebar .perfil .avatar img[data-avatar],
.scope-sidebar .scope-profile-avatar > img,
.scope-sidebar .scope-profile-avatar img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.scope-sidebar .scope-profile {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.scope-sidebar .scope-logo,
.sidebar .sidebar-logo {
  display: block !important;
  max-width: 150px !important;
  max-height: 58px !important;
  object-fit: contain !important;
}

.conteudo-app,
.scope-main,
.scope-content,
.bib-main,
.catalogo-main,
.documents-content,
.costs-content,
.inspection-content {
  min-width: 0;
  max-width: 100%;
}

.table-wrap,
.table-scroll,
.labor-table-wrap,
.catalogo-tabela-wrap,
.financial-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

dialog,
.dialog-shell,
.library-preview-shell {
  max-width: calc(100vw - 20px);
}

@media (max-width: 1100px) {
  .scope-app {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .scope-sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 100 !important;
    width: min(82vw, 250px) !important;
    height: 100dvh !important;
    padding: 18px 14px !important;
    overflow-y: auto !important;
    transform: translateX(-105%) !important;
    transition: transform .2s ease !important;
    box-shadow: none;
  }

  .scope-sidebar.open {
    transform: translateX(0) !important;
    box-shadow: 18px 0 42px rgba(0, 20, 38, .38);
  }

  .scope-main {
    width: 100% !important;
    overflow-x: hidden !important;
  }

  .scope-topbar {
    width: 100%;
    max-width: 100vw;
  }

  .scope-topbar {
    z-index: 130 !important;
  }

  body.mobile-sidebar-open .scope-topbar {
    background: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    pointer-events: none;
  }

  body.mobile-sidebar-open .scope-topbar .icon-btn {
    pointer-events: auto;
    position: fixed !important;
    top: 10px;
    left: calc(min(82vw, 250px) - 56px);
    margin: 0 !important;
  }

  .scope-sidebar.open .scope-logo {
    width: min(150px, calc(100% - 62px)) !important;
    margin-left: 0 !important;
    margin-right: 62px !important;
  }
}

@media (max-width: 760px) {
  .app {
    display: block !important;
    width: 100% !important;
  }

  .sidebar {
    width: min(82vw, 260px) !important;
    height: 100dvh !important;
    overflow-y: auto !important;
  }

  .topbar,
  .scope-topbar {
    min-height: 62px;
    height: auto;
    padding: 9px 12px !important;
    gap: 9px !important;
    z-index: 130 !important;
  }

  .scope-topbar {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
  }

  .scope-topbar .icon-btn,
  .mobile-menu {
    display: inline-grid !important;
    place-items: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0 !important;
    border-radius: 8px;
    position: relative;
    z-index: 140;
    cursor: pointer;
  }

  .scope-topbar .icon-btn.is-sidebar-open,
  .mobile-menu.is-sidebar-open {
    border: 1px solid #cbd5e1 !important;
    background: #fff !important;
    color: #102a43 !important;
    box-shadow: 0 6px 18px rgba(0, 20, 38, .2);
    font-size: 30px;
    line-height: 1;
  }

  body.mobile-sidebar-open .topbar {
    background: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    pointer-events: none;
  }

  body.mobile-sidebar-open .topbar .mobile-menu {
    pointer-events: auto;
    position: fixed !important;
    top: 10px;
    left: calc(min(82vw, 260px) - 56px);
    margin: 0 !important;
  }

  .sidebar.aberta .sidebar-logo {
    width: min(145px, calc(100% - 62px)) !important;
    margin-left: 0 !important;
    margin-right: 62px !important;
  }

  .library-topbar-title,
  .scope-topbar .title,
  .scope-topbar .user-pill,
  .scope-topbar .work-select {
    min-width: 0;
  }

  .library-topbar-title strong,
  .scope-topbar .user-pill strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .scope-topbar .user-pill {
    margin-left: 0 !important;
    padding-left: 8px !important;
  }

  .scope-topbar .user-pill > span:last-child {
    display: none;
  }

  .scope-topbar .work-select,
  .scope-topbar .work-select-highlight {
    grid-column: 1 / -1;
    width: 100% !important;
    margin: 0 !important;
  }

  .scope-topbar .work-select select,
  .scope-topbar .work-select-highlight select {
    width: 100% !important;
    min-width: 0 !important;
  }

  .pagina,
  .scope-content,
  .bib-main,
  .catalogo-main,
  .documents-content,
  .costs-content,
  .inspection-content {
    width: 100% !important;
    padding: 16px 12px 30px !important;
  }

  .pagina h1,
  .title-row h1,
  .bib-heading h1,
  .catalogo-hero h1 {
    font-size: clamp(1.45rem, 7vw, 1.9rem) !important;
    overflow-wrap: anywhere;
  }

  .card,
  .document-card,
  .labor-panel,
  .cost-source-card,
  .results-panel,
  .inspection-panel,
  .inspection-form-card,
  .inspection-list-card {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .results-panel,
  .labor-panel,
  .financial-table-wrap,
  .catalogo-tabela-wrap {
    width: 100% !important;
    overflow: hidden !important;
  }

  .results-panel > .table-wrap,
  .labor-panel .labor-table-wrap,
  .financial-table-wrap,
  .catalogo-tabela-wrap {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .cards,
  .grid-2,
  .report-cards,
  .documents-layout,
  .costs-summary,
  .summary-grid,
  .inspection-layout,
  .inspection-grid,
  .inspection-groups,
  .detail-meta,
  .edit-form-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .library-section-tabs {
    top: 62px !important;
    min-height: 50px;
    padding: 0 10px !important;
    gap: 4px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .library-section-tabs a {
    min-height: 46px !important;
    padding: 0 11px !important;
    flex: 0 0 auto;
  }

  .bib-heading,
  .panel-heading,
  .document-list-heading,
  .labor-panel-heading,
  .cost-source-card,
  .history-item,
  .title-row,
  .dialog-header,
  .dialog-actions,
  .library-preview-actions {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .source-grid,
  .bib-stats,
  .bib-cards,
  .catalogo-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .source-card {
    min-width: 0 !important;
    min-height: 92px !important;
    padding: 13px !important;
  }

  .source-card strong {
    font-size: 1.2rem !important;
  }

  .library-filters,
  .catalogo-filtros,
  .inspection-document-form {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .library-filters > *,
  .catalogo-filtros > *,
  .library-filters input,
  .library-filters select,
  .catalogo-filtros input,
  .catalogo-filtros select {
    width: 100% !important;
    min-width: 0 !important;
  }

  .search-field {
    min-width: 0;
  }

  .search-field input {
    min-width: 0;
  }

  .results-heading,
  .work-document-row,
  .inspection-document-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .work-document-icon {
    display: none !important;
  }

  .work-document-actions,
  .preview-actions,
  .dialog-actions,
  .library-preview-actions,
  .report-actions,
  .actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    gap: 8px !important;
  }

  .work-document-actions > *,
  .preview-actions > *,
  .dialog-actions > *,
  .library-preview-actions > *,
  .report-actions > * {
    width: 100% !important;
    min-height: 44px;
    text-align: center;
  }

  .payment-item,
  .edit-service-row,
  .detail-service {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .payment-details {
    min-width: 0 !important;
  }

  .inspection-dialog,
  .library-preview-dialog {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
    margin: 6px !important;
  }

  .dialog-shell,
  .library-preview-shell {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 12px) !important;
    overflow: auto !important;
  }

  .biblioteca-view {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 8px !important;
  }

  .preview-frame,
  .instrucao-preview {
    height: 55dvh !important;
  }

  .bib-top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .bib-brand,
  .bib-user {
    min-width: 0;
    flex-wrap: wrap;
  }

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

  .login-painel {
    min-height: 100dvh;
    padding: 24px 16px !important;
  }

  .login-box,
  .login-logo {
    max-width: 100% !important;
  }
}

@media (max-width: 390px) {
  .source-grid,
  .bib-stats,
  .bib-cards,
  .catalogo-stats {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .pagina,
  .scope-content,
  .bib-main,
  .catalogo-main,
  .documents-content,
  .costs-content,
  .inspection-content {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }
}

/* Tabelas financeiras: mantêm colunas completas no celular, com gesto nativo
   e arraste rápido na horizontal. Esta regra fica por último para impedir que
   o modo de cartões estreite os textos. */
@media (max-width: 780px) {
  .costs-page .labor-panel .labor-table-wrap,
  body[data-work-operation="medicoes"] .measurement-agreements .measurement-table-scroll {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #ffcc00 #082b4b;
  }

  .costs-page .labor-panel .labor-table-wrap::-webkit-scrollbar,
  body[data-work-operation="medicoes"] .measurement-agreements .measurement-table-scroll::-webkit-scrollbar { height: 16px; }
  .costs-page .labor-panel .labor-table-wrap::-webkit-scrollbar-track,
  body[data-work-operation="medicoes"] .measurement-agreements .measurement-table-scroll::-webkit-scrollbar-track { background: #082b4b; border-radius: 999px; }
  .costs-page .labor-panel .labor-table-wrap::-webkit-scrollbar-thumb,
  body[data-work-operation="medicoes"] .measurement-agreements .measurement-table-scroll::-webkit-scrollbar-thumb { background: #ffcc00; border: 3px solid #082b4b; border-radius: 999px; }

  .costs-page .labor-panel .labor-table-wrap .labor-table,
  body[data-work-operation="medicoes"] .measurement-agreements .measurement-table-scroll .labor-table {
    display: table !important;
    width: 980px !important;
    min-width: 980px !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
  }
  .costs-page .labor-panel .labor-table-wrap .labor-table thead,
  body[data-work-operation="medicoes"] .measurement-agreements .measurement-table-scroll .labor-table thead { display: table-header-group !important; }
  .costs-page .labor-panel .labor-table-wrap .labor-table tbody,
  body[data-work-operation="medicoes"] .measurement-agreements .measurement-table-scroll .labor-table tbody { display: table-row-group !important; padding: 0 !important; }
  .costs-page .labor-panel .labor-table-wrap .labor-table tr,
  body[data-work-operation="medicoes"] .measurement-agreements .measurement-table-scroll .labor-table tr { display: table-row !important; width: auto !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; }
  .costs-page .labor-panel .labor-table-wrap .labor-table th,
  .costs-page .labor-panel .labor-table-wrap .labor-table td,
  body[data-work-operation="medicoes"] .measurement-agreements .measurement-table-scroll .labor-table th,
  body[data-work-operation="medicoes"] .measurement-agreements .measurement-table-scroll .labor-table td { display: table-cell !important; width: auto !important; min-width: 0 !important; padding: 11px 10px !important; white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; }
  .costs-page .labor-panel .labor-table-wrap .labor-table td::before,
  body[data-work-operation="medicoes"] .measurement-agreements .measurement-table-scroll .labor-table td::before { display: none !important; content: none !important; }
  .costs-page .labor-panel .labor-table-wrap .labor-table th:first-child,
  .costs-page .labor-panel .labor-table-wrap .labor-table td:first-child,
  body[data-work-operation="medicoes"] .measurement-agreements .measurement-table-scroll .labor-table th:first-child,
  body[data-work-operation="medicoes"] .measurement-agreements .measurement-table-scroll .labor-table td:first-child { min-width: 210px !important; }
}

/* Tabelas de operação: no celular cada linha é apresentada como um cartão
   identificado, sem exigir rolagem lateral. A tabela normal é mantida no desktop. */
@media (max-width: 760px) {
  table.mobile-card-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    border: 0 !important;
    background: transparent !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 {
    display: grid !important;
    gap: 12px !important;
  }

  table.mobile-card-table tbody tr {
    display: block !important;
    width: 100% !important;
    border: 1px solid #315d82 !important;
    border-left: 4px solid #ffcc00 !important;
    border-radius: 9px !important;
    background: #082b4b !important;
    padding: 7px 12px !important;
    box-shadow: 0 4px 14px rgba(0, 20, 38, 0.18) !important;
  }

  table.mobile-card-table tbody td {
    display: grid !important;
    grid-template-columns: minmax(105px, 0.8fr) minmax(0, 1.2fr) !important;
    align-items: start !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(188, 209, 227, 0.18) !important;
    text-align: left !important;
    color: #fff !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

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

  table.mobile-card-table tbody td::before {
    content: attr(data-label);
    display: block;
    color: #ffcc00 !important;
    font-size: 0.68rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;
    line-height: 1.35;
    text-transform: uppercase;
  }

  table.mobile-card-table tbody td[data-label=""]::before,
  table.mobile-card-table tbody td[colspan]::before {
    content: none !important;
  }

  table.mobile-card-table tbody td[colspan] {
    display: block !important;
    text-align: center !important;
    padding: 16px 0 !important;
    color: #c9dced !important;
  }

  table.mobile-card-table tbody td button,
  table.mobile-card-table tbody td a {
    max-width: 100%;
    white-space: normal;
  }
}

@media (max-width: 390px) {
  table.mobile-card-table tbody td {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
  }
}

/* Fechar menu: botão fica dentro da barra lateral e acompanha sua rolagem. */
.mobile-sidebar-close{display:none}
@media (max-width:760px){
  /* O botão externo é apenas o acionador do menu fechado.
     Com o menu aberto, o fechamento acontece exclusivamente dentro da barra. */
  body.mobile-sidebar-open .scope-topbar .icon-btn,
  body.mobile-sidebar-open .topbar .mobile-menu{display:none!important}

  .scope-sidebar > .mobile-sidebar-close,
  .sidebar > .mobile-sidebar-close{
    position:sticky!important;
    top:0!important;
    z-index:12!important;
    display:grid!important;
    place-items:center!important;
    align-self:flex-end!important;
    flex:0 0 auto!important;
    width:36px!important;
    min-width:36px!important;
    height:36px!important;
    min-height:36px!important;
    margin:0 0 6px 0!important;
    border:1px solid rgba(188,209,227,.35)!important;
    border-radius:8px!important;
    /* Discreto: usa o próprio fundo azul da barra lateral. */
    background:transparent!important;
    color:#fff!important;
    font-size:27px!important;
    font-weight:400!important;
    line-height:1!important;
    cursor:pointer!important;
    box-shadow:none!important;
  }
  .scope-sidebar > .mobile-sidebar-close:active,
  .sidebar > .mobile-sidebar-close:active{background:rgba(255,255,255,.12)!important;color:#ffcc00!important}
}