/* custom.css
 * ---------------------------------------------------------------------------
 * Tema "Dashboard" profissional (Bootstrap 5) + ajustes de responsividade.
 * Sem frameworks pesados.
 */

:root {
  --ec-primary: #009688;
  --ec-primary-600: #00796B;
  --ec-surface: #ffffff;
  --ec-bg: #f1f5f9;
  --ec-border: #e2e8f0;
  --ec-text: #0f172a;
  --ec-muted: #64748b;

  --ec-sidebar-width: 280px;
  --ec-sidebar-bg: #0f172a; /* slate-900 */
  --ec-sidebar-text: #cbd5e1; /* slate-300 */
  --ec-sidebar-muted: #94a3b8; /* slate-400 */
  --ec-sidebar-active-bg: rgba(255,255,255,.10);
  --ec-sidebar-hover-bg: rgba(255,255,255,.06);
  --ec-card-shadow: 0 10px 24px rgba(15,23,42,.08);
}

/* Base */
.app-body {
  background: #f3f4f6; /* gray-100 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.app-wrapper {
  min-height: 100vh;
  display: flex;
}

.app-sidebar {
  width: var(--ec-sidebar-width);
  background: var(--ec-sidebar-bg);
  color: var(--ec-sidebar-text);
  border-right: 1px solid rgba(255,255,255,.06);
}

.app-sidebar .offcanvas-header {
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.app-sidebar-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.app-brand {
  text-decoration: none;
  color: #fff;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .25rem .25rem 1rem .25rem;
}

.app-brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  letter-spacing: .02em;
  background: linear-gradient(135deg, #2563eb, #22c55e);
  color: #fff;
}

.app-brand-text {
  font-weight: 800;
  letter-spacing: .01em;
  opacity: .95;
}

.app-user {
  padding: .75rem;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  margin-bottom: 1rem;
}

.app-user-name {
  font-weight: 700;
  line-height: 1.2;
}

.app-user-role {
  margin-top: .25rem;
}

.app-nav {
  gap: .25rem;
}

.app-nav .nav-link {
  color: var(--ec-sidebar-text);
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .75rem;
  border-radius: 12px;
  font-weight: 600;
}

.app-nav .nav-link i {
  font-size: 1.1rem;
  color: var(--ec-sidebar-muted);
}

.app-nav .nav-link:hover {
  background: var(--ec-sidebar-hover-bg);
  color: #fff;
}

.app-nav .nav-link.active {
  background: var(--ec-sidebar-active-bg);
  color: #fff;
}

.app-nav .nav-link.active i {
  color: #fff;
}

.app-sidebar-footer {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.08);
}

.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.app-topbar {
  height: 64px;
  align-items: center;
}

.app-topbar .btn-icon {
  border: 0;
  background: transparent;
  padding: .25rem .35rem;
  border-radius: 12px;
}

.app-topbar .btn-icon:hover {
  background: #f1f5f9;
}

.app-content {
  min-height: calc(100vh - 64px);
}

/* Cards */
.card {
  border: 0;
  border-radius: 16px;
  box-shadow: var(--ec-card-shadow);
}

.card .card-header {
  background: transparent;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Tabelas */
.table thead th {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #64748b;
}

.table tbody tr:hover {
  background: rgba(15, 23, 42, .03);
}

/* Botao pequeno */
.btn-xs {
  --bs-btn-padding-y: .15rem;
  --bs-btn-padding-x: .35rem;
  --bs-btn-font-size: .75rem;
  --bs-btn-border-radius: .375rem;
}

/* ------------------------------------------------------------------------- */
/* Tela de chamada: tabela com scroll e colunas congeladas */
/* ------------------------------------------------------------------------- */

.chamada-table-wrapper {
  max-height: 75vh;
  overflow: auto;
}

.chamada-table th,
.chamada-table td {
  white-space: nowrap;
}

.sticky-col {
  position: sticky;
  background: #fff;
  z-index: 2;
}

.sticky-col-1 {
  left: 0;
  min-width: 110px;
}

.sticky-col-2 {
  left: 110px;
  min-width: 220px;
}

.chamada-table thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #f8f9fa;
}

.chamada-table thead th.sticky-col {
  z-index: 6;
}

.date-col {
  min-width: 58px;
}

@media (max-width: 576px) {
  .sticky-col-2 { min-width: 180px; }
}

/* ------------------------------------------------------------------------- */
/* Login profissional */
/* ------------------------------------------------------------------------- */

