/* SabeAdvogado SPA — paleta inspirada no legado IntraWeb (AdminLTE skin-blue):
   header azul claro + sidebar branca + cards horizontais coloridos.
   Cores neutras seguem o tom do logo (slate-blue-gray). */

:root {
  --ct-header:         #3c8dbc;   /* header azul claro (skin-blue AdminLTE) */
  --ct-header-dark:    #357ca5;
  --ct-sidebar-bg:     #ffffff;
  --ct-sidebar-border: #e9ecef;
  --ct-sidebar-text:   #4a5568;
  --ct-sidebar-hover:  #f4f6f9;
  --ct-active:         #3c8dbc;
  --ct-text-dark:      #2c3e50;
  --ct-text-muted:     #7d8a99;

  --ct-success: #00a65a;          /* verde — Incluir, WhatsApp, Salvar, Realizado */
  --ct-info:    #00c0ef;          /* azul claro — info, hora */
  --ct-warning: #f39c12;          /* laranja — alerta */
  --ct-danger:  #dd4b39;          /* vermelho — atrasado, Excluir */
  --ct-bg:      #ecf0f5;          /* cinza muito claro — fundo do app */

  /* Card de listagem: ícone + conteúdo */
  --ct-card-content-bg: #d2d6de;  /* cinza claro do AdminLTE legado */
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Source Sans Pro", Roboto, Arial, sans-serif;
  background: var(--ct-bg);
}

/* ============ LOGIN ============ */

