/*
 * Estação Conhecimento — acabamento responsivo profissional 2026
 * --------------------------------------------------------------------------
 * Camada final de compatibilidade para Bootstrap, utilitários locais e os
 * temas legados. Não altera regras do sistema: organiza o shell, tipografia,
 * formulários, tabelas, modais e ações em qualquer largura de tela.
 */

:root{
  --ec-brand: #007e7a;
  --ec-brand-dark: #07595a;
  --ec-brand-deep: #063d40;
  --ec-brand-soft: #eaf7f4;
  --ec-gold: #ecb11f;
  --ec-ink: #163b3a;
  --ec-copy: #496b69;
  --ec-line: rgba(0,126,122,.15);
  --ec-focus: 0 0 0 .25rem rgba(0,126,122,.14);
  --ec-card-shadow: 0 12px 34px rgba(6,61,64,.09);
  --ec-card-shadow-hover: 0 18px 42px rgba(6,61,64,.13);
  --ec-safe-bottom: env(safe-area-inset-bottom, 0px);
  --bs-primary: #007e7a;
  --bs-primary-rgb: 0,126,122;
  --bs-link-color: #007e7a;
  --bs-link-hover-color: #07595a;
}

html{
  width: 100%;
  min-width: 0;
  overflow-x: clip;
  scroll-padding-top: 5.5rem;
}

body{
  width: 100%;
  min-width: 0 !important;
  overflow-x: clip;
  line-height: 1.5;
}

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

img{
  height: auto;
}

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

a,
button,
input,
select,
textarea,
[tabindex]:not([tabindex="-1"]){
  -webkit-tap-highlight-color: transparent;
}

:focus-visible{
  outline: 3px solid rgba(236,177,31,.78);
  outline-offset: 3px;
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.ec-input:focus-visible{
  outline: 0;
  box-shadow: var(--ec-focus) !important;
}

/* Shell e aproveitamento de espaço */
#ecMain,
#ecMain > main,
#ecMain > footer,
#ecMain .row,
#ecMain [class*="col-"]{
  min-width: 0;
}

#ecMain{
  width: auto;
}

#ecMain > main.mx-auto,
#ecMain > footer > div{
  width: 100%;
  max-width: 1600px !important;
}

#ecMain > main.mx-auto{
  padding-bottom: 2rem !important;
}

header.sticky{
  z-index: 35 !important;
}

header.sticky .mx-auto{
  max-width: 1600px !important;
}

#ecSidebar{
  isolation: isolate;
}

#ecSidebar nav{
  overscroll-behavior: contain;
}

#ecSidebar button,
header.sticky button{
  margin: 0;
  border: 0;
  font: inherit;
}

#ecSidebarClose,
#ecSidebarOpen,
#ecMobileSearchToggle{
  background: transparent;
}

#ecSidebarOpen,
#ecMobileSearchToggle,
header.sticky a[data-ec-support-topbar-link]{
  width: 44px;
  min-width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
}

#ecSidebar .ec-brand-logo,
.ec-topbar-brand{
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 10px 24px rgba(2,6,23,.18) !important;
}

#ecSidebar .ec-brand-logo img,
.ec-topbar-brand img{
  width: 100%;
  height: 100%;
  padding: .28rem;
  object-fit: contain;
}

.ec-topbar-brand{
  border-color: rgba(0,126,122,.12);
  box-shadow: 0 7px 18px rgba(6,61,64,.10) !important;
}

#ecProfileMenu{
  z-index: 70;
  max-width: calc(100vw - 1rem);
}

#ecMobileSearchPanel .ec-input{
  min-height: 48px;
  padding-right: 1rem;
  background: #fff !important;
}

/* Cabeçalhos e hierarquia visual */
.app-page-header,
.ec-page-head{
  min-width: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(234,247,244,.86)) !important;
  border: 1px solid var(--ec-line) !important;
  border-radius: 22px !important;
  padding: 1.15rem 1.25rem !important;
  box-shadow: 0 9px 28px rgba(6,61,64,.065);
}