.auth-bg {
  min-height: 100vh;
  background:
    radial-gradient(1100px circle at 10% 10%, rgba(37,99,235,.20), transparent 45%),
    radial-gradient(900px circle at 90% 20%, rgba(34,197,94,.18), transparent 45%),
    linear-gradient(180deg, #0b1220, #0f172a);
}

.auth-card {
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  justify-content: center;
}

.auth-brand .mark {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  background: linear-gradient(135deg, #2563eb, #22c55e);
  color: #fff;
}

/* ------------------------------------------------------------------------- */
/* Relatorio mensal (modelo tipo planilha) */
/* ------------------------------------------------------------------------- */

.ec-sheet-header .ec-box {
  border: 1px solid #dee2e6;
  border-radius: 1rem;
  padding: .9rem;
  height: 100%;
}

.ec-box-title {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .04em;
  opacity: .95;
}

.ec-box-value {
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.15;
}

.ec-box-teal {
  background: #0b7285;
  color: #fff;
}

.ec-box-yellow {
  background: #ffd43b;
  color: #111;
}

.ec-report-table td {
  vertical-align: middle;
}

/* Sidebar no desktop: evita overlay */
@media (min-width: 768px) {
  .app-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
  }
}

/* ------------------------------------------------------------------------- */
/* Utilitarios usados no dashboard */
/* ------------------------------------------------------------------------- */

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

.icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.app-page-header {
  padding: .25rem 0;
}

/* ------------------------------------------------------------------------- */
/* AJUSTE DE CONTRASTE (SIDEBAR) - v3.1
   Motivo: no mobile/offcanvas o Bootstrap aplica fundo claro por variavel e as
   cores anteriores deixavam o texto muito "apagado".
   Solucao: sidebar em tema claro com texto escuro + estados hover/active bem visiveis.
*/

:root {
  --ec-sidebar-bg: #ffffff;
  --ec-sidebar-text: #0f172a; /* slate-900 */
  --ec-sidebar-muted: #475569; /* slate-600 */
  --ec-sidebar-hover-bg: #f1f5f9; /* slate-100 */
  --ec-sidebar-active-bg: rgba(0,150,136,.10); /* teal subtle */
  --ec-sidebar-border: rgba(15,23,42,.10);
  --ec-sidebar-panel-bg: #f8fafc;
}

/* Garante que o Offcanvas use as cores da sidebar */
.app-sidebar.offcanvas,
.app-sidebar.offcanvas-md,
.app-sidebar.offcanvas-start {
  background: var(--ec-sidebar-bg) !important;
  color: var(--ec-sidebar-text) !important;
  --bs-offcanvas-bg: var(--ec-sidebar-bg);
  --bs-offcanvas-color: var(--ec-sidebar-text);
}

.app-sidebar {
  border-right: 1px solid var(--ec-sidebar-border) !important;
}

.app-sidebar .offcanvas-header {
  border-bottom: 1px solid var(--ec-sidebar-border) !important;
}

.app-brand {
  color: var(--ec-sidebar-text) !important;
}

.app-brand-text {
  opacity: 1 !important;
}

.app-user {
  background: var(--ec-sidebar-panel-bg) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
}

.app-nav .nav-link {
  color: var(--ec-sidebar-text) !important;
}

.app-nav .nav-link i {
  color: var(--ec-sidebar-muted) !important;
}

.app-nav .nav-link:hover {
  background: var(--ec-sidebar-hover-bg) !important;
  color: var(--ec-sidebar-text) !important;
}

.app-nav .nav-link:hover i {
  color: var(--ec-sidebar-text) !important;
}

.app-nav .nav-link.active {
  background: var(--ec-sidebar-active-bg) !important;
  color: #00796B !important; /* teal-700 */
}

.app-nav .nav-link.active i {
  color: #00796B !important;
}

.app-sidebar-footer {
  border-top: 1px solid var(--ec-sidebar-border) !important;
}

.app-sidebar .offcanvas-title { color: var(--ec-sidebar-text) !important; }

/* -------------------------------------------------------------------------
   Auth (Login) - visual mais moderno
   ------------------------------------------------------------------------- */
.auth-shell{
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 20px 60px rgba(0,0,0,.28);
  backdrop-filter: blur(12px);
}

.auth-hero{
  position: relative;
  background: linear-gradient(135deg, rgba(11,122,255,.96), rgba(0,214,170,.86));
}
.auth-hero::before{
  content: "";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 360px at 30% 20%, rgba(255,255,255,.22), transparent 55%),
    radial-gradient(700px 280px at 70% 70%, rgba(0,0,0,.18), transparent 55%);
  pointer-events:none;
  z-index: 0;
}