.login-page {
  background: linear-gradient(135deg, #2c3e50 0%, var(--ct-header-dark) 100%);
  min-height: 100vh;
}
.login-logo { text-align: center; margin-bottom: 1.5rem; }
.login-logo img { filter: brightness(0) invert(1); max-width: 280px; height: auto; }
.login-logo .login-subtitulo {
  color: #fff; opacity: .85; font-size: .9rem; margin-top: .5rem; letter-spacing: .5px;
}
.login-card-body { border-top: 4px solid var(--ct-header); }
.login-page a { color: var(--ct-header); }
.login-page a:hover { color: var(--ct-header-dark); text-decoration: underline; }
.login-page .btn-primary {
  background-color: var(--ct-success); border-color: var(--ct-success);
  font-weight: 600;
}
.login-page .btn-primary:hover, .login-page .btn-primary:focus, .login-page .btn-primary:active {
  background-color: #008d4c !important; border-color: #008d4c !important;
}
.login-page .input-group-text { background-color: #fff; border-color: #ced4da; }

/* ============ HEADER (azul claro) ============ */

.main-header.navbar {
  background-color: var(--ct-header) !important;
  border-bottom: none;
  min-height: 56px;
}
.main-header.navbar .nav-link, .main-header .nav-link {
  color: #fff !important;
}
.main-header.navbar .nav-link:hover {
  background-color: rgba(0,0,0,.08);
}
#header-empresa { color: #fff; font-weight: 500; letter-spacing: .3px; }
#header-usuario { color: #fff; }

/* Brand-link no canto: fundo branco com logo */
.brand-link {
  background-color: #fff !important;
  border-bottom: 1px solid var(--ct-sidebar-border) !important;
  padding: .8rem 1rem !important;
  text-align: center;
  height: 56px;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.brand-link img { filter: none; max-width: 130px; max-height: 40px; }
.brand-link .brand-text { display: none; }

/* ============ SIDEBAR (branca) ============ */

.main-sidebar {
  background-color: var(--ct-sidebar-bg) !important;
  border-right: 1px solid var(--ct-sidebar-border);
}
.main-sidebar .sidebar { padding-top: 0; }

/* Bloco do usuário no topo da sidebar */
.user-panel {
  padding: 1rem .75rem;
  border-bottom: 1px solid var(--ct-sidebar-border);
  background-color: #fafbfc;
}
.user-panel .user-nome {
  font-weight: 700; color: var(--ct-text-dark);
  font-size: .9rem; letter-spacing: .3px;
  text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-panel .user-acesso {
  font-size: .75rem; color: var(--ct-text-muted); margin-top: .25rem;
}
.user-panel .user-acesso strong { color: var(--ct-text-dark); }

/* Cabeçalho de seção do menu */
.sidebar-header {
  padding: .5rem .75rem .25rem;
  font-size: .7rem;
  text-transform: uppercase;
  color: var(--ct-text-muted);
  letter-spacing: .8px;
  background-color: #f4f6f9;
  border-bottom: 1px solid var(--ct-sidebar-border);
}

/* Itens do menu (texto escuro) */
.nav-sidebar > .nav-item > .nav-link {
  color: var(--ct-sidebar-text) !important;
  padding: .65rem .85rem;
  font-size: .9rem;
  border-left: 3px solid transparent;
  border-radius: 0;
}
.nav-sidebar > .nav-item > .nav-link .nav-icon {
  color: var(--ct-text-muted);
  width: 1.6rem;
  text-align: center;
}
.nav-sidebar > .nav-item > .nav-link:hover {
  background-color: var(--ct-sidebar-hover) !important;
  color: var(--ct-active) !important;
}
.nav-sidebar > .nav-item > .nav-link:hover .nav-icon { color: var(--ct-active); }
.nav-sidebar > .nav-item > .nav-link.active {
  background-color: var(--ct-sidebar-hover) !important;
  color: var(--ct-active) !important;
  border-left-color: var(--ct-active);
  font-weight: 500;
}
.nav-sidebar > .nav-item > .nav-link.active .nav-icon { color: var(--ct-active); }

/* ============ BREADCRUMB ============ */

#page-breadcrumb .breadcrumb {
  background: transparent; padding: .5rem 0; margin: 0; justify-content: flex-end;
}
#page-breadcrumb .breadcrumb-item, #page-breadcrumb .breadcrumb-item a {
  color: var(--ct-header); font-size: .9rem;
}
#page-breadcrumb .breadcrumb-item.active { color: var(--ct-text-dark); font-weight: 500; }

.content-header h1 {
  font-size: 1.5rem; color: var(--ct-text-dark); font-weight: 400;
}

/* ============ BOTÕES ============ */

.btn-primary {
  background-color: var(--ct-header); border-color: var(--ct-header);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--ct-header-dark) !important; border-color: var(--ct-header-dark) !important;
}
.btn-success {
  background-color: var(--ct-success) !important;
  border-color: var(--ct-success) !important;
  color: #fff !important;
}
.btn-success:hover { background-color: #008d4c !important; border-color: #008d4c !important; }
.btn-danger {
  background-color: var(--ct-danger) !important;
  border-color: var(--ct-danger) !important;
}
.btn-warning { background-color: var(--ct-warning); border-color: var(--ct-warning); color: #fff; }
.btn-default.active { background-color: var(--ct-header); color: #fff; border-color: var(--ct-header); }

a:not(.nav-link):not(.brand-link):not(.dropdown-item):not(.btn) { color: var(--ct-header); }
a:not(.nav-link):not(.brand-link):not(.dropdown-item):not(.btn):hover { color: var(--ct-header-dark); }

/* ============ KPIs DASHBOARD ============ */

.small-box.bg-info    { background-color: var(--ct-info)    !important; color: #fff; }
.small-box.bg-warning { background-color: var(--ct-warning) !important; color: #fff; }
.small-box.bg-success { background-color: var(--ct-success) !important; color: #fff; }
.small-box.bg-danger  { background-color: var(--ct-danger)  !important; color: #fff; }
.small-box .inner h3 { font-weight: 600; color: #fff; }
.small-box .small-box-footer { background-color: rgba(0,0,0,.15); color: rgba(255,255,255,.9); }

/* ============ CARDS DE LISTAGEM (horizontal, ícone colorido + conteúdo cinza) ============
   Reproduz o info-box do AdminLTE legado mostrado nos prints.
   Cores conforme item.cor: 'azul' (default), 'laranja', 'vermelho', 'verde'. */

/* Estilo A — Material elevado: fundo branco, fita lateral colorida fina,
   ícone discreto no canto superior direito. Tooltip nativo mantém info completa. */
.ct-card.info-box {
  --cor: var(--ct-header);
  background: #f0f7fc;
  border: none;
  border-left: 5px solid var(--cor);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  padding: 1rem 1.1rem 1rem 1.25rem;
  margin-bottom: 1rem;
  height: 130px;
  display: block;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: box-shadow .2s ease, transform .2s ease;
}
.ct-card.info-box:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
  transform: translateY(-2px);
}
.ct-card.info-box .info-box-icon {
  position: absolute;
  top: 12px; right: 14px;
  width: 36px; height: 36px;
  background: rgba(0,0,0,.05) !important;
  color: var(--cor);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.ct-card.info-box .info-box-content {
  padding: 0;
  background: transparent;
  display: block;
  min-width: 0;
}
/* Linha 1 (primeiro info-box-text) = "data" → cor da fita, uppercase */
.ct-card.info-box .info-box-content > .info-box-text:first-child {
  color: var(--cor);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .3px;
  text-transform: uppercase;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 50px;
}
/* Linha 2 (info-box-number) = título principal */
.ct-card.info-box .info-box-number {
  color: var(--ct-text-dark);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.25;
  margin-top: .15rem;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
/* Linhas 3 e 4 (info-box-text.small) = descrição/rodapé */
.ct-card.info-box .info-box-text.small {
  display: block;
  font-size: .82rem;
  color: #555;
  font-weight: 400;
  line-height: 1.3;
  margin-top: .35rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Última .small (rodapé) com separador visual */
.ct-card.info-box .info-box-content > .info-box-text.small:last-child {
  color: var(--ct-text-muted);
  font-size: .78rem;
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px dashed #e9ecef;
}
/* Cards "largos" (col-lg-6) — altura um pouco maior */
.col-lg-6 > .ct-card.info-box,
.col-md-12 > .ct-card.info-box { height: 140px; }

/* Variantes de cor da fita/ícone/data */
.ct-card.ct-cor-azul     { --cor: var(--ct-header); }
.ct-card.ct-cor-vermelho { --cor: var(--ct-danger); }
.ct-card.ct-cor-laranja  { --cor: var(--ct-warning); }
.ct-card.ct-cor-verde    { --cor: var(--ct-success); }
.ct-card.ct-cor-cinza    { --cor: #95a5a6; }

/* ============ CARD CONTAINER / TABELAS ============ */

.card { border: 1px solid #d2d6de; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.card-header.with-border { border-bottom: 1px solid #f4f4f4; }
.card-header .card-title {
  color: var(--ct-text-dark);
  font-weight: 600; letter-spacing: .3px; font-size: 1.05rem;
}
.card-header .card-title i { margin-right: .5rem; color: var(--ct-text-muted); }

/* ============ TABELA DE LISTAGEM (view "grid") ============
   Layout enriquecido: header marcado, fita lateral colorida na linha,
   ícone à esquerda e hover/zebra elegantes. */
.tabela-listagem {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin-bottom: 0;
}
.tabela-listagem thead th {
  white-space: nowrap;
  background-color: #f4f6f9;
  color: var(--ct-text-dark);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .3px;
  text-transform: uppercase;
  padding: .75rem .85rem;
  border-bottom: 2px solid #e0e6ed;
  border-top: none;
  vertical-align: middle;
}
.tabela-listagem thead th .col-ord { user-select: none; display: inline-block; }
.tabela-listagem thead th .col-ord:hover { color: var(--ct-header); }
.tabela-listagem thead th .op-30 { opacity: .3; }
.tabela-listagem .col-ico { width: 56px; text-align: center; padding: .35rem; }
.tabela-listagem tbody td.col-ico { padding: .55rem .35rem; }
.tabela-listagem tbody td {
  padding: .65rem .85rem;
  vertical-align: middle;
  border-top: 1px solid #f0f3f7;
  font-size: .92rem;
  color: var(--ct-text-dark);
}
.tabela-listagem td.nowrap { white-space: nowrap; }
.tabela-listagem tbody tr.linha-listagem { transition: background-color .15s ease, box-shadow .15s ease; position: relative; }
.tabela-listagem tbody tr.linha-listagem:nth-child(even) { background-color: #fafbfc; }
.tabela-listagem tbody tr.linha-listagem:hover {
  background-color: #f0f7fc !important;
  box-shadow: inset 4px 0 0 var(--cor, var(--ct-header));
}
.tabela-listagem tbody tr.linha-listagem.ct-cor-azul     { --cor: var(--ct-header); }
.tabela-listagem tbody tr.linha-listagem.ct-cor-vermelho { --cor: var(--ct-danger); }
.tabela-listagem tbody tr.linha-listagem.ct-cor-laranja  { --cor: var(--ct-warning); }
.tabela-listagem tbody tr.linha-listagem.ct-cor-verde    { --cor: var(--ct-success); }
.tabela-listagem tbody tr.linha-listagem.ct-cor-cinza    { --cor: #95a5a6; }

/* Ícone redondo colorido na primeira coluna */
.tabela-listagem .ico-tabela {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(60,141,188,.10);
  color: var(--cor, var(--ct-header));
  font-size: .95rem;
}
.tabela-listagem tr.ct-cor-vermelho .ico-tabela { background: rgba(221,75,57,.10); }
.tabela-listagem tr.ct-cor-laranja  .ico-tabela { background: rgba(243,156,18,.12); }
.tabela-listagem tr.ct-cor-verde    .ico-tabela { background: rgba(0,166,90,.10); }
.tabela-listagem tr.ct-cor-cinza    .ico-tabela { background: rgba(149,165,166,.15); }

/* Coluna principal (a primeira do conteúdo) com mais peso visual */
.tabela-listagem td.col-principal {
  font-weight: 600;
  color: var(--ct-text-dark);
}

/* Estado vazio */
.tabela-listagem .op-30 { opacity: .3; }

#page-container .page { display: none; }
#page-container .page.active { display: block; }

/* ============ TOOLBAR DE FILTROS ============ */

.toolbar-listagem {
  background: transparent;
  border: none;
  padding: 0 0 1rem 0;
}
.toolbar-listagem .filtro-grupo {
  display: inline-block;
  margin-right: 1rem;
  margin-bottom: .5rem;
  vertical-align: bottom;
}
.toolbar-listagem label {
  display: block;
  font-weight: 600;
  color: var(--ct-text-dark);
  font-size: .85rem;
  margin-bottom: .25rem;
}
.toolbar-listagem .form-control {
  display: inline-block; min-width: 240px;
}
.toolbar-listagem .btn-pesquisar {
  background-color: var(--ct-header);
  border-color: var(--ct-header);
  color: #fff;
  margin-top: 1.5rem;
}
.toolbar-listagem .btn-pesquisar:hover {
  background-color: var(--ct-header-dark);
  border-color: var(--ct-header-dark);
}

/* ============ FORMS ============ */

form .form-group { margin-bottom: 1rem; }
form label {
  color: var(--ct-text-dark); font-weight: 600; font-size: .85rem;
  text-transform: uppercase; letter-spacing: .3px;
  margin-bottom: .25rem;
}
form .form-check-label { font-weight: 400; text-transform: none; }
form .form-control { border-radius: 0; }

/* ============ MODAIS ============ */

.modal-header {
  background-color: var(--ct-header); color: #fff;
  border-bottom: none;
  padding: .75rem 1.25rem;
}
.modal-header .close { color: #fff; opacity: .85; text-shadow: none; }
.modal-header .close:hover { opacity: 1; }
.modal-header .modal-title { font-weight: 500; letter-spacing: .3px; font-size: 1.1rem; }

.modal-footer {
  background-color: #f4f6f9;
  border-top: 1px solid #e9ecef;
  justify-content: center;
}
.modal-footer .btn { min-width: 100px; }

/* ============ MISC ============ */

.nav-link.disabled { opacity: .55; cursor: not-allowed; }
.main-footer {
  background: #fff; color: var(--ct-text-muted); border-top: 1px solid #e9ecef;
  font-size: .85rem;
}
.main-footer strong { color: var(--ct-text-dark); }

.badge-info    { background-color: var(--ct-info); }
.badge-warning { background-color: var(--ct-warning); color: #fff; }
.badge-success { background-color: var(--ct-success); }
.badge-danger  { background-color: var(--ct-danger); }

.nav-tabs .nav-link { color: var(--ct-header); }
.nav-tabs .nav-link.active { color: var(--ct-text-dark); border-bottom: 2px solid var(--ct-header); }

/* Botão WhatsApp/Incluir no header da listagem */
.card-header .card-tools .btn { margin-left: .25rem; }