/*
 * Estação Conhecimento — Attendance Workspace 2026
 * --------------------------------------------------------------------------
 * Identidade operacional clara, criada para rotinas de chamada, turmas,
 * frequência e gestão. Esta é a última camada do tema e não altera regras de
 * negócio, ids ou integrações existentes.
 */

:root{
  --att-bg: #f5f7fa;
  --att-surface: #ffffff;
  --att-surface-soft: #f8fafc;
  --att-text: #1b2b36;
  --att-muted: #647681;
  --att-line: #dce5ea;
  --att-line-strong: #c8d6dd;
  --att-primary: #087f8c;
  --att-primary-strong: #0f5360;
  --att-primary-soft: #e8f4f5;
  --att-accent: #f2b63d;
  --att-accent-soft: #fff5d8;
  --att-success: #148166;
  --att-success-soft: #e9f7f1;
  --att-danger: #c44752;
  --att-danger-soft: #fff0f1;
  --att-info: #2e6fae;
  --att-radius: 16px;
  --att-radius-sm: 11px;
  --att-shadow: 0 8px 24px rgba(24,43,58,.07);
  --att-shadow-lg: 0 26px 70px rgba(18,38,50,.18);
}

body.ec-app-body,
body.ndhe-pro-shell{
  color: var(--att-text) !important;
  background: var(--att-bg) !important;
}

#ecMain{
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), transparent 250px),
    var(--att-bg) !important;
}

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

/* Shell claro e focado em produtividade */
#ecSidebar{
  background: #fbfcfd !important;
  border-right: 1px solid var(--att-line) !important;
  box-shadow: 10px 0 32px rgba(24,43,58,.045) !important;
}

#ecSidebar .ec-brand-eyebrow,
.ec-topbar-eyebrow,
.attendance-eyebrow{
  color: var(--att-primary) !important;
}

#ecSidebar .ec-surface,
#ecSidebar .ec-ring{
  background: #f0f4f6 !important;
  border-color: var(--att-line) !important;
}

#ecSidebar .ec-surface .bg-slate-900,
#ecSidebar .ec-sidebar-mini-avatar{
  color: #fff !important;
  background: var(--att-primary-strong) !important;
}

#ecSidebar .ec-sidebar-section{
  color: #8a99a3 !important;
}

#ecSidebar .ec-sidebar-item{
  min-height: 48px;
  color: #5a6d79 !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
}

#ecSidebar .ec-sidebar-item > span:first-child{
  color: #5d7480 !important;
  background: #eef3f5 !important;
  border-color: #e0e8ec !important;
}

#ecSidebar .ec-sidebar-item:hover{
  color: var(--att-primary-strong) !important;
  background: #f0f5f7 !important;
  border-color: #e4ecef !important;
}

#ecSidebar .ec-sidebar-item[aria-current="page"]{
  color: var(--att-primary-strong) !important;
  background: var(--att-primary-soft) !important;
  border-color: #cce3e6 !important;
  box-shadow: none !important;
}

#ecSidebar .ec-sidebar-item[aria-current="page"]::after{
  content: "";
  position: absolute;
  left: -4px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 999px;
  background: var(--att-primary);
}

#ecSidebar .ec-sidebar-item[aria-current="page"] > span:first-child{
  color: #fff !important;
  background: var(--att-primary) !important;
  border-color: var(--att-primary) !important;
}

#ecSidebar .ec-sidebar-item[aria-current="page"] > span:last-child.h-2{
  background: var(--att-accent) !important;
}

#ecSidebarCollapse{
  color: #fff !important;
  background: var(--att-primary-strong) !important;
  border-color: var(--att-primary-strong) !important;
}

#ecSidebarCollapse:hover{
  background: #0b4550 !important;
}

header.sticky{
  min-height: 72px;
  background: rgba(255,255,255,.96) !important;
  border-bottom: 1px solid var(--att-line) !important;
  box-shadow: 0 5px 18px rgba(24,43,58,.035) !important;
}

header.sticky .h-16{
  height: 72px !important;
}

#ecGlobalSearch,
#ecMobileSearchPanel .ec-input{
  background: #f7f9fb !important;
  border-color: var(--att-line) !important;
}