.app-page-header > *,
.ec-page-head > *{
  min-width: 0;
}

.app-page-header h1,
.ec-page-head h1{
  color: var(--ec-ink) !important;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.app-page-header .text-muted,
.ec-page-head .text-muted{
  text-wrap: pretty;
}

.ndhe-page-actions,
.app-page-header > div:last-child,
.ec-page-head > div:last-child{
  max-width: 100%;
}

/* Cartões */
.card,
.ec-card,
.ec-table-shell{
  border-color: var(--ec-line) !important;
  box-shadow: var(--ec-card-shadow) !important;
}

.card{
  min-width: 0;
  overflow: visible;
}

.card:hover{
  box-shadow: var(--ec-card-shadow-hover) !important;
}

.card::before,
.ec-card::before{
  pointer-events: none;
  border-radius: inherit;
}

.card-header:first-child{
  border-radius: 21px 21px 0 0 !important;
}

.card-footer:last-child{
  border-radius: 0 0 21px 21px !important;
}

.card-header > *,
.card-body > *,
.card-footer > *{
  min-width: 0;
}

.card-title,
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6{
  color: var(--ec-ink);
  text-wrap: balance;
}

.alert{
  overflow-wrap: anywhere;
}

.alert > :last-child{
  margin-bottom: 0;
}

/* Formulários e controles */
.form-label{
  color: #365e5c;
  font-weight: 700;
}

.form-control,
.form-select,
.ec-input,
.input-group-text{
  width: 100%;
  min-width: 0;
  border-color: rgba(0,126,122,.18) !important;
}

.form-control:focus,
.form-select:focus,
.ec-input:focus{
  border-color: rgba(0,126,122,.55) !important;
  box-shadow: var(--ec-focus) !important;
}

.form-select{
  padding-right: 2.5rem;
}

.input-group{
  min-width: 0;
  flex-wrap: nowrap;
}

.input-group > .form-control,
.input-group > .form-select{
  min-width: 0;
}

.input-group-text{
  width: auto;
  flex: 0 0 auto;
}

input[type="file"].form-control{
  min-height: 48px;
}

textarea.form-control{
  resize: vertical;
}

.form-check{
  min-width: 0;
}

.form-check-input{
  flex: 0 0 auto;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  max-width: 100%;
  line-height: 1.25;
  white-space: normal;
}

.btn-primary,
.btn-success{
  background: linear-gradient(135deg, var(--ec-brand), #12aaa4) !important;
  border-color: transparent !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus{
  background: linear-gradient(135deg, var(--ec-brand-dark), var(--ec-brand)) !important;
}

.btn-group{
  max-width: 100%;
}

.btn-group > form{
  display: inline-flex;
}

.search-box-modern{
  max-width: 100%;
}

.search-box-modern .form-control{
  width: 100%;
}

/* Tabelas */
.table-responsive,
.ndhe-table-scroll{
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: visible;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.table-responsive:focus-visible,
.ndhe-table-scroll:focus-visible{
  outline: 3px solid rgba(0,126,122,.28);
  outline-offset: -3px;
}

.table{
  width: 100%;
}

.table th,
.table td{
  overflow-wrap: normal;
  word-break: normal;
}

.table thead th{
  white-space: nowrap;
}

.table td .badge{
  max-width: 100%;
  white-space: normal;
  text-align: left;
}

.table td .btn-group,
.table td > .d-flex{
  max-width: 100%;
}

.table-responsive > .table > :last-child > tr:last-child > *{
  border-bottom: 0 !important;
}

.chamada-table-wrapper,
.ec-report-table-wrapper{
  max-width: 100%;
  overscroll-behavior-inline: contain;
}

.chamada-table-wrapper .chamada-table,
.ec-report-table-wrapper .ec-report-table{
  margin-bottom: 0;
}

/* Paginação */
.pagination{
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: 0;
}

.pagination .page-item{
  margin: 0 !important;
}

/* Modais e menus */
.modal{
  padding-left: 0 !important;
}

.modal-dialog{
  width: auto;
  max-width: min(var(--bs-modal-width, 500px), calc(100vw - 2rem));
  margin-left: auto;
  margin-right: auto;
}

.modal-content{
  max-height: calc(100dvh - 2rem);
  overflow: hidden;
}

.modal-body{
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal-footer{
  flex-wrap: wrap;
}

.dropdown-menu{
  max-width: calc(100vw - 1rem);
}

/* Suporte, anexos e conteúdo longo */
.ec-file-title,
.ec-attach-name,
.ec-chat-bubble,
.ec-ticket-subject,
.text-break{
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ec-chat-bubble img,
.ec-chat-bubble video,
.ec-media{
  max-width: 100% !important;
}

/* Login e recuperação */
body.auth-page{
  min-height: 100dvh;
  padding-bottom: 0 !important;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  background:
    radial-gradient(900px circle at 12% 8%, rgba(236,177,31,.22), transparent 44%),
    radial-gradient(800px circle at 88% 16%, rgba(0,126,122,.24), transparent 44%),
    linear-gradient(135deg, #06393d 0%, #0b5457 48%, #052d30 100%) !important;
}

.auth-stage{
  width: 100%;
  min-height: 100dvh;
}

.auth-card,
.auth-form-panel,
.auth-form,
.auth-form-panel > *{
  min-width: 0;
}

.auth-brand-mark{
  flex: 0 0 auto;
  overflow: hidden;
}

.auth-brand-mark img{
  width: 100%;
  height: 100%;
  padding: .28rem;
  border-radius: inherit;
  background: rgba(255,255,255,.96);
  object-fit: contain;
}

.auth-form-title{
  color: var(--ec-ink);
  text-wrap: balance;
}

.auth-form-subtitle{
  text-wrap: pretty;
}

.auth-password-toggle{
  width: 46px;
  min-width: 46px;
  padding: 0 !important;
}

/* Notebook e desktop compacto */
@media (min-width: 1200px) and (max-width: 1439.98px){
  #ecSidebar{
    width: 16.75rem !important;
  }

  #ecMain{
    margin-left: 16.75rem !important;
  }

  html.ec-collapsed #ecSidebar{
    width: 5.25rem !important;
  }

  html.ec-collapsed #ecMain{
    margin-left: 5.25rem !important;
  }

  #ecMain > main.mx-auto{
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

/* Tablet: menu lateral vira drawer para não esmagar o conteúdo */
@media (max-width: 1199.98px){
  #ecMain,
  html.ec-collapsed #ecMain{
    width: 100%;
    margin-left: 0 !important;
  }

  #ecSidebar,
  html.ec-collapsed #ecSidebar{
    width: min(88vw, 342px) !important;
    transform: translateX(-110%);
  }

  html.ec-sidebar-open #ecSidebar,
  html.ec-sidebar-open.ec-collapsed #ecSidebar{
    transform: translateX(0);
  }

  html.ec-sidebar-open body{
    overflow: hidden;
  }

  #ecSidebarOverlay{
    display: none !important;
  }

  html.ec-sidebar-open #ecSidebarOverlay{
    display: block !important;
  }

  #ecSidebarOpen,
  #ecSidebar > .h-full > .md\:hidden{
    display: flex !important;
  }

  #ecSidebar > .h-full > a.hidden.md\:flex{
    display: none !important;
  }

  header.sticky .md\:hidden{
    display: block !important;
  }

  header.sticky button.md\:hidden{
    display: inline-flex !important;
  }

  header.sticky .hidden.md\:flex{
    display: none !important;
  }

  html.ec-collapsed .ec-sidebar-label,
  html.ec-collapsed .ec-sidebar-section,
  html.ec-collapsed .ec-sidebar-footer-text{
    display: initial !important;
  }

  html.ec-collapsed #ecSidebar nav{
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }

  html.ec-collapsed .ec-sidebar-item{
    justify-content: flex-start;
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }

  html.ec-collapsed .ec-sidebar-item > span:first-child{
    margin-left: 0;
    margin-right: 0;
  }

  .ec-sidebar-mini-avatar,
  #ecSidebarCollapse{
    display: none !important;
  }
}