.auth-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  /*background: url('../img/logo2-transparent.png') 18% 55% / 640px auto no-repeat;*/
  opacity: .18;
  pointer-events: none;
  z-index: 0;
}

.auth-hero-inner{
  z-index: 1;
}

.auth-hero-inner{
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  color: #fff;
}

.auth-logo{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  letter-spacing: .5px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

.auth-logo-sm{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  background: var(--ec-primary);
  color: #fff;
  box-shadow: 0 10px 24px rgba(11,122,255,.35);
}

.auth-hero-title{
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.2;
}
.auth-hero-sub{
  font-size: .98rem;
}

.auth-feature{
  display:flex;
  align-items:center;
  gap: .6rem;
  padding: .75rem 1rem;
  border-radius: 16px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.20);
}
.auth-feature i{
  font-size: 1.05rem;
}

.auth-form{
  background: rgba(255,255,255,.95);
}

.auth-bg{
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(900px 360px at 20% 10%, rgba(11,122,255,.32), transparent 55%),
    radial-gradient(900px 420px at 80% 90%, rgba(0,214,170,.20), transparent 55%),
    linear-gradient(135deg, rgba(0,0,0,.88), rgba(14,20,40,.92));
}

.auth-bg::before{
  content: "";
  position: fixed;
  inset: 0;
  background: url('../img/logo2-transparent.png') 18% 52% / 780px auto no-repeat;
  opacity: .18;
  pointer-events: none;
  z-index: 0;
}

.auth-bg > *{
  position: relative;
  z-index: 1;
}

@media (max-width: 768px){
  .auth-bg::before{
    background-position: 50% 20%;
    background-size: 520px auto;
    opacity: .12;
  }
}

@media (max-width: 420px){
  .auth-bg::before{
    background: none;
  }
}


.auth-seed .btn-link{
  color: rgba(0,0,0,.65);
}
.auth-seed .btn-link:hover{
  color: rgba(0,0,0,.90);
}

/* -------------------------------------------------------------------------
   Logos (img + fallback)
   ------------------------------------------------------------------------- */