#ecGlobalSearch:focus,
#ecMobileSearchPanel .ec-input:focus{
  background: #fff !important;
  border-color: rgba(8,127,140,.5) !important;
  box-shadow: 0 0 0 4px rgba(8,127,140,.09) !important;
}

#ecProfileBtn:hover,
#ecProfileMenu a:hover{
  background: #f0f5f7 !important;
}

/* Cabeçalhos: claros, compactos e orientados à tarefa */
.app-page-header,
.ec-page-head,
.attendance-page-heading{
  position: relative;
  isolation: isolate;
  min-height: 104px;
  padding: 1.25rem 1.4rem !important;
  overflow: hidden;
  color: var(--att-text) !important;
  background: #fff !important;
  border: 1px solid var(--att-line) !important;
  border-radius: var(--att-radius) !important;
  box-shadow: var(--att-shadow) !important;
}

.app-page-header::before,
.ec-page-head::before,
.attendance-page-heading::before{
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 auto 0 0;
  width: 5px;
  height: auto;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, var(--att-primary), #42a7ae) !important;
}

.app-page-header::after,
.ec-page-head::after,
.attendance-page-heading::after{
  content: "";
  position: absolute;
  z-index: 0;
  width: 180px;
  height: 180px;
  right: -82px;
  top: -110px;
  border: 28px solid rgba(8,127,140,.055);
  border-radius: 50%;
  background: transparent !important;
}

.app-page-header > *,
.ec-page-head > *,
.attendance-page-heading > *{
  position: relative;
  z-index: 1;
}

.app-page-header h1,
.app-page-header h2,
.app-page-header h3,
.app-page-header .text-dark,
.ec-page-head h1,
.ec-page-head h2,
.ec-page-head h3,
.ec-page-head .text-dark,
.attendance-page-heading h1{
  color: var(--att-text) !important;
}

.app-page-header .text-muted,
.ec-page-head .text-muted,
.attendance-page-heading .text-muted{
  color: var(--att-muted) !important;
}

.app-page-header .btn-primary,
.app-page-header .btn-success,
.ec-page-head .btn-primary,
.ec-page-head .btn-success{
  color: #fff !important;
  background: var(--att-primary) !important;
  border-color: var(--att-primary) !important;
}

.attendance-page-heading{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.attendance-page-heading__main{
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.attendance-page-heading__icon{
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--att-primary);
  background: var(--att-primary-soft);
  border: 1px solid #cfe4e7;
  border-radius: 14px;
  font-size: 1.25rem;
}

.attendance-page-heading__actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .65rem;
}

