/* ============================================================
   premium.css — Camada visual PREMIUM reutilizável (Manager Pro)
   ------------------------------------------------------------
   Como usar: incluir DEPOIS do <style> inline da página, logo
   antes de </head>:
       <link href="css/premium.css" rel="stylesheet">
   Assim vence o cascade sobre a base sem precisar de !important.

   Só mexe em classes GENÉRICAS (.card, .stats-card, .table-dark,
   .btn-primary, .form-*, .pagination, .nav-tabs, .modal-content,
   .badge). NÃO toca em classes específicas de página.
   Indicada para telas de gestão/cadastro/relatório (dark).
   NÃO usar em telas de log denso ou dashboards com canvas/mapas.
   ============================================================ */

/* Fundo com brilho radial */
body {
    background:
        radial-gradient(1200px 600px at 12% -10%, rgba(99,102,241,0.12), transparent 60%),
        radial-gradient(1000px 520px at 100% 0%, rgba(16,185,129,0.06), transparent 55%),
        linear-gradient(135deg, #0b1120 0%, #0f172a 55%, #131c30 100%);
    background-attachment: fixed;
}

/* Título do cabeçalho em degradê (o ícone preserva a cor) */
.container-fluid h1,
.container h1 {
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(90deg, #e2e8f0, #a5b4fc);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.container-fluid h1 i,
.container h1 i { -webkit-text-fill-color: #818cf8; }

/* Cards premium com hairline de acento no topo */
.card {
    background: linear-gradient(160deg, rgba(30,41,59,0.92), rgba(15,23,42,0.72));
    border: 1px solid rgba(148,163,184,0.10);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.28);
    position: relative;
    overflow: hidden;
}
.card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99,102,241,0.55), rgba(16,185,129,0.4), transparent);
}
.card-header { background: transparent; border-bottom: 1px solid rgba(148,163,184,0.10); }
.card-footer { background: transparent; border-top: 1px solid rgba(148,163,184,0.10); }

/* Stats cards — número-herói + faixa de acento no topo + hover */
.stats-card {
    background: linear-gradient(160deg, rgba(30,41,59,0.95), rgba(15,23,42,0.78));
    border: 1px solid rgba(148,163,184,0.10);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(0,0,0,0.28);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.stats-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #6366f1, #22d3ee);
}
.stats-card:hover {
    transform: translateY(-3px);
    border-color: rgba(99,102,241,0.28);
    box-shadow: 0 18px 40px rgba(0,0,0,0.42);
}
.stats-number { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.02em; }

/* Tabela estilo cartão (card-row) */
.table.table-dark { border-collapse: separate; border-spacing: 0 7px; }
.table.table-dark thead th {
    background: transparent !important;
    border: none !important;
    color: #64748b !important;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.4rem 0.9rem;
}
.table.table-dark tbody tr {
    background: rgba(30,41,59,0.55);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.table.table-dark tbody td {
    border: none;
    border-top: 1px solid rgba(148,163,184,0.06);
    border-bottom: 1px solid rgba(148,163,184,0.06);
    padding: 0.7rem 0.9rem;
    vertical-align: middle;
}
.table.table-dark tbody td:first-child {
    border-left: 1px solid rgba(148,163,184,0.06);
    border-radius: 10px 0 0 10px;
}
.table.table-dark tbody td:last-child {
    border-right: 1px solid rgba(148,163,184,0.06);
    border-radius: 0 10px 10px 0;
}
.table.table-hover tbody tr:hover {
    background: rgba(99,102,241,0.10) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
/* Cabeçalhos ordenáveis mantêm destaque no hover */
.table.table-dark thead th.sortable:hover { color: #a5b4fc !important; }

/* Pílulas arredondadas */
.badge, .protocol-badge, .status-badge { border-radius: 999px; }

/* Botão primário premium */
.btn-primary {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border: none;
    box-shadow: 0 6px 16px rgba(99,102,241,0.35);
}
.btn-primary:hover {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* Inputs premium */
.form-control, .form-select { border-radius: 10px; }
.form-control:focus, .form-select:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.18);
}

/* Abas premium (acento inferior no item ativo) */
.nav-tabs { border-bottom: 1px solid rgba(148,163,184,0.12); gap: 4px; }
.nav-tabs .nav-link { font-weight: 600; border: none !important; color: #94a3b8; }
.nav-tabs .nav-link:hover { background: rgba(99,102,241,0.08); color: #e2e8f0; }
.nav-tabs .nav-link.active {
    background: transparent;
    color: #c7d2fe;
    box-shadow: inset 0 -2px 0 #6366f1;
}

/* Pills premium */
.nav-pills .nav-link.active {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    box-shadow: 0 6px 16px rgba(99,102,241,0.4);
}

/* Paginação premium */
.pagination .page-link {
    background: rgba(30,41,59,0.7);
    border-color: rgba(148,163,184,0.12);
    color: #cbd5e1;
    border-radius: 8px;
    margin: 0 2px;
}
.pagination .page-link:hover { background: rgba(99,102,241,0.18); color: #c7d2fe; }
.pagination .active .page-link,
.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border-color: transparent;
}

/* Modais premium (gradiente + hairline) */
.modal-content {
    background: linear-gradient(160deg, rgba(30,41,59,0.98), rgba(15,23,42,0.92));
    border: 1px solid rgba(148,163,184,0.12);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}
.modal-content::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(99,102,241,0.7), transparent);
}
.modal-header, .modal-footer { border-color: rgba(148,163,184,0.12); }