/* Vectra Modern V130
   Camada visual segura: muda aparencia, nao altera regras de negocio, rotas ou banco. */
:root{
  --vm-bg:#eef4fb;
  --vm-bg-2:#f8fbff;
  --vm-surface:rgba(255,255,255,.92);
  --vm-surface-solid:#ffffff;
  --vm-border:rgba(148,163,184,.26);
  --vm-border-strong:rgba(37,99,235,.18);
  --vm-text:#0b172a;
  --vm-muted:#66758a;
  --vm-primary:var(--vectra-primary-runtime, #2563eb);
  --vm-primary-dark:var(--vectra-secondary-runtime, #0f172a);
  --vm-accent:var(--vectra-accent-runtime, #14b8a6);
  --vm-radius-xl:28px;
  --vm-radius-lg:22px;
  --vm-radius-md:16px;
  --vm-shadow:0 22px 55px rgba(15,23,42,.10);
  --vm-shadow-soft:0 12px 28px rgba(15,23,42,.07);
  --vm-ring:0 0 0 4px rgba(20,184,166,.15);
}

html{background:var(--vm-bg);}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.16), transparent 34rem),
    radial-gradient(circle at 82% 0%, rgba(20,184,166,.13), transparent 30rem),
    linear-gradient(135deg, #f8fbff 0%, var(--vm-bg) 48%, #f6f7fb 100%) !important;
  color:var(--vm-text) !important;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  letter-spacing:-.01em;
}

.app-shell{
  min-height:100vh;
  background:transparent !important;
}

/* Sidebar mais profissional */
.sidebar.vectra-sidebar-clean,
.sidebar{
  width:292px;
  padding:20px 16px;
  background:
    linear-gradient(180deg, rgba(15,23,42,.98), rgba(15,37,79,.96) 48%, rgba(13,64,115,.94)) !important;
  border-right:1px solid rgba(255,255,255,.10);
  box-shadow:18px 0 60px rgba(15,23,42,.22) !important;
  position:sticky;
  top:0;
  height:100vh;
  overflow:auto;
  scrollbar-width:thin;
}
.sidebar::-webkit-scrollbar{width:8px;}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.20);border-radius:999px;}

.brand{
  padding:10px 10px 18px;
  margin-bottom:10px !important;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.brand-badge{
  width:50px!important;
  height:50px!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,#fff,#dbeafe)!important;
  color:var(--vm-primary)!important;
  box-shadow:0 14px 30px rgba(0,0,0,.18);
}
.brand h1{
  color:#fff!important;
  font-size:1.06rem!important;
  line-height:1.12;
  letter-spacing:-.03em;
  margin:0!important;
}
.brand p{
  color:rgba(226,232,240,.78)!important;
  font-size:.78rem!important;
  margin-top:4px!important;
}

.side-nav,
.vectra-nav-clean{gap:7px!important;}
.nav-item,
.side-nav a,
.nav-group summary{
  min-height:43px;
  border-radius:15px!important;
  padding:10px 12px!important;
  color:rgba(241,245,249,.88)!important;
  background:transparent!important;
  border:1px solid transparent;
  transition:background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease,color .16s ease;
}
.nav-item:hover,
.side-nav a:hover,
.nav-group summary:hover{
  background:rgba(255,255,255,.09)!important;
  border-color:rgba(255,255,255,.10)!important;
  transform:translateX(2px);
}
.nav-item.active,
.side-nav a.active{
  background:linear-gradient(135deg, rgba(37,99,235,.95), rgba(20,184,166,.86))!important;
  color:#fff!important;
  box-shadow:0 16px 28px rgba(37,99,235,.28)!important;
}
.nav-icon{
  width:24px;
  height:24px;
  display:inline-grid;
  place-items:center;
  margin-right:7px;
}
.nav-group{
  border-radius:18px;
  margin:2px 0;
}
.nav-group[open]{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.08);
  padding:4px;
}
.nav-group summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  gap:9px;
}
.nav-group summary::-webkit-details-marker{display:none;}
.nav-group summary::after{
  content:"›";
  margin-left:auto;
  opacity:.72;
  transform:rotate(90deg);
  transition:transform .15s ease;
}
.nav-group[open] summary::after{transform:rotate(-90deg);}
.nav-subitems{
  display:grid;
  gap:5px;
  padding:4px 0 4px 8px;
}
.nav-subitems .nav-item,
.nav-subitems a{
  font-size:.91rem;
  color:rgba(226,232,240,.80)!important;
}