.attendance-eyebrow{
  margin-bottom: .25rem;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Superfícies, controles e dados */
.card,
.ec-card,
.ec-table-shell,
.table-responsive,
.dropdown-menu,
.offcanvas,
.alert{
  background: var(--att-surface) !important;
  border: 1px solid var(--att-line) !important;
  border-radius: var(--att-radius) !important;
  box-shadow: var(--att-shadow) !important;
  backdrop-filter: none !important;
}

.card::before,
.ec-card::before{
  display: none !important;
}

.card-header,
.card-footer{
  background: #fff !important;
  border-color: var(--att-line) !important;
}

.card-header::after{
  display: none !important;
}

.btn{
  min-height: 42px;
  border-radius: 10px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

.btn-primary,
.btn-success{
  color: #fff !important;
  background: var(--att-primary) !important;
  background-image: none !important;
  border-color: var(--att-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus{
  background: #066b76 !important;
  border-color: #066b76 !important;
  box-shadow: 0 7px 18px rgba(8,127,140,.19) !important;
}

.btn-light,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-danger{
  color: #435966 !important;
  background: #fff !important;
  background-image: none !important;
  border-color: var(--att-line-strong) !important;
}

.btn-light:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-info:hover,
.btn-outline-warning:hover,
.btn-outline-danger:hover{
  color: var(--att-primary-strong) !important;
  background: var(--att-primary-soft) !important;
  border-color: #b9d6da !important;
}

.btn-warning{
  color: #4a3908 !important;
  background: var(--att-accent) !important;
  background-image: none !important;
  border-color: var(--att-accent) !important;
}

.form-label{
  color: #405762 !important;
}

.form-control,
.form-select,
.ec-input,
.input-group-text,
.form-floating > .form-control,
.form-floating > .form-select,
textarea.form-control{
  min-height: 46px;
  color: var(--att-text) !important;
  background: #fbfcfd !important;
  border: 1px solid var(--att-line-strong) !important;
  border-radius: var(--att-radius-sm) !important;
  box-shadow: none !important;
}

.form-control:focus,
.form-select:focus,
.ec-input:focus,
.form-floating > .form-control:focus,
.form-floating > .form-select:focus{
  background: #fff !important;
  border-color: rgba(8,127,140,.55) !important;
  box-shadow: 0 0 0 4px rgba(8,127,140,.09) !important;
}

.table-responsive{
  border-radius: 14px !important;
  box-shadow: none !important;
}

.table thead th,
.ec-table thead th{
  color: #526873 !important;
  background: #eef3f6 !important;
  border-bottom: 1px solid var(--att-line-strong) !important;
}

.table tbody td,
.table tbody th,
.ec-table tbody td{
  border-color: #e5ebef !important;
}

.table tbody tr:hover,
.ec-table tbody tr:hover{
  background: #f6f9fa !important;
}

.summary-card,
.ec-kpi-card{
  border: 1px solid var(--att-line) !important;
  border-top: 3px solid var(--att-primary) !important;
  box-shadow: var(--att-shadow) !important;
}

.badge.text-bg-success,
.badge.bg-success-subtle{
  color: #126d57 !important;
  background: var(--att-success-soft) !important;
}

.badge.text-bg-warning,
.badge.bg-warning-subtle{
  color: #74570e !important;
  background: var(--att-accent-soft) !important;
}

.alert-success{
  color: #126d57 !important;
  background: var(--att-success-soft) !important;
}

.alert-warning{
  color: #725512 !important;
  background: #fff9e8 !important;
}

.alert-danger{
  color: #943a43 !important;
  background: var(--att-danger-soft) !important;
}

/* Grade de presença: leitura rápida e alvos confortáveis */
.chamada-table-wrapper{
  background: #fff !important;
  border: 1px solid var(--att-line) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 #fff !important;
}

.chamada-table thead th{
  background: #eef4f6 !important;
}

.chamada-table .sticky-col{
  background: #fff !important;
  box-shadow: 1px 0 0 var(--att-line);
}

.attendance-btn{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: .86rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}

.btn-status-p{
  color: #0d684f;
  background: #e5f6ef;
  border-color: #bfe8d8;
}

.btn-status-p:hover{
  color: #fff;
  background: var(--att-success);
}

.btn-status-f{
  color: #a13b46;
  background: #fff0f1;
  border-color: #f2c8cd;
}

.btn-status-f:hover{
  color: #fff;
  background: var(--att-danger);
}

.btn-status-none{
  color: #92a1aa;
  background: #f3f6f8;
  border-color: #dde6ea;
}

.btn-status-none:hover{
  color: var(--att-primary-strong);
  background: var(--att-primary-soft);
  border-color: #c9e1e4;
}

#saveStatus{
  color: var(--att-success) !important;
}

/* Navegação inferior é exclusiva de celulares. Esta regra fica na última
   camada para não depender de nenhum tema anterior ou da ordem do cache. */
.ec-mobile-tabbar,
nav.ec-mobile-tabbar[data-mobile-only]{
  display: none !important;
}

/* Paginação compacta para listas operacionais extensas. */
.ec-table-pagination{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height:64px;
  padding:.8rem 1rem;
  background:rgba(255,255,255,.94);
  border-top:1px solid var(--att-line);
}

.ec-table-pagination[hidden]{
  display:none !important;
}

.ec-table-pagination__info{
  color:var(--att-muted);
  font-size:.82rem;
  font-weight:650;
}

.ec-table-pagination__controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.32rem;
}

.ec-table-pagination__button{
  display:inline-grid;
  place-items:center;
  min-width:36px;
  height:36px;
  padding:0 .55rem;
  color:var(--att-ink);
  font-size:.82rem;
  font-weight:750;
  line-height:1;
  background:#fff;
  border:1px solid var(--att-line);
  border-radius:10px;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}

.ec-table-pagination__button:hover:not(:disabled){
  color:var(--att-primary);
  background:var(--att-primary-soft);
  border-color:rgba(15,126,139,.3);
  transform:translateY(-1px);
}

.ec-table-pagination__button.is-active{
  color:#fff;
  background:var(--att-primary);
  border-color:var(--att-primary);
  box-shadow:0 7px 16px rgba(15,126,139,.2);
}

.ec-table-pagination__button:disabled{
  color:#9aa9b4;
  background:#f4f7f8;
  cursor:not-allowed;
  opacity:.72;
}

.ec-table-pagination__button.is-edge{
  font-size:1.15rem;
}

.ec-table-pagination__ellipsis{
  display:inline-grid;
  place-items:center;
  min-width:22px;
  color:var(--att-muted);
}

.attendance-call-actions{
  scrollbar-width: thin;
}

.attendance-legend{
  color: #435965;
  background: #f7f9fb !important;
  border-color: var(--att-line) !important;
}

/* Administração de usuários */
.attendance-count{
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .28rem .55rem;
  color: var(--att-primary-strong);
  background: var(--att-primary-soft);
  border: 1px solid #cee4e7;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 750;
}

.ec-users-toolbar{
  align-items: center;
}

.ec-user-identity{
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 210px;
}

.ec-user-avatar{
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--att-primary-strong);
  background: var(--att-primary-soft);
  border: 1px solid #cde2e5;
  border-radius: 11px;
  font-size: .82rem;
  font-weight: 800;
}

.ec-user-name{
  color: var(--att-text);
}

.ec-user-email{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #5f7480;
}

.ec-user-email i{
  color: #91a0a9;
}

.ec-role-badge{
  display: inline-flex;
  align-items: center;
  padding: .36rem .6rem;
  color: #435b67;
  background: #f0f4f6;
  border: 1px solid #dce6ea;
  border-radius: 8px;
  font-size: .72rem;
  font-weight: 750;
}

.ec-role-badge.is-admin{
  color: #79550a;
  background: var(--att-accent-soft);
  border-color: #f0dda5;
}

.ec-role-badge.is-coord-esporte,
.ec-role-badge.is-coord-cultura{
  color: #285e91;
  background: #edf5fc;
  border-color: #d3e5f5;
}

.ec-user-actions{
  gap: .4rem;
}

.ec-user-actions > .btn{
  width: 42px;
  min-width: 42px;
  padding: 0;
  border-radius: 10px !important;
}

/* Modais: sempre acima do backdrop, claros e sem dupla sobreposição */
body.modal-open #ecMain > main{
  view-transition-name: none !important;
}