@media (min-width: 640px){
  #ecMobileSearchToggle,
  #ecMobileSearchPanel{
    display: none !important;
  }
}

/* Celular e tablet estreito */
@media (max-width: 767.98px){
  #ecMain > main.mx-auto{
    padding-left: max(.75rem, env(safe-area-inset-left, .75rem)) !important;
    padding-right: max(.75rem, env(safe-area-inset-right, .75rem)) !important;
    padding-bottom: calc(1rem + var(--ec-safe-bottom)) !important;
  }

  .app-page-header,
  .ec-page-head{
    padding: 1rem !important;
  }

  .app-page-header > div:first-child,
  .ec-page-head > div:first-child{
    width: 100%;
  }

  .app-page-header h1,
  .ec-page-head h1{
    font-size: 1.22rem !important;
    line-height: 1.25;
  }

  .card:hover,
  .btn:hover,
  .btn:focus{
    transform: none !important;
  }

  .card-header,
  .card-body,
  .card-footer{
    padding: 1rem !important;
  }

  .card-body.p-0,
  .card-body.px-0{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .alert{
    padding: .9rem 1rem;
  }

  .form-control,
  .form-select,
  .ec-input,
  textarea.form-control{
    font-size: 16px !important;
  }

  .btn{
    min-height: 46px;
  }

  .btn-sm{
    min-height: 42px;
    padding: .55rem .75rem;
  }

  .btn-group{
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
  }

  .btn-group > .btn,
  .btn-group > form,
  .btn-group > form > .btn{
    border-radius: 13px !important;
  }

  .table-responsive.ec-mobile-cards > table > tbody > tr{
    border-color: var(--ec-line);
    box-shadow: 0 8px 24px rgba(6,61,64,.075);
  }

  .table-responsive.ec-mobile-cards > table > tbody > tr > td,
  .table-responsive.ec-mobile-cards > table > tbody > tr > th{
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .table-responsive.ec-mobile-cards > table > tbody > tr > td::before,
  .table-responsive.ec-mobile-cards > table > tbody > tr > th::before{
    flex-basis: 36%;
    color: #4e716f;
  }

  .table-responsive.ec-mobile-cards td > *,
  .table-responsive.ec-mobile-cards th > *{
    min-width: 0;
    max-width: 64%;
  }

  .table-responsive.ec-mobile-cards td > .btn-group,
  .table-responsive.ec-mobile-cards td > form,
  .table-responsive.ec-mobile-cards td > .d-flex{
    max-width: 64%;
  }

  .table-responsive.ec-mobile-cards td .btn-group,
  .table-responsive.ec-mobile-cards td .d-flex{
    flex-wrap: wrap;
  }

  .chamada-table-wrapper .chamada-table *,
  .ec-report-table-wrapper .ec-report-table *{
    max-width: none;
  }

  .pagination{
    justify-content: center;
  }

  .modal-dialog,
  .modal-dialog-centered{
    max-width: calc(100vw - 1rem);
    margin: .5rem auto;
    min-height: calc(100dvh - 1rem);
  }

  .modal-dialog-centered::before{
    display: none;
  }

  .modal-content{
    max-height: calc(100dvh - 1rem);
    border-radius: 22px !important;
  }

  .modal-footer > .btn{
    flex: 1 1 9rem;
  }

  .ec-mobile-tabbar{
    padding-bottom: calc(.45rem + var(--ec-safe-bottom));
  }

  .ec-mobile-tabbar a{
    min-width: 0;
    color: rgba(226,232,240,.78) !important;
  }

  .ec-mobile-tabbar a.is-active,
  .ec-mobile-tabbar a.is-current-path{
    color: #fff !important;
  }

  .ec-mobile-tabbar a.is-current-path{
    background: linear-gradient(135deg, rgba(236,177,31,.96), rgba(0,126,122,.92));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 12px 28px rgba(0,126,122,.20);
  }

  .auth-stage{
    padding: max(.75rem, env(safe-area-inset-top, .75rem)) .75rem max(.75rem, var(--ec-safe-bottom));
  }

  .auth-card{
    width: 100%;
  }

  .auth-mobile-brand{
    align-items: center;
  }

  .auth-brand-mark{
    width: 50px;
    height: 50px;
    border-radius: 16px;
  }

  body.auth-login-page .auth-login-form-panel,
  .auth-form-panel{
    padding: 1.15rem !important;
  }

  .auth-form-title,
  body.auth-login-page .auth-login-form-title{
    font-size: clamp(1.7rem, 8vw, 2.1rem);
  }
}

@media (max-width: 575.98px){
  .app-page-header > div:last-child,
  .ec-page-head > div:last-child,
  .ndhe-page-actions{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: .5rem !important;
  }

  .app-page-header > div:last-child > .btn,
  .ec-page-head > div:last-child > .btn,
  .ndhe-page-actions > .btn{
    width: 100%;
  }

  .card-header .d-flex > .badge{
    width: auto !important;
    align-self: flex-start;
  }

  .search-box-modern{
    width: 100% !important;
    min-width: 0 !important;
  }

  .table-responsive.ec-mobile-cards > table > tbody > tr > td,
  .table-responsive.ec-mobile-cards > table > tbody > tr > th{
    gap: .6rem;
    padding: .75rem .85rem !important;
  }

  .table-responsive.ec-mobile-cards > table > tbody > tr > td::before,
  .table-responsive.ec-mobile-cards > table > tbody > tr > th::before{
    flex-basis: 34%;
    font-size: .69rem;
  }

  .table-responsive.ec-mobile-cards td > *,
  .table-responsive.ec-mobile-cards th > *,
  .table-responsive.ec-mobile-cards td > .btn-group,
  .table-responsive.ec-mobile-cards td > form,
  .table-responsive.ec-mobile-cards td > .d-flex{
    max-width: 66%;
  }

  .ec-mobile-tabbar a{
    font-size: .62rem;
  }

  .ec-mobile-tabbar a i{
    font-size: 1.08rem;
  }

  body.auth-login-page .auth-login-options{
    width: 100%;
  }
}

@media (max-width: 389.98px){
  #ecMain > main.mx-auto{
    padding-left: .55rem !important;
    padding-right: .55rem !important;
  }

  header.sticky .mx-auto{
    padding-left: .55rem !important;
    padding-right: .55rem !important;
  }

  header.sticky .flex.items-center.gap-2{
    gap: .1rem !important;
  }

  .app-page-header > div:last-child,
  .ec-page-head > div:last-child,
  .ndhe-page-actions{
    grid-template-columns: 1fr;
  }

  .card,
  .alert,
  .app-page-header,
  .ec-page-head{
    border-radius: 18px !important;
  }

  .ec-mobile-tabbar{
    left: .35rem;
    right: .35rem;
    gap: .12rem;
    padding-left: .25rem;
    padding-right: .25rem;
  }

  .ec-mobile-tabbar a{
    min-height: 52px;
    font-size: .58rem;
  }

  .auth-stage{
    padding-left: .45rem;
    padding-right: .45rem;
  }
}

@media (max-height: 540px) and (orientation: landscape){
  .auth-stage{
    align-items: flex-start;
  }

  .ec-mobile-tabbar a{
    min-height: 48px;
  }
}

@media (hover: none){
  .card:hover,
  .btn:hover,
  #ecSidebar .ec-sidebar-item:hover{
    transform: none !important;
  }
}

@media print{
  #ecSidebar,
  #ecSidebarOverlay,
  header.sticky,
  .ec-mobile-tabbar,
  footer,
  .no-print{
    display: none !important;
  }

  #ecMain{
    margin: 0 !important;
  }

  #ecMain > main.mx-auto{
    max-width: none !important;
    padding: 0 !important;
  }

  .card,
  .table-responsive,
  .alert{
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
}