/* Area principal */
.content-area{
  padding:30px clamp(18px,3vw,42px)!important;
  background:transparent!important;
  min-width:0;
}
.content-area:not(.content-full){
  max-width:1580px;
}
.content-full{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  min-height:100vh;
  padding:24px!important;
}

/* Cabecalhos */
.topbar,
.page-header,
.dashboard-header,
.module-header,
.hero,
.page-hero,
.dashboard-hero,
.module-hero{
  background:linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,251,255,.88))!important;
  border:1px solid var(--vm-border)!important;
  border-radius:var(--vm-radius-xl)!important;
  box-shadow:var(--vm-shadow-soft)!important;
  backdrop-filter:blur(14px);
}
.page-header,
.dashboard-header,
.module-header,
.hero,
.page-hero,
.dashboard-hero,
.module-hero{
  padding:24px!important;
  margin-bottom:24px!important;
  position:relative;
  overflow:hidden;
}
.page-header::before,
.dashboard-header::before,
.module-header::before,
.hero::before,
.page-hero::before,
.dashboard-hero::before,
.module-hero::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:7px;
  background:linear-gradient(180deg,var(--vm-primary),var(--vm-accent));
}
.page-header h1,.page-header h2,
.dashboard-header h1,.dashboard-header h2,
.module-header h1,.module-header h2,
.hero h1,.hero h2,
.page-hero h1,.page-hero h2{
  color:var(--vm-text)!important;
  letter-spacing:-.045em!important;
  line-height:1.05!important;
}
.page-header p,
.dashboard-header p,
.module-header p,
.hero p,
.topbar span,
.topbar-meta{color:var(--vm-muted)!important;}

/* Cards, paineis e blocos */
.panel,
.module-card,
.login-card,
.card,
.box,
.stat-card,
.metric-card,
.dashboard-card,
.settings-card,
.maintenance-card,
.monitor-card,
.alert-card,
.audit-card,
.insight-card,
.form-card,
.table-card,
.question-card,
.report-card,
.simple-list-row,
.question-row,
.question-editor,
.network-box,
.network-panel{
  background:var(--vm-surface)!important;
  border:1px solid var(--vm-border)!important;
  border-radius:var(--vm-radius-lg)!important;
  box-shadow:var(--vm-shadow-soft)!important;
  backdrop-filter:blur(12px);
}
.panel,
.module-card,
.login-card,
.card,
.box,
.dashboard-card{
  padding:22px!important;
}
.module-card,
.dashboard-card,
.metric-card,
.stat-card,
.panel{
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.module-card:hover,
.dashboard-card:hover,
.metric-card:hover,
.stat-card:hover,
.panel:hover{
  transform:translateY(-2px);
  box-shadow:var(--vm-shadow)!important;
  border-color:var(--vm-border-strong)!important;
}
.module-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:17px;
  background:linear-gradient(135deg, rgba(37,99,235,.12), rgba(20,184,166,.12));
  font-size:1.45rem!important;
}

h1,h2,h3,h4{
  color:var(--vm-text)!important;
  letter-spacing:-.035em;
}
p,.muted,.text-muted,small,li{color:var(--vm-muted)!important;}