.modal{
  z-index: 1090 !important;
}

.modal-backdrop{
  z-index: 1080 !important;
  background: #102d3a !important;
}

.modal-backdrop.show{
  opacity: .28 !important;
  backdrop-filter: blur(3px);
}

.modal-dialog{
  position: relative;
  z-index: 1;
}

.modal-content{
  color: var(--att-text) !important;
  background: #fff !important;
  border: 1px solid var(--att-line) !important;
  border-radius: 18px !important;
  box-shadow: var(--att-shadow-lg) !important;
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
}

.modal-content::before,
.modal-header::after{
  display: none !important;
}

.modal-header,
.modal-footer{
  background: #fff !important;
  border-color: var(--att-line) !important;
}

#ecToastContainer{
  z-index: 1120 !important;
}

#ecToastContainer .toast{
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 44px rgba(18,38,50,.18) !important;
}

.ec-password-dialog{
  --bs-modal-width: 560px;
}

.ec-password-modal{
  overflow: hidden;
}

.ec-password-modal__header{
  padding: 1.15rem 1.25rem !important;
}

.ec-password-modal__icon{
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--att-primary);
  background: var(--att-primary-soft);
  border: 1px solid #cce3e6;
  border-radius: 12px;
  font-size: 1.1rem;
}

.ec-password-modal .modal-body{
  padding: 1.25rem !important;
}

