/* gestor_theme.css
 * ---------------------------------------------------------------------------
 * Tema visual (Light) inspirado no "Gestor Social" (Inter + Teal).
 * Contém apenas overrides e deve ser carregado DEPOIS de custom.css.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root{
  /* Identidade Visual (Teal) */
  --primary: #009688;
  --primary-dark: #00796B;
  --primary-light: #B2DFDB;

  /* Superfície e Texto */
  --bg-body: #f1f5f9;        /* slate-100 */
  --bg-card: #ffffff;
  --text-main: #0f172a;      /* slate-900 */
  --text-muted: #64748b;     /* slate-500 */
  --border-color: #e2e8f0;   /* slate-200 */

  /* Sidebar (Light) */
  --sidebar-bg: #ffffff;
  --sidebar-text: #0f172a;
  --sidebar-muted: #64748b;
  --sidebar-hover: rgba(15,23,42,.04);
  --sidebar-active: rgba(0,150,136,.12);
  --sidebar-panel: #f8fafc;

  /* Mapeia variáveis do layout (custom.css) */
  --ec-sidebar-bg: var(--sidebar-bg);
  --ec-sidebar-text: var(--sidebar-text);
  --ec-sidebar-muted: var(--sidebar-muted);
  --ec-sidebar-hover-bg: var(--sidebar-hover);
  --ec-sidebar-active-bg: var(--sidebar-active);
  --ec-sidebar-border: rgba(15,23,42,.10);
  --ec-sidebar-panel-bg: var(--sidebar-panel);

  /* Bootstrap (cores principais) */
  --bs-primary: var(--primary);
  --bs-primary-rgb: 0,150,136;
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--primary-dark);
}

body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg-body);
  color: var(--text-main);
}

/* ---------------------------------------------------------------------------
   Componentes gerais (cards / inputs / botões)
   --------------------------------------------------------------------------- */
.card,
.ec-card,
.auth-shell,
.ec-perm-tile,
.ec-usr-card,
.ec-users-card{
  border-radius: 16px !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
}

.card .card-header,
.ec-card .card-header{
  background: transparent !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.form-control,
.form-select,
.input-group-text{
  border-radius: 12px !important;
  border-color: var(--border-color) !important;
}

.form-control:focus,
.form-select:focus{
  border-color: rgba(0,150,136,.55) !important;
  box-shadow: 0 0 0 .25rem rgba(0,150,136,.15) !important;
}

.btn{
  border-radius: 12px !important;
}

.btn-primary{
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}
.btn-primary:hover,
.btn-primary:focus{
  background: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
}

.btn-outline-primary{
  color: var(--primary) !important;
  border-color: rgba(0,150,136,.45) !important;
}
.btn-outline-primary:hover{
  background: rgba(0,150,136,.10) !important;
  border-color: rgba(0,150,136,.60) !important;
  color: var(--primary-dark) !important;
}

/* Switch / checkbox */
.form-check-input:checked{
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.form-switch .form-check-input:focus{
  box-shadow: 0 0 0 .25rem rgba(0,150,136,.18) !important;
}

/* Badges */
.badge.bg-primary,
.badge.text-bg-primary{
  background: var(--primary) !important;
}
.badge.text-bg-success{
  background: rgba(0,150,136,.18) !important;
  color: var(--primary-dark) !important;
}

/* ---------------------------------------------------------------------------
   Sidebar / Topbar (Light e elegante)
   --------------------------------------------------------------------------- */
.app-sidebar{
  background: var(--sidebar-bg) !important;
  color: var(--sidebar-text) !important;
  border-right: 1px solid var(--border-color) !important;
}

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

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

.app-user-name{ color: var(--text-main) !important; }

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

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

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

.app-nav .nav-link.active{
  background: var(--sidebar-active) !important;
  color: var(--primary-dark) !important;
  border: 1px solid rgba(0,150,136,.18) !important;
}

.app-nav .nav-link.active i{ color: var(--primary-dark) !important; }

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

.app-brand-mark{
  background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
}

.app-topbar{
  background: rgba(255,255,255,.85) !important;
  backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

/* ---------------------------------------------------------------------------
   Login / Auth (ajuste para manter leve e premium)
   --------------------------------------------------------------------------- */
.auth-shell{
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 18px 50px rgba(2, 6, 23, .18) !important;
}

.auth-hero{
  background: linear-gradient(135deg, rgba(0,150,136,.96), rgba(0,121,107,.92)) !important;
}

.auth-hero::before{
  opacity: .20 !important;
  mix-blend-mode: overlay;
}

.auth-logo,
.auth-logo-sm{
  border: 1px solid rgba(255,255,255,.18) !important;
}

.auth-form{
  background: rgba(255,255,255,.96) !important;
}

/* ---------------------------------------------------------------------------
   Permissões (tiles)
   --------------------------------------------------------------------------- */
.ec-perm-tile{
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.ec-perm-tile:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(2,6,23,.06) !important;
  border-color: rgba(0,150,136,.25) !important;
}
.ec-perm-tile.is-enabled,
.ec-perm-tile.is-checked{
  border-color: rgba(0,150,136,.35) !important;
  background: rgba(0,150,136,.04) !important;
}

/* ---------------------------------------------------------------------------
   Tabelas
   --------------------------------------------------------------------------- */
.table thead th{
  color: var(--text-muted) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .75rem;
  background: rgba(241,245,249,.9) !important;
  border-bottom: 1px solid var(--border-color) !important;
}
.table tbody td{
  border-color: var(--border-color) !important;
}

/* Fundo do auth (mantém o gradiente com acento Teal) */
.auth-bg{
  background:
    radial-gradient(1100px circle at 10% 10%, rgba(0,150,136,.22), transparent 45%),
    radial-gradient(900px circle at 90% 20%, rgba(0,121,107,.18), transparent 45%),
    linear-gradient(180deg, #0b1220, #0f172a) !important;
}