/* Botoes */
.btn,
button,
a.button,
.button,
input[type="submit"],
input[type="button"]{
  border-radius:14px!important;
  min-height:44px;
  font-weight:800!important;
  letter-spacing:-.01em;
  border:1px solid transparent;
  box-shadow:none;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease!important;
}
.btn:hover,
button:hover,
a.button:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(15,23,42,.11);
}
.btn-primary,
button[type="submit"],
input[type="submit"]{
  background:linear-gradient(135deg,var(--vm-primary),#1e8adf)!important;
  color:#fff!important;
}
.btn-secondary{
  background:#eef6ff!important;
  color:#1450a3!important;
  border-color:#cfe0f7!important;
}
.btn-ghost{
  background:rgba(255,255,255,.72)!important;
  border-color:var(--vm-border)!important;
  color:var(--vm-text)!important;
}
.btn-danger{background:linear-gradient(135deg,#dc2626,#991b1b)!important;color:#fff!important;}

/* Formularios */
label{color:var(--vm-text)!important;font-weight:800!important;}
input,
select,
textarea{
  border:1px solid rgba(148,163,184,.36)!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.92)!important;
  color:var(--vm-text)!important;
  min-height:44px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
input:focus,
select:focus,
textarea:focus{
  outline:none!important;
  border-color:var(--vm-accent)!important;
  box-shadow:var(--vm-ring)!important;
}
fieldset{border-color:var(--vm-border)!important;border-radius:18px!important;background:rgba(248,251,255,.72);}
legend{font-weight:900;color:var(--vm-primary-dark);}

/* Tabelas */
.table-wrap,
.table-responsive,
.responsive-table{
  background:var(--vm-surface-solid);
  border:1px solid var(--vm-border);
  border-radius:20px;
  box-shadow:var(--vm-shadow-soft);
}
table{border-collapse:separate!important;border-spacing:0!important;}
thead th,
th{
  background:#f5f8fc!important;
  color:#163253!important;
  font-weight:900!important;
  border-bottom:1px solid var(--vm-border)!important;
}
td{color:#27364a;}
tr:hover td{background:rgba(37,99,235,.035);}

/* Preserva relatorios com formato institucional/impresso */
.report-table-horizontal th,
.report-table-horizontal td,
.suprema-meta-table td{
  border:1px solid #111!important;
  background:transparent!important;
  box-shadow:none!important;
}
.report-header-suprema,
.report-table-horizontal,
.suprema-meta-table{
  box-shadow:none!important;
  backdrop-filter:none!important;
}

/* Login */
.login-page{
  min-height:calc(100vh - 48px);
  align-items:center;
  position:relative;
}
.login-card{
  max-width:470px!important;
  padding:30px!important;
  border-radius:30px!important;
  box-shadow:0 28px 80px rgba(15,23,42,.18)!important;
  position:relative;
  overflow:hidden;
}
.login-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:6px;
  background:linear-gradient(90deg,var(--vm-primary),var(--vm-accent));
}
.login-card .brand{
  border:0;
  padding:0;
  color:var(--vm-text);
}
.login-card .brand h1{color:var(--vm-text)!important;font-size:1.35rem!important;}
.login-card .brand p{color:var(--vm-muted)!important;}
.note-box,
.network-box{
  border:1px solid var(--vm-border)!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,#f8fbff,#eef6ff)!important;
}
code{
  padding:.13rem .34rem;
  border-radius:8px;
  background:rgba(15,23,42,.06);
  color:#0f3e78;
}

/* Alertas */
.flash{
  border-radius:16px!important;
  border:1px solid transparent;
  box-shadow:var(--vm-shadow-soft);
}
.flash.success{background:#dffbea!important;color:#087a51!important;border-color:#b7efcd!important;}
.flash.error{background:#ffe7e7!important;color:#991b1b!important;border-color:#ffc4c4!important;}
.flash.warning{background:#fff5dc!important;color:#92400e!important;border-color:#fde68a!important;}

/* Footer */
.vectra-footer{
  margin-top:28px!important;
  color:var(--vm-muted)!important;
  opacity:.86;
}

/* Mobile */
@media (max-width: 1000px){
  .app-shell{display:block!important;}
  .sidebar.vectra-sidebar-clean,.sidebar{
    position:relative;
    width:100%!important;
    height:auto!important;
    max-height:none;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  .side-nav{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
  .nav-group[open]{grid-column:1/-1;}
  .content-area{padding:18px!important;}
  .page-header,.topbar{border-radius:22px!important;}
}
@media (max-width:640px){
  .side-nav{grid-template-columns:1fr;}
  .login-card{padding:22px!important;border-radius:24px!important;}
  .panel,.module-card,.card,.box{padding:18px!important;border-radius:20px!important;}
  .page-header{padding:20px!important;}
  .btn,button,a.button,.button,input[type="submit"],input[type="button"]{width:100%;}
}

@media print{
  body{background:#fff!important;color:#000!important;}
  .sidebar,.vectra-footer,.btn,button{display:none!important;}
  .content-area{padding:0!important;}
  .panel,.card,.module-card,.table-wrap{box-shadow:none!important;border-color:#999!important;}
}