/* Vectra/Suprema UI v135 - refinamento visual interno
   Camada segura: só CSS. Não altera banco, rotas ou regras.
*/

:root {
  --vs-navy: #07152d;
  --vs-navy-2: #0c1f3f;
  --vs-blue: #1e63f0;
  --vs-blue-2: #2d8cff;
  --vs-green: #008e37;
  --vs-bg: #f5f8fc;
  --vs-surface: #ffffff;
  --vs-text: #101828;
  --vs-muted: #667085;
  --vs-border: rgba(15, 23, 42, .10);
  --vs-shadow-sm: 0 8px 22px rgba(15, 23, 42, .06);
  --vs-shadow-md: 0 18px 50px rgba(15, 23, 42, .10);
  --vs-radius: 18px;
}

/* Base geral */
body {
  background:
    radial-gradient(circle at 12% 8%, rgba(30,99,240,.055), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(0,142,55,.045), transparent 26%),
    linear-gradient(135deg, #f7fbff 0%, #f2f6fb 46%, #f8fbff 100%) !important;
  color: var(--vs-text);
}

/* Evita afetar a tela de login, que já tem CSS próprio */
.suprema-login-page * {
  box-sizing: border-box;
}

/* Cabeçalhos/topos comuns */
.topbar,
.header,
.app-header,
.navbar,
.vectra-topbar,
.main-header,
.page-header-bar {
  border-bottom: 1px solid rgba(15, 23, 42, .08) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06) !important;
}

/* Sidebar/menu lateral */
.sidebar,
.side-menu,
.app-sidebar,
.vectra-sidebar,
.aside,
.sidenav {
  background: linear-gradient(180deg, var(--vs-navy), var(--vs-navy-2)) !important;
  border-right: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 14px 0 34px rgba(7, 21, 45, .10) !important;
}

.sidebar a,
.side-menu a,
.app-sidebar a,
.vectra-sidebar a,
.aside a,
.sidenav a {
  border-radius: 12px !important;
  transition: background .18s ease, transform .18s ease, color .18s ease !important;
}

.sidebar a:hover,
.side-menu a:hover,
.app-sidebar a:hover,
.vectra-sidebar a:hover,
.aside a:hover,
.sidenav a:hover {
  background: rgba(255,255,255,.10) !important;
  transform: translateX(2px);
}

/* Marca no menu/topo */
.brand-badge,
.logo-badge,
.app-logo,
.vectra-logo-badge {
  border-radius: 16px !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.10) !important;
}

.brand-badge.brand-badge-suprema {
  background: rgba(255,255,255,.96) !important;
  overflow: hidden !important;
}
.brand-badge.brand-badge-suprema img {
  width: 30px !important;
  height: 24px !important;
  object-fit: contain !important;
}

/* Área principal */
main,
.main,
.content,
.app-content,
.vectra-main,
.page-content,
.dashboard-content {
  background: transparent !important;
}

/* Títulos */
h1, .h1, .page-title {
  letter-spacing: -.035em;
  color: #0b1730;
}
h2, .h2, h3, .h3 {
  letter-spacing: -.02em;
}

/* Cards e painéis */
.card,
.panel,
.box,
.widget,
.dashboard-card,
.metric-card,
.module-card,
.kpi-card,
.stat-card,
.section-card,
.content-card {
  border: 1px solid var(--vs-border) !important;
  border-radius: var(--vs-radius) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: var(--vs-shadow-sm) !important;
  overflow: hidden;
}

.card:hover,
.dashboard-card:hover,
.metric-card:hover,
.module-card:hover,
.kpi-card:hover,
.stat-card:hover {
  box-shadow: var(--vs-shadow-md) !important;
  transform: translateY(-1px);
}

.card-header,
.panel-heading,
.box-header,
.widget-header {
  background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
  border-bottom: 1px solid rgba(15, 23, 42, .08) !important;
  font-weight: 800 !important;
}

/* Botões */
button,
.btn,
.button,
input[type="submit"] {
  border-radius: 12px !important;
  font-weight: 700;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}

button:hover,
.btn:hover,
.button:hover,
input[type="submit"]:hover {
  transform: translateY(-1px);
}

.btn-primary,
.button-primary,
button[type="submit"],
input[type="submit"] {
  background: linear-gradient(90deg, var(--vs-blue), var(--vs-blue-2)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 12px 22px rgba(30,99,240,.18) !important;
}

.btn-danger {
  box-shadow: 0 12px 22px rgba(220,38,38,.12) !important;
}

/* Inputs e formulários */
input,
select,
textarea,
.form-control,
.form-select {
  border-radius: 12px !important;
  border: 1px solid rgba(15,23,42,.13) !important;
  background-color: rgba(255,255,255,.9) !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
  border-color: rgba(30,99,240,.50) !important;
  box-shadow: 0 0 0 4px rgba(30,99,240,.10) !important;
  outline: none !important;
}

label,
.form-label {
  font-weight: 700 !important;
  color: #1f2937 !important;
}

/* Tabelas */
table,
.table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;
}

.table,
.table-responsive {
  border-radius: 16px !important;
}

table thead th,
.table thead th {
  background: #f8fafc !important;
  color: #334155 !important;
  font-weight: 800 !important;
  border-bottom: 1px solid rgba(15,23,42,.10) !important;
}

table tbody tr,
.table tbody tr {
  transition: background .15s ease;
}

table tbody tr:hover,
.table tbody tr:hover {
  background: rgba(30,99,240,.035) !important;
}

/* Badges/status */
.badge,
.status,
.pill,
.tag {
  border-radius: 999px !important;
  font-weight: 700 !important;
  padding: .38rem .68rem !important;
}

/* Alertas */
.alert,
.flash,
.toast,
.notice {
  border-radius: 14px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: var(--vs-shadow-sm) !important;
}

/* Links */
a {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Dashboard: melhora blocos de atalho */
.quick-actions,
.actions-grid,
.modules-grid,
.dashboard-grid {
  gap: clamp(14px, 2vw, 22px) !important;
}

/* Scrollbar discreta */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(15,23,42,.22) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: rgba(15,23,42,.22);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-track { background: transparent; }

/* Responsivo */
@media (max-width: 768px) {
  .card,
  .panel,
  .box,
  .widget,
  .dashboard-card,
  .metric-card,
  .module-card {
    border-radius: 16px !important;
  }

  h1, .h1, .page-title {
    font-size: clamp(1.55rem, 7vw, 2.2rem) !important;
  }

  .table-responsive {
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: var(--vs-shadow-sm);
    background: rgba(255,255,255,.92);
  }
}