.ec-password-notice{
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: .75rem;
  align-items: start;
  padding: .85rem 1rem;
  color: #725512;
  background: #fff9e8;
  border: 1px solid #f1dfad;
  border-radius: 12px;
}

.ec-password-notice > i{
  margin-top: .08rem;
  color: #b27b08;
  font-size: 1.05rem;
}

.ec-password-notice strong,
.ec-password-notice span{
  display: block;
}

.ec-password-notice strong{
  margin-bottom: .15rem;
  font-size: .86rem;
}

.ec-password-notice span{
  color: #806b39;
  font-size: .78rem;
}

.ec-password-vault{
  margin-top: 1rem;
  padding: 1rem;
  background: #f7fafb;
  border: 1px solid var(--att-line);
  border-radius: 14px;
}

.ec-password-vault__label{
  color: var(--att-muted);
  font-size: .74rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.ec-password-vault__value{
  margin: .65rem 0 .85rem;
  padding: .8rem 1rem;
  color: var(--att-primary-strong);
  background: #fff;
  border: 1px dashed #a9c8cd;
  border-radius: 10px;
  font: 800 1.18rem/1.35 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: .08em;
  text-align: center;
  overflow-wrap: anywhere;
  user-select: all;
}

.ec-password-vault__copy{
  width: 100%;
}

.ec-password-vault__copy.is-copied{
  background: var(--att-success) !important;
  border-color: var(--att-success) !important;
}

.ec-password-delivery{
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-top: 1rem;
  padding: .75rem .85rem;
  color: #5f7480;
  background: #f7f9fb;
  border-radius: 10px;
  font-size: .78rem;
  line-height: 1.45;
}

.ec-password-delivery.is-sent{
  color: #126d57;
  background: var(--att-success-soft);
}

.ec-password-delivery.is-manual{
  color: #6b5a31;
  background: #fff9e8;
}

.ec-password-modal__footer{
  padding: .85rem 1.25rem !important;
}

.ec-confirm-dialog{
  --bs-modal-width: 470px;
}

.ec-confirm-modal .modal-body{
  padding: 1.7rem 1.5rem 1rem !important;
}

.ec-confirm-modal__icon{
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--att-primary);
  background: var(--att-primary-soft);
  border: 1px solid #cce3e6;
  border-radius: 16px;
  font-size: 1.4rem;
}

.ec-confirm-modal__user{
  display: inline-flex;
  padding: .45rem .75rem;
  color: var(--att-primary-strong);
  background: var(--att-primary-soft);
  border-radius: 9px;
}

