/* ============================================================
   CRM.Pro — Enterprise Light
   Inspirado em SAS EG / SAP Fiori / Oracle Fusion
   Claro, alto contraste, azul corporativo
   Fontes: Inter + IBM Plex Mono
   ============================================================ */

:root {
  /* Marca */
  --e-navy:     #1B3A6B;   /* navbar */
  --e-blue:     #0B5394;   /* primary */
  --e-blue-h:   #073763;   /* hover */
  --e-blue-bg:  #EBF3FB;   /* active bg */
  --e-blue-b:   #BFDBF7;   /* active border */

  /* Sidebar */
  --e-sb-w:     230px;
  --e-sb-text:  #2D3748;
  --e-sb-muted: #557090;   /* 5.15:1 on white — WCAG AA */
  --e-sb-hover: #F0F5FB;

  /* Conteúdo */
  --e-body:     #F4F6FA;
  --e-card:     #FFFFFF;
  --e-border:   #C8D6E5;
  --e-border-l: #E4ECF4;
  --e-radius:   4px;
  --e-shadow:   0 1px 2px rgba(0,0,0,.06), 0 3px 8px rgba(0,0,0,.05);

  /* Tabela */
  --e-th-bg:    #E8EEF7;
  --e-th-clr:   #1B3A6B;
  --e-tr-alt:   #F4F8FD;

  /* Semântico */
  --e-ok:    #1E6B3C; --e-ok-bg:   #E6F4EC; --e-ok-tx:   #155227;
  --e-err:   #B91C1C; --e-err-bg:  #FEF2F2; --e-err-tx:  #991B1B;
  --e-warn:  #92400E; --e-warn-bg: #FEF3C7; --e-warn-tx: #78350F;
  --e-info:  #1E4F8C; --e-info-bg: #EBF3FB; --e-info-tx: #163D6E;

  /* Bootstrap */
  --bs-primary:         #0B5394;
  --bs-primary-rgb:     11,83,148;
  --bs-link-color:      #0B5394;
  --bs-link-hover-color:#073763;
  --bs-border-radius:   .25rem;
  --bs-border-radius-sm:.2rem;
}

/* ── Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: .9rem;
  line-height: 1.55;
  background: var(--e-body);
  color: #1A202C;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  color: #1B3A6B;
  letter-spacing: -.02em;
  line-height: 1.25;
}

.mono, code, kbd, pre { font-family: 'IBM Plex Mono', 'Cascadia Code', monospace; }

/* ── Navbar ─────────────────────────────────────────────── */
.navbar-ent {
  background: var(--e-navy);
  height: 52px;
  padding: 0 1rem;
  border-bottom: 2px solid #0B2D55;
}
.navbar-ent .navbar-brand {
  font-size: .95rem; font-weight: 700;
  letter-spacing: -.02em; color: #fff !important;
  display: flex; align-items: center; gap: .5rem;
}
.brand-sq {
  width: 26px; height: 26px; border-radius: 3px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; color: #fff; flex-shrink: 0;
}
.nav-user-link {
  display: flex; align-items: center; gap: .5rem;
  color: rgba(255,255,255,.8) !important; font-size: .82rem; font-weight: 500;
  text-decoration: none; cursor: pointer; transition: color .12s;
}
.nav-user-link:hover { color: #fff !important; }
.nav-user-link::after { display: none; }
.nav-av-sq {
  width: 26px; height: 26px; border-radius: 3px;
  background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.25);
  font-size: .68rem; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; letter-spacing: 0;
}
.navbar-ent .dropdown-menu {
  border: 1px solid var(--e-border); border-radius: var(--e-radius);
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  padding: .25rem; font-size: .82rem; min-width: 200px;
}
.dm-user-info { padding: .5rem .75rem .6rem; border-bottom: 1px solid var(--e-border-l); margin-bottom: .2rem; }
.dm-user-info .dui-name  { font-size: .82rem; font-weight: 600; color: #1A202C; }
.dm-user-info .dui-email { font-size: .72rem; color: #5D6B7B; }
.navbar-ent .dropdown-item { border-radius: 2px; padding: .45rem .75rem; font-size: .8rem; }
.navbar-ent .dropdown-item:hover { background: var(--e-blue-bg); }
.navbar-ent .dropdown-item.text-danger:hover { background: var(--e-err-bg); }

/* ── Sidebar (branca) ──────────────────────────────────── */
.sidebar {
  background: var(--e-card);
  width: var(--e-sb-w); min-width: var(--e-sb-w);
  min-height: calc(100vh - 52px);
  position: sticky; top: 52px; height: calc(100vh - 52px);
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--e-border);
  padding: .75rem .5rem;
  scrollbar-width: thin;
  scrollbar-color: #D0D9E4 transparent;
  transition: transform .25s ease;
}

.nav-section-label {
  font-size: .62rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--e-sb-muted);
  padding: .875rem .5rem .25rem; display: block; user-select: none;
}
.sidebar .nav-link {
  color: var(--e-sb-text);
  padding: .45rem .625rem; border-radius: var(--e-radius);
  font-size: .845rem; font-weight: 500;
  display: flex; align-items: center; gap: .55rem;
  white-space: nowrap; position: relative;
  transition: background .1s, color .1s; letter-spacing: 0;
}
.sidebar .nav-link i { font-size: .9rem; flex-shrink: 0; color: #7A9CC0; }
.sidebar .nav-link:hover { background: var(--e-sb-hover); color: var(--e-blue); }
.sidebar .nav-link:hover i { color: var(--e-blue); }
.sidebar .nav-link.active-link {
  background: var(--e-blue-bg);
  color: var(--e-blue); font-weight: 600;
  border-left: 3px solid var(--e-blue);
  padding-left: calc(.625rem - 3px);
}
.sidebar .nav-link.active-link i { color: var(--e-blue); }

.sb-footer {
  margin-top: auto; padding: .75rem .5rem .25rem;
  border-top: 1px solid var(--e-border-l);
}
.sb-user-row { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; }
.sb-av {
  width: 28px; height: 28px; border-radius: 3px;
  background: var(--e-navy); font-size: .68rem; font-weight: 700;
  color: #fff; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sb-user-name { font-size: .78rem; font-weight: 600; color: #1A202C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-role { font-size: .7rem; color: #5D6B7B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-copy { font-size: .65rem; color: #94A3B8; text-align: center; padding-top: .375rem; }

@media (max-width: 991.98px) {
  .sidebar {
    position: fixed; top: 52px; left: 0; z-index: 1045;
    height: calc(100vh - 52px); transform: translateX(-100%);
  }
  .sidebar.sidebar-open { transform: translateX(0); box-shadow: 4px 0 16px rgba(0,0,0,.15); }
}
.sidebar-backdrop {
  display: none; position: fixed; inset: 52px 0 0 0;
  background: rgba(0,0,0,.4); z-index: 1044;
}
@media (max-width: 991.98px) {
  .sidebar-backdrop { display: block; visibility: hidden; opacity: 0; transition: opacity .2s, visibility .2s; }
  .sidebar-backdrop.d-block { visibility: visible; opacity: 1; }
}

/* ── Conteúdo ─────────────────────────────────────────── */
main { animation: _ent-in .18s ease both; }
@keyframes _ent-in { from { opacity: 0; } to { opacity: 1; } }

/* ── Botões ─────────────────────────────────────────────── */
.btn { font-weight: 500; font-size: .845rem; border-radius: var(--e-radius); }
.btn-sm { font-size: .8rem; padding: .28rem .65rem; }
.btn-xs { font-size: .72rem; padding: .18rem .45rem; line-height: 1.4; }
.btn-primary { background: var(--e-blue); border-color: var(--e-blue); color: #fff; font-weight: 600; }
.btn-primary:hover { background: var(--e-blue-h); border-color: var(--e-blue-h); }
.btn-outline-primary { color: var(--e-blue); border-color: var(--e-blue); }
.btn-outline-primary:hover { background: var(--e-blue); border-color: var(--e-blue); color: #fff; }
.btn-outline-secondary { color: #495057; border-color: var(--e-border); }
.btn-outline-secondary:hover { background: var(--e-body); color: #1A202C; }

/* ── Formulários ────────────────────────────────────────── */
.form-label { font-size: .8rem; font-weight: 600; color: #374151; margin-bottom: .3rem; }
.form-control, .form-select {
  border: 1px solid var(--e-border); border-radius: var(--e-radius);
  font-size: .875rem; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus {
  border-color: var(--e-blue); background: #fff;
  box-shadow: 0 0 0 3px rgba(11,83,148,.15);
}
.form-check-input:checked { background-color: var(--e-blue); border-color: var(--e-blue); }
.input-group-text { background: #F1F5F9; border-color: var(--e-border); color: #5D6B7B; }

/* ── Cards ───────────────────────────────────────────────── */
.card { background: var(--e-card); border: 1px solid var(--e-border); border-radius: var(--e-radius); box-shadow: var(--e-shadow); }
/* overflow-x: auto (não hidden) para que o scrollbar horizontal apareça quando a tabela
   for mais larga que o card. border-radius preservado para os cantos visuais. */
.card > .table-responsive:last-child,
.card > table:last-child { border-bottom-left-radius: calc(var(--e-radius) - 1px); border-bottom-right-radius: calc(var(--e-radius) - 1px); overflow-x: auto; }
.card-header {
  background: var(--e-th-bg); border-bottom: 1px solid var(--e-border);
  border-radius: var(--e-radius) var(--e-radius) 0 0 !important;
  padding: .6rem 1rem; font-size: .845rem; font-weight: 700;
  color: var(--e-th-clr); letter-spacing: -.01em;
}

/* ── Dashboard — Metric cards ────────────────────────────── */
.mc {
  background: var(--e-card); border: 1px solid var(--e-border);
  border-top: 4px solid var(--e-blue);
  border-radius: var(--e-radius); box-shadow: var(--e-shadow);
  padding: 1.125rem 1.25rem .875rem; height: 100%;
  display: flex; flex-direction: column;
}
.mc-users   { border-top-color: #0B5394; }
.mc-groups  { border-top-color: #1E6B3C; }
.mc-tenants { border-top-color: #92400E; }
.mc-audit   { border-top-color: #5E35B1; }

.mc-icon { font-size: 1.5rem; margin-bottom: .5rem; }
.mc-users   .mc-icon { color: #0B5394; }
.mc-groups  .mc-icon { color: #1E6B3C; }
.mc-tenants .mc-icon { color: #92400E; }
.mc-audit   .mc-icon { color: #5E35B1; }

.mc-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #5D6B7B; margin-bottom: .25rem;
}
.mc-value {
  font-size: 2.25rem; font-weight: 800; letter-spacing: -.04em;
  line-height: 1; color: #1B3A6B; margin-bottom: .75rem;
  font-variant-numeric: tabular-nums lining-nums;
  font-family: 'IBM Plex Mono', monospace;
}
.mc-footer { margin-top: auto; padding-top: .625rem; border-top: 1px solid var(--e-border-l); }
.mc-link { font-size: .78rem; font-weight: 600; color: var(--e-blue); text-decoration: none; }
.mc-link:hover { color: var(--e-blue-h); text-decoration: underline; }

/* ── Cabeçalho de página ─────────────────────────────────── */
.page-header { margin-bottom: 1.25rem; }
.page-header .breadcrumb { margin-bottom: .2rem; padding: 0; background: transparent; font-size: .75rem; }
.page-header .breadcrumb-item + .breadcrumb-item::before { content: "›"; color: #94A3B8; font-size: 1rem; }
.page-header .breadcrumb-item a { color: #5D6B7B; text-decoration: none; }
.page-header .breadcrumb-item a:hover { color: var(--e-blue); text-decoration: underline; }
.page-header .breadcrumb-item.active { color: #374151; font-weight: 500; }
.page-header h4 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.025em; color: #1B3A6B; margin: 0; }

/* ── Tabs de listagem ────────────────────────────────────── */
.nav-tabs { border-bottom: 2px solid var(--e-border); }
.nav-tabs .nav-link {
  color: #495057; border: none; border-bottom: 2px solid transparent;
  border-radius: 0; font-size: .845rem; font-weight: 500; padding: .45rem .9rem;
  margin-bottom: -2px;
}
.nav-tabs .nav-link:hover { color: var(--e-blue); border-bottom-color: var(--e-blue-b); background: transparent; }
.nav-tabs .nav-link.active {
  color: var(--e-blue); font-weight: 700;
  border-bottom-color: var(--e-blue); background: transparent;
}

/* ── Tabelas enterprise ──────────────────────────────────── */
.table { --bs-table-bg: #fff; font-size: .855rem; }
.table td, .table th { padding: .55rem 1rem; vertical-align: middle; }
.table th {
  background: var(--e-th-bg) !important;
  color: var(--e-th-clr);
  font-size: .67rem; text-transform: uppercase;
  letter-spacing: .1em; font-weight: 700;
  border-bottom: 2px solid var(--e-border) !important;
  border-top: none;
  white-space: nowrap;
}
.table td { border-color: var(--e-border-l); font-variant-numeric: tabular-nums; }
/* Hover-only — sem zebra; linhas destacam apenas ao passar o mouse */
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: initial; }
.table-hover tbody tr:hover td { background: #E4EDF9 !important; }
/* Code em tabela */
.table td code {
  font-family: 'IBM Plex Mono', monospace; font-size: .8rem;
  color: #334155; background: #EEF2F7;
  padding: .1em .4em; border-radius: 2px; border: 1px solid var(--e-border-l);
}

/* ── Tabela de dados (sem quebra de linha; scroll horizontal) ─── */
/* table-layout: auto (padrão) — colunas dimensionadas pelo conteúdo.
   white-space: nowrap impede quebra interna; a tabela cresce para a direita
   e o container .table-responsive exibe scrollbar quando necessário. */
.table-data td, .table-data th { white-space: nowrap; }

/* Célula com badge além do texto — flex interno garante que o badge seja visível */
.td-with-badge {
  display: flex; align-items: center; gap: .375rem;
}
.td-with-badge .td-label {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}

/* ── Scrollbar horizontal — sempre visível (não só ao hover no macOS) ── */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--e-border) transparent;
}
.table-responsive::-webkit-scrollbar        { height: 4px; }
.table-responsive::-webkit-scrollbar-track  { background: transparent; }
.table-responsive::-webkit-scrollbar-thumb  { background: var(--e-border); border-radius: 2px; }
.table-responsive::-webkit-scrollbar-thumb:hover { background: #9EB1C8; }

/* ── Coluna de ações sticky ─────────────────────────────────────────────────
   .th-actions (header) e .td-actions (células) ficam colados à borda direita
   do container quando a tabela rola horizontalmente. O shadow indica ao
   usuário que há conteúdo rolável à esquerda. */
.table > thead > tr > .th-actions {
  position: sticky; right: 0; z-index: 3;
  background: var(--e-th-bg);
  box-shadow: -3px 0 5px -1px rgba(0,0,0,.07);
}
.table > tbody > tr > .td-actions,
.table > tfoot > tr > .td-actions {
  position: sticky; right: 0; z-index: 2;
  background: var(--e-card);
  box-shadow: -3px 0 5px -1px rgba(0,0,0,.07);
  white-space: nowrap;
}
/* Hover na célula sticky — fundo deve corresponder ao hover da linha */
.table-hover > tbody > tr:hover > .td-actions { background: #E4EDF9 !important; }
/* Dropdown aberto numa célula sticky: eleva o td acima dos demais td.td-actions
   (que estão em z-index:2) para que o menu não fique coberto pelas linhas seguintes. */
.table > tbody > tr:has(.dropdown-menu.show) > .td-actions { z-index: 1010; }

/* ── Badges ──────────────────────────────────────────────── */
.badge { font-size: .72rem; font-weight: 700; border-radius: 3px; padding: .22em .55em; letter-spacing: .03em; }
.badge.bg-success   { background: var(--e-ok-bg)   !important; color: var(--e-ok-tx)   !important; border: 1px solid #C6E8D3; }
.badge.bg-secondary { background: #F1F5F9          !important; color: #475569           !important; border: 1px solid #D1D9E0; }
.badge.bg-warning   { background: var(--e-warn-bg) !important; color: var(--e-warn-tx)  !important; border: 1px solid #F3D9A4; }
.badge.bg-danger    { background: var(--e-err-bg)  !important; color: var(--e-err-tx)   !important; border: 1px solid #FCCACA; }
.badge.bg-info      { background: var(--e-info-bg) !important; color: var(--e-info-tx)  !important; border: 1px solid var(--e-blue-b); }

/* Soft badges — para categorias/funcionalidades (semântica, não status).
   Use badge-soft-* quando o badge descreve uma feature, não um estado de entidade.
   Visualmente idênticos aos bg-* do projeto; a distinção é semântica para o dev. */
.badge.badge-soft-primary   { background: var(--e-blue-bg) !important; color: var(--e-blue)    !important; border: 1px solid var(--e-blue-b); }
.badge.badge-soft-success   { background: var(--e-ok-bg)   !important; color: var(--e-ok-tx)   !important; border: 1px solid #C6E8D3; }
.badge.badge-soft-warning   { background: var(--e-warn-bg) !important; color: var(--e-warn-tx)  !important; border: 1px solid #F3D9A4; }
.badge.badge-soft-info      { background: var(--e-info-bg) !important; color: var(--e-info-tx)  !important; border: 1px solid var(--e-blue-b); }
.badge.badge-soft-secondary { background: #F1F5F9          !important; color: #475569           !important; border: 1px solid #D1D9E0; }
.badge.badge-soft-danger    { background: var(--e-err-bg)  !important; color: var(--e-err-tx)   !important; border: 1px solid #FCCACA; }

/* Status dot */
.s-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .4rem; flex-shrink: 0; vertical-align: middle; border: 1px solid transparent; }
.s-dot.on  { background: #1E6B3C; border-color: #C6E8D3; }
.s-dot.off { background: #94A3B8; border-color: #D1D9E0; }

/* ── Alertas ─────────────────────────────────────────────── */
.alert { border: 1px solid transparent; border-left-width: 4px; border-radius: var(--e-radius); font-size: .855rem; font-weight: 500; }
.alert-success { background: var(--e-ok-bg);   border-color: #C6E8D3;   border-left-color: var(--e-ok);   color: var(--e-ok-tx); }
.alert-danger  { background: var(--e-err-bg);  border-color: #FCCACA;   border-left-color: var(--e-err);  color: var(--e-err-tx); }
.alert-warning { background: var(--e-warn-bg); border-color: #F3D9A4;   border-left-color: var(--e-warn); color: var(--e-warn-tx); }
.alert-info    { background: var(--e-info-bg); border-color: var(--e-blue-b); border-left-color: var(--e-blue); color: var(--e-info-tx); }

/* ── Modais ─────────────────────────────────────────────── */
.modal-content { border: 1px solid var(--e-border); border-radius: var(--e-radius); box-shadow: 0 8px 32px rgba(0,0,0,.15); }
.modal-header  { background: var(--e-th-bg); border-bottom: 1px solid var(--e-border); padding: .75rem 1.25rem; }
.modal-footer  { border-top: 1px solid var(--e-border); padding: .65rem 1.25rem; }
.modal-title   { font-size: .9rem; font-weight: 700; color: var(--e-navy); }
.modal-body    { padding: 1rem 1.25rem; font-size: .875rem; color: #374151; }

/* ── Paginação ───────────────────────────────────────────── */
.page-item.active .page-link { background: var(--e-blue); border-color: var(--e-blue); }
.page-link { color: var(--e-blue); font-size: .8rem; font-weight: 500; border-color: var(--e-border); border-radius: 3px !important; padding: .32rem .6rem; margin: 0 1px; }
.page-link:hover { color: var(--e-blue-h); background: var(--e-blue-bg); border-color: var(--e-blue-b); }
.page-item.disabled .page-link { color: #94A3B8; }

/* ── Estado vazio ────────────────────────────────────────── */
.empty-state { padding: 3rem 1rem; text-align: center; }
.empty-state i { font-size: 2rem; color: #596878; display: block; margin-bottom: .625rem; }
.empty-state strong { font-size: .875rem; font-weight: 700; color: #374151; display: block; }
.empty-state p { font-size: .8rem; color: #596878; margin: .2rem 0 0; }
/* Garante fundo branco mesmo em tabelas com table-striped.
   Bootstrap 5.3 usa box-shadow:inset para o efeito listrado — precisa zerar os dois. */
.td-empty {
  --bs-table-bg-type: transparent;
  --bs-table-bg-state: transparent;
  background: var(--e-card) !important;
  box-shadow: none !important;
}

/* ── JSON auditoria ──────────────────────────────────────── */
.audit-before, .audit-after {
  font-family: 'IBM Plex Mono', monospace; font-size: .76rem;
  line-height: 1.5; white-space: pre-wrap; word-break: break-all;
  max-height: 130px; overflow-y: auto;
  background: #F8F9FA; color: #334155;
  border: 1px solid var(--e-border);
  border-radius: var(--e-radius); padding: .5rem .75rem;
}

/* ── Formulários — seção ─────────────────────────────────── */
.form-page    { max-width: 720px; }
.form-page-sm { max-width: 480px; }
.form-section-title {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--e-navy);
  padding-bottom: .4rem; border-bottom: 2px solid var(--e-border);
  margin-bottom: 1rem;
}

/* ── dl nas páginas de detalhe ───────────────────────────── */
dt { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #475569; margin-bottom: .15rem; } /* #475569 = 5.74:1 sobre branco, passa WCAG AA */
dd { font-size: .875rem; color: #1A202C; margin-bottom: .875rem; }