.auth-logo-img{
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.auth-logo .auth-logo-img{ width: 42px; height: 42px; }
.auth-logo-sm .auth-logo-img{ width: 24px; height: 24px; }

.auth-logo-fallback-text{
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  letter-spacing: .5px;
}

.app-brand-logo-img{
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.app-brand-mark{
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   Pequenos upgrades globais (mais "atual" e interativo)
   ------------------------------------------------------------------------- */
.card{
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 40px rgba(0,0,0,.10);
}

.table-hover tbody tr:hover{
  background: rgba(11,122,255,.06);
}

.btn{
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:active{
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce){
  .card, .btn{ transition: none; }
}


/* ------------------------------------------------------------------------- */
/* Permissoes (Dashboard) - tiles + switches (AJAX) */
/* ------------------------------------------------------------------------- */

.ec-perm-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .75rem;
}

.ec-perm-tile{
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  padding: .7rem .85rem;
  min-height: 56px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

/* Estado selecionado (switch ligado) */
.ec-perm-tile.is-checked{
  background: rgba(25,135,84,.06);
  border-color: rgba(25,135,84,.35);
}

.ec-perm-tile.is-checked:hover{
  background: rgba(25,135,84,.08);
  border-color: rgba(25,135,84,.45);
}

.ec-perm-tile:hover{
  background: #f8fafc;
  border-color: rgba(37,99,235,.35);
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
  transform: translateY(-1px);
}

.ec-perm-tile .form-check-input{
  cursor: pointer;
}

/* Alinha label + badge e coloca o switch na direita */
.ec-perm-tile .form-check.form-switch{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.ec-perm-tile .form-check-input{
  order: 2;
  margin: 0;
  flex: 0 0 auto;
}

.ec-perm-tile .form-check-label{
  order: 1;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.ec-perm-name{
  font-weight: 700;
  line-height: 1.2;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ec-perm-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  min-width: 0;
}

.ec-perm-badge{
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .85;
  white-space: nowrap;
  flex: 0 0 auto;
}

.ec-perm-tile .badge{
  font-weight: 800;
  letter-spacing: .02em;
}

/* Toolbar de permissoes */
.ec-perm-toolbar{
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  padding: .75rem;
}

.ec-perm-toolbar .form-control,
.ec-perm-toolbar .btn{
  height: 42px;
}

.ec-perm-toolbar .btn-group .btn{
  height: 42px;
}

.ec-perm-section-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

/* ------------------------------------------------------------------------- */
/* Permissoes (Dashboard) - tabela + switches (AJAX) */
/* ------------------------------------------------------------------------- */

.ec-perm-table-wrap{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  overflow: auto;
  max-height: 440px;
  background: #fff;
}

.ec-perm-table-wrap .table{
  margin: 0;
}

.ec-perm-table-wrap thead th{
  background: #f8fafc;
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid rgba(15,23,42,.08);
}

.ec-perm-row{
  cursor: pointer;
}

.ec-perm-row.is-checked{
  background: rgba(25,135,84,.05);
}

.ec-perm-row.is-checked:hover{
  background: rgba(25,135,84,.07);
}

.ec-perm-col-activity .ec-perm-activity{
  font-weight: 700;
  line-height: 1.2;
}

.ec-perm-type-badge{
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 1px solid rgba(15,23,42,.10);
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

.ec-perm-status-badge{
  font-weight: 700;
  border: 1px solid rgba(15,23,42,.08);
  background: #f8fafc;
  color: #0f172a;
}

.ec-perm-status-badge.is-allowed{
  background: rgba(25,135,84,.10);
  border-color: rgba(25,135,84,.25);
  color: #14532d;
}

.ec-perm-status-badge.is-blocked{
  background: rgba(220,53,69,.06);
  border-color: rgba(220,53,69,.18);
  color: #7f1d1d;
}

.ec-perm-status-badge i{
  margin-right: .25rem;
}


/* ------------------------------------------------------------------------- */
/* Admin - Gerenciar usuarios (Dashboard) */
/* ------------------------------------------------------------------------- */

.ec-users-toolbar{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  justify-content: flex-end;
}

.ec-users-search{
  width: 100%;
  max-width: 420px;
}

.ec-users-filter{
  width: 100%;
  max-width: 220px;
}

@media (min-width: 768px){
  .ec-users-search{ width: 320px; }
  .ec-users-filter{ width: 190px; }
}

.ec-table-shell{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.ec-users-card .table thead th{
  background: #f8fafc;
}

.ec-users-card td.text-muted{
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ec-users-card .badge.text-bg-light{
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border: 1px solid rgba(15,23,42,.10);
}

/* ------------------------------------------------------------------------- */
/* Chamada - alerta de marcacao pendente */
/* ------------------------------------------------------------------------- */

.chamada-table thead th.ec-missing-day{
  background: #fff3cd !important;
}

.attendance-btn.ec-missing-cell{
  outline: 2px solid rgba(255,193,7,.85);
  outline-offset: -2px;
}

@keyframes ecFlash{
  0%{ box-shadow: 0 0 0 0 rgba(255,193,7,.85); }
  100%{ box-shadow: 0 0 0 16px rgba(255,193,7,0); }
}

.ec-missing-flash{
  animation: ecFlash 1.2s ease;
}

.shadow-end{box-shadow: 12px 0 32px rgba(15,23,42,.06)!important;}

.shadow-inner{box-shadow: inset 0 1px 0 rgba(15,23,42,.06), 0 10px 24px rgba(15,23,42,.06)!important;}

.hover-bg-light:hover{background: rgba(15,23,42,.04)!important;}

.tracking-tight{letter-spacing:-.01em;}
.tracking-wider{letter-spacing:.08em;}

/* ------------------------------------------------------------------------- */
/* Chamada - botões (P / F / -)                                                */
/* ------------------------------------------------------------------------- */

.attendance-btn{
  width: 32px;
  height: 32px;
  border-radius: 8px;
  padding: 0;
  font-weight: 800;
  font-size: .85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
  border: 1px solid transparent;
}

.btn-status-p{
  background-color: #dcfce7; /* green-100 */
  color: #166534;            /* green-700 */
  border-color: #bbf7d0;
}
.btn-status-p:hover{ background-color: #bbf7d0; color: #14532d; }

.btn-status-f{
  background-color: #fee2e2; /* red-100 */
  color: #991b1b;            /* red-700 */
  border-color: #fecaca;
}
.btn-status-f:hover{ background-color: #fecaca; color: #7f1d1d; }

.btn-status-none{
  background-color: #f1f5f9; /* slate-100 */
  color: #cbd5e1;            /* slate-300 */
  border-color: #e2e8f0;
}
.btn-status-none:hover{
  background-color: #e2e8f0;
  color: #94a3b8;
}