/* Login alinhado ao workspace claro */
body.login-v3-page,
body.auth-page:not(.login-v3-page){
  background:
    radial-gradient(800px circle at 0% 100%, rgba(242,182,61,.12), transparent 48%),
    linear-gradient(135deg, #f4f7f9, #e7eef2) !important;
}

.login-v3-brand-panel,
body.auth-page:not(.login-v3-page) .auth-visual{
  background:
    linear-gradient(150deg, rgba(255,255,255,.04), transparent 38%),
    linear-gradient(145deg, #123744, #0f5360 60%, #087f8c) !important;
}

.login-v3-submit{
  background: var(--att-primary-strong) !important;
}

.login-v3-submit:hover,
.login-v3-submit:focus-visible{
  background: var(--att-primary) !important;
}

/* Tablet e celular */
@media (max-width: 1199.98px){
  #ecSidebar{
    box-shadow: 20px 0 55px rgba(18,38,50,.18) !important;
  }
}

@media (max-width: 767.98px){
  .ec-table-pagination{
    align-items:flex-start;
    flex-direction:column;
    gap:.65rem;
    min-height:0;
    padding:.75rem;
  }

  .ec-table-pagination__controls{
    width:100%;
    justify-content:space-between;
  }

  .ec-table-pagination__button{
    min-width:34px;
    height:34px;
  }

  .ec-table-pagination__ellipsis{
    min-width:12px;
  }

  body.ec-app-body,
  body.ndhe-pro-shell{
    background: #f3f6f8 !important;
  }

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

  .app-page-header,
  .ec-page-head,
  .attendance-page-heading{
    min-height: 0;
    padding: 1rem !important;
    border-radius: 14px !important;
  }

  .attendance-page-heading{
    align-items: flex-start;
    flex-direction: column;
  }

  .attendance-page-heading__icon{
    width: 44px;
    height: 44px;
  }

  .attendance-page-heading__actions{
    width: 100%;
  }

  .attendance-page-heading__actions .btn{
    flex: 1 1 9rem;
  }

  .attendance-call-actions{
    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap !important;
    justify-content: flex-start;
    margin-left: 0 !important;
    padding-bottom: .2rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .attendance-call-actions > *,
  .attendance-call-actions .btn{
    flex: 0 0 auto !important;
  }

  .attendance-toolbar{
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .attendance-legend{
    width: 100%;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: .65rem 1rem !important;
    border-radius: 12px !important;
  }

  .attendance-legend > .d-flex{
    width: auto !important;
    display: flex !important;
    flex-direction: row !important;
  }

  .attendance-legend .vr{
    display: none;
  }

  .card,
  .ec-card,
  .alert,
  .modal-content{
    border-radius: 14px !important;
  }

  .ec-mobile-tabbar,
  nav.ec-mobile-tabbar[data-mobile-only]{
    position: fixed;
    z-index: 1050;
    left: max(.55rem, env(safe-area-inset-left, .55rem));
    right: max(.55rem, env(safe-area-inset-right, .55rem));
    bottom: max(.5rem, env(safe-area-inset-bottom, .5rem));
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .2rem;
    padding: .38rem .4rem calc(.38rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.97) !important;
    border: 1px solid var(--att-line) !important;
    border-radius: 17px !important;
    border-color: var(--att-line) !important;
    box-shadow: 0 15px 36px rgba(18,38,50,.16) !important;
    backdrop-filter: blur(18px) saturate(1.08);
  }

  .ec-mobile-tabbar a{
    min-width: 0;
    min-height: 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .18rem;
    color: #697b86 !important;
    border-radius: 12px;
    font-size: .64rem;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
  }

  .ec-mobile-tabbar a i{
    font-size: 1.12rem;
    line-height: 1;
  }

  .ec-mobile-tabbar a span{
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .ec-mobile-tabbar a.is-active,
  .ec-mobile-tabbar a.is-current-path{
    color: var(--att-primary-strong) !important;
    background: var(--att-primary-soft) !important;
  }

  .ec-users-toolbar{
    align-items: stretch;
    flex-direction: column;
  }

  .ec-users-toolbar > *{
    width: 100% !important;
    max-width: none !important;
  }

  .table-responsive.ec-mobile-cards .ec-user-identity{
    max-width: 68%;
  }

  .ec-password-modal__footer{
    align-items: stretch;
    flex-direction: column;
  }

  .ec-password-modal__footer .btn{
    width: 100%;
    min-height: 48px;
    flex: 0 0 auto !important;
  }
}

@media (max-width: 390px){
  .attendance-page-heading__main{
    align-items: flex-start;
  }

  .attendance-page-heading__icon{
    display: none;
  }

  .ec-password-vault__value{
    font-size: 1rem;
  }
}

@media (max-width: 575.98px){
  .attendance-call-header > div:last-child .btn,
  .attendance-call-actions .btn{
    flex: 0 0 auto !important;
  }

  .chamada-table{
    width: max-content !important;
    min-width: max-content !important;
  }

  .chamada-table .sticky-col-1{
    display: none !important;
  }

  .chamada-table .sticky-col-2{
    left: 0 !important;
    width: 168px;
    min-width: 168px !important;
    max-width: 168px;
  }

  .chamada-table th:not(.sticky-col),
  .chamada-table td:not(.sticky-col){
    min-width: 56px;
  }
}

@media (prefers-reduced-motion: reduce){
  .attendance-btn,
  .btn,
  .modal,
  .modal-dialog{
    transition: none !important;
  }
}