@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;600;700&display=swap');

:root {
  --nucleo-purple: #4b31dd;
  --nucleo-green: #0fb872;
  --nucleo-orange: #FF8C42;
  --nucleo-yellow: #e2a805;
  --nucleo-ink: #231f20;
  --nucleo-bg: #eeeeee;
  --nucleo-card-bg: #ffffff;
  --nucleo-border: #dcdcdc;
  --card-radius: 14px;
  --card-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.05);
}

/* ==========================================================
   BASE
   ========================================================== */

body, .content-wrapper, .right-side {
  background-color: var(--nucleo-bg) !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 16px;
  color: var(--nucleo-ink);
  padding: 5px;
}

.content {
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide shinydashboard chrome - this app is styled as a standalone embeddable page */
aside, .navbar, .main-header, .main-sidebar {
  display: none;
}

.skin-blue .left-side, .skin-blue .main-sidebar, .skin-blue .wrapper {
  background-color: var(--nucleo-bg) !important;
}

.container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
  color: var(--nucleo-ink);
  background-color: var(--nucleo-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Barlow', sans-serif !important;
  color: var(--nucleo-ink);
}

h1 { font-size: 18px; font-weight: 700; margin-top: 12px; }
h2 { font-size: 1.4em; font-weight: 700; margin-bottom: 4px; }
h3 { font-size: 1em; font-weight: 700; }
h4 { font-size: 16px; font-weight: 300; margin-top: 0; color: #555; }
h5 { font-size: 11px; }
p  { margin: 0 0 12px; font-size: 0.9em; }

/* Plotly renders chart text as SVG <tspan> - keep it on-brand */
tspan {
  font-family: 'Barlow', sans-serif;
  font-size: 1.2em;
}

.icons { color: var(--nucleo-green); }

.shiny-output-error { visibility: hidden; }
.shiny-output-error:before { visibility: hidden; }

/* ==========================================================
   HEADER
   ========================================================== */

.app-header {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* ==========================================================
   CARDS (filters / charts / table share one visual language)
   ========================================================== */

.warning, .filters-card, .chart-card, .table-card {
  background-color: var(--nucleo-card-bg);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

.warning {
  margin: 16px auto 8px;
  text-align: left;
  max-width: 100%;
  padding: 18px 20px;
}

/* nota "Dados registrados no TSE até..." dentro do callout de warning */
.warning .update-note {
  font-size: 0.85em;
  color: #555555;
  margin: 10px 0 0;
}

/* seletor de eleição no topo, centralizado, abaixo do warning */
.col-eleicao {
  text-align: center;
  margin-bottom: 14px;
}
.col-eleicao .control-label {
  float: none;
  display: inline-block;
  margin: 0 0 6px 0 !important;
}

/* The card classes live on an inner div, not on the col-sm-* itself: side margins
   on a Bootstrap 3 float column make the row exceed 100% and the next column wraps
   below (this is what used to stack the whole dashboard into one column). Gutters
   come from the columns' own 15px padding. */
.filters-card {
  padding: 20px 20px 8px;
  margin: 0 0 20px;
  display: flow-root; /* contains the floated col-sm-6 inputs inside (plain div, unlike the old floated col) */
}

.chart-card {
  padding: 18px 20px 8px;
  margin: 0 0 20px;
  min-width: 0; /* lets plotly shrink inside the flex/float column instead of overflowing */
}

.table-card {
  padding: 16px;
  margin: 10px 0 30px;
}

/* ==========================================================
   KPI VALUE BOXES
   ========================================================== */

/* shinydashboard's valueBox() columns are float-based (Bootstrap 3), not flex -
   a flex container here breaks their width/stacking. The kpi-row is the col-sm-8
   beside the filters-card sidebar; each valueBox is width=6, giving a 2x3 grid. */
.kpi-row {
  margin: 0 0 10px;
  /* the valueBox cols inside carry their own 15px gutter; without this the grid
     gets double padding and misaligns 15px vs the chart cards below */
  padding: 0;
}
.kpi-row::after {
  content: "";
  display: table;
  clear: both;
}

.kpi-row .small-box {
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  min-height: 130px;
  display: flex;
  margin-bottom: 15px;
}

.kpi-row .small-box > .inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.kpi-row .inner {
  background-color: var(--nucleo-green);
  color: #fff;
  font-family: 'Barlow', sans-serif;
}

.kpi-row .inner > p {
  font-size: 0.95em;
  font-weight: 400;
  margin-bottom: 0;
}

.kpi-row .inner > h3 {
  font-size: 1.9em;
  font-weight: 700;
  margin: 0 0 4px;
}

.kpi-row .icon-large, .kpi-row .small-box-footer {
  color: rgba(255,255,255,0.5);
}

/* ícone menor e mais discreto que o padrão do AdminLTE (90px) */
.kpi-row .small-box .icon-large {
  font-size: 42px;
  top: auto;
  bottom: 8px;
  right: 12px;
}

/* KPIs "hero" (largura total): volume financeiro e nº de candidatos */
.kpi-row > .col-sm-12 .small-box { min-height: 170px; }
.kpi-row > .col-sm-12 .inner > h3 { font-size: 2.8em; }
.kpi-row > .col-sm-12 .inner > p { font-size: 1.05em; }
.kpi-row > .col-sm-12 .small-box .icon-large { font-size: 56px; }

.shiny-text-output { display: inline; }

/* ==========================================================
   INPUTS
   ========================================================== */

.shiny-input-container:not(.shiny-input-container-inline) { width: 100% !important; }
.shiny-input-container { margin-bottom: 10px; }

.form-group { margin-bottom: 0; margin-top: 0; }

.control-label {
  float: left;
  margin: 20px 0 0 0 !important;
}

#valor_custom,
.selectize-input.full {
  background-color: var(--nucleo-bg) !important;
  border-radius: 6px !important;
  border: 2px solid var(--nucleo-green) !important;
}

.selectize-input { font-size: 0.9em; }

.input-group-sm > .input-group-addon { height: 45px; }
.input-group-addon:not(:first-child):not(:last-child) {
  background-color: var(--nucleo-bg);
  border: none;
  height: 15px;
}
.input-group .form-control:first-child,
.input-group .form-control:last-child {
  background-color: var(--nucleo-bg);
  border-radius: 6px;
  border: 2px solid var(--nucleo-green);
}

input::placeholder {
  color: var(--nucleo-ink) !important;
  font-size: 0.9em;
  opacity: 1;
  font-weight: 300;
}

/* botão de download dos dados filtrados */
.btn-download {
  background-color: var(--nucleo-green) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  font-weight: 600;
  padding: 8px 14px;
}
.btn-download:hover { background-color: #0da265 !important; }

/* shinyWidgets prettyRadioButtons ("Valores R$" / "Contagem" toggle) */
.pretty { margin-left: -10px; }
.pretty input:checked ~ .state.p-primary label::after,
.pretty.p-toggle .state.p-primary label::after {
  background-color: var(--nucleo-yellow) !important;
}

/* ==========================================================
   TABLE (DataTables)
   ========================================================== */

td { font-size: 0.9em !important; }
th { text-align: center !important; }

.dataTables_wrapper .dataTables_filter {
  float: left !important;
  text-align: left !important;
}

.dataTables_filter label { display: block !important; width: 100%; }

.dataTables_filter input {
  width: 100%;
  border-width: 2px;
  background-color: var(--nucleo-bg);
  border-color: var(--nucleo-green) !important;
  border-radius: 6px;
  border-style: solid;
  padding: 6px 12px;
  text-align: center;
  margin: 0 15px 15px 0;
  color: var(--nucleo-ink);
}

button.dt-button, div.dt-button, a.dt-button, input.dt-button {
  line-height: 0 !important;
  border: 2px solid var(--nucleo-green) !important;
  border-radius: 6px;
  background: var(--nucleo-bg) !important;
  min-height: 40px !important;
}

/* graf_ufs/graf_politicos don't set an explicit plotly height server-side, so without
   a floor they render too short given how many bars/points they can hold */
#graf_ufs, #graf_politicos { min-height: 630px; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */

/* Viewport intermediário (ex.: iframe no nucleo.jor.br com as colunas do site
   abertas, ~1200px): o par filtros (1/3) + KPIs (2/3) fica espremido. Quebra
   para filtros em largura cheia (inputs em 3 colunas) sobre os KPIs (3 por
   linha). Abaixo de 768px o Bootstrap já empilha tudo sozinho. */
@media only screen and (min-width: 768px) and (max-width: 1280px) {
  .col-filtros, .kpi-row { width: 100%; }
  .filters-card > .col-sm-6 { width: 33.333%; }
  .kpi-row > .col-sm-6 { width: 33.333%; }
  .kpi-row .small-box { min-height: 0; }
}

@media only screen and (max-width: 600px) {
  #graf_ufs, #graf_politicos, #graf_politicos_top { min-height: 420px; }
  .kpi-row .inner > h3 { font-size: 1.9em; }
  .kpi-row .small-box { min-height: 0; }
}

/* ==========================================================
   MODALS (shiny notifications / DT export dialogs)
   ========================================================== */

.modal-content {
  background-color: var(--nucleo-bg) !important;
  border-radius: 10px !important;
}

@media (min-width: 768px) {
  .modal-content {
    box-shadow: 0 2px 3px rgba(0,0,0,.125);
  }
}