/* ============================================================
   Leblon Equities — ANS Dashboard  |  Brand Identity
   All rules scoped to #ans_layout to avoid affecting other pages.
   Palette: teal-based  |  Fonts: Cambria (headers), Calibri (body)
   ============================================================ */

/* === CSS VARIABLES (global — harmless, only used where referenced) === */
:root {
  --leq-navy:      #2A6060;
  --leq-navy2:     #1C4040;
  --leq-gold:      #DAEAE8;
  --leq-gold2:     #7ABABA;
  --leq-offwhite:  #F4F8F7;
  --leq-cream:     #EBF4F2;
  --leq-dark:      #1A2828;
  --leq-charcoal:  #364848;
  --leq-midgray:   #6B8282;
  --leq-lightgray: #D5E5E2;
  --leq-green:     #1B7A4C;
  --leq-red:       #C0392B;
}

/* === ANS PAGE BASE === */
#ans_layout {
  font-family: "Calibri", "Segoe UI", system-ui, sans-serif;
  color: var(--leq-charcoal);
}

#ans_layout h1, #ans_layout h2, #ans_layout h3,
#ans_layout h4, #ans_layout h5, #ans_layout h6 {
  font-family: "Cambria", "Georgia", serif;
  color: var(--leq-navy);
}

#ans_layout small,
#ans_layout .small {
  font-family: "Calibri", "Segoe UI", sans-serif;
}

/* === BORDER DIVIDER === */
#ans_layout .border-bottom {
  border-color: var(--leq-lightgray) !important;
}

/* === CARDS === */
#ans_layout .card {
  border: 1px solid var(--leq-lightgray) !important;
  border-radius: 3px !important;
  box-shadow: 0 2px 8px rgba(42, 96, 96, 0.07) !important;
  background-color: white;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

#ans_layout .card:hover {
  box-shadow: 0 4px 14px rgba(42, 96, 96, 0.12) !important;
}

#ans_layout .kpi-card:hover {
  transform: translateY(-1px);
  border-color: var(--leq-gold2) !important;
}

#ans_layout .card-header {
  background-color: var(--leq-navy) !important;
  color: var(--leq-gold) !important;
  font-family: "Calibri", sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  border-bottom: none !important;
  border-radius: 2px 2px 0 0 !important;
  padding: 7px 14px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#ans_layout .card-header .btn,
#ans_layout .card-header a,
#ans_layout .card-header button {
  color: var(--leq-gold2) !important;
  font-size: 11px;
  opacity: 0.85;
  transition: opacity 0.15s;
}

#ans_layout .card-header .btn:hover,
#ans_layout .card-header a:hover,
#ans_layout .card-header button:hover {
  opacity: 1;
  color: white !important;
}

/* === KPI METRIC CARDS === */
#ans_layout .kpi-card {
  border-top: 3px solid var(--leq-navy) !important;
  border-radius: 2px !important;
}

#ans_layout .kpi-card .card-body {
  padding: 10px 14px;
}

#ans_layout .kpi-card small {
  font-family: "Calibri", sans-serif;
  font-size: 9px !important;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--leq-midgray) !important;
  font-weight: 700;
}

#ans_layout .kpi-card .h5,
#ans_layout .kpi-card h5 {
  font-family: "Cambria", "Georgia", serif;
  font-size: 1.35rem;
  color: var(--leq-navy);
  margin: 3px 0 1px;
}

/* === TABS === */
#ans_layout .nav-tabs {
  border-bottom: 2px solid var(--leq-lightgray) !important;
  gap: 0;
}

#ans_layout .nav-tabs .nav-item .nav-link {
  color: var(--leq-midgray) !important;
  font-family: "Calibri", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.8px;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 7px 18px;
  transition: color 0.2s ease, border-bottom-color 0.2s ease, background 0.2s ease !important;
}

#ans_layout .nav-tabs .nav-item .nav-link:hover {
  color: var(--leq-navy) !important;
  border-bottom-color: var(--leq-gold2) !important;
  background: transparent !important;
}

#ans_layout .nav-tabs .nav-item .nav-link.active {
  color: var(--leq-navy) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--leq-navy) !important;
  font-weight: 700;
}

/* === REDE HOSPITALAR — scrollbar custom divs === */
#ans_rede_scroll_thumb_redim:hover,
#ans_rede_scroll_thumb_subs:hover {
  background-color: var(--leq-navy2) !important;
}

#ans_rede_scroll_thumb_redim:active,
#ans_rede_scroll_thumb_subs:active {
  cursor: grabbing !important;
}

/* Sticky header for rede log table */
#ans_rede_log table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* === FORM LABELS === */
#ans_layout label.small,
#ans_layout .small.text-muted,
#ans_layout label {
  font-family: "Calibri", sans-serif;
  font-size: 9px !important;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--leq-midgray) !important;
  font-weight: 700;
}

/* === RADIO ITEMS === */
#ans_layout .form-check-input:checked {
  background-color: var(--leq-navy) !important;
  border-color: var(--leq-navy) !important;
}

/* === BADGES === */
#ans_layout .badge {
  font-family: "Calibri", sans-serif;
  font-size: 9.5px !important;
  letter-spacing: 0.8px;
  padding: 5px 10px !important;
  border-radius: 2px !important;
}

#ans_layout .badge.bg-warning,
#ans_layout .badge.text-bg-warning {
  background-color: var(--leq-navy2) !important;
  color: var(--leq-gold) !important;
}

/* === ALERTS === */
#ans_layout .alert {
  border-radius: 2px !important;
  font-size: 12px;
  padding: 8px 14px !important;
}

#ans_layout .alert-warning {
  background-color: var(--leq-cream) !important;
  border-color: var(--leq-gold2) !important;
  border-left: 4px solid var(--leq-gold2) !important;
  color: var(--leq-charcoal) !important;
  font-size: 12px;
}

/* === BUTTONS === */
#ans_layout .btn-outline-secondary {
  color: var(--leq-navy) !important;
  border-color: var(--leq-lightgray) !important;
  font-size: 11px;
}

#ans_layout .btn-outline-secondary:hover {
  background-color: var(--leq-navy) !important;
  border-color: var(--leq-navy) !important;
  color: white !important;
}

#ans_layout .btn:focus-visible,
#ans_layout .form-control:focus-visible,
#ans_layout .form-select:focus-visible {
  outline: 2px solid var(--leq-gold2) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}

/* === DROPDOWN (dcc.Dropdown — React-Select v1/v2 API) === */
#ans_layout .Select-control {
  border-color: var(--leq-lightgray) !important;
  border-radius: 3px !important;
  font-family: "Calibri", sans-serif;
}

#ans_layout .Select-control:hover,
#ans_layout .is-focused .Select-control {
  border-color: var(--leq-gold2) !important;
  box-shadow: 0 0 0 2px rgba(122, 186, 186, 0.25) !important;
}

#ans_layout .Select-value-label,
#ans_layout .Select-placeholder,
#ans_layout .Select-input input {
  font-family: "Calibri", sans-serif !important;
  color: var(--leq-charcoal) !important;
  font-size: 13px !important;
}

#ans_layout .Select-menu-outer {
  border-color: var(--leq-lightgray) !important;
  box-shadow: 0 4px 12px rgba(42, 96, 96, 0.1) !important;
  border-radius: 0 0 3px 3px !important;
}

#ans_layout .Select-option {
  font-family: "Calibri", sans-serif;
  font-size: 13px;
  color: var(--leq-charcoal);
  padding: 6px 12px;
}

#ans_layout .Select-option.is-focused {
  background-color: var(--leq-offwhite) !important;
  color: var(--leq-navy) !important;
}

#ans_layout .Select-option.is-selected {
  background-color: var(--leq-navy) !important;
  color: var(--leq-gold) !important;
}

#ans_layout .Select-value {
  background-color: var(--leq-offwhite) !important;
  border-color: var(--leq-lightgray) !important;
  border-radius: 2px !important;
  color: var(--leq-navy) !important;
  font-size: 11px !important;
  padding: 1px 4px !important;
}

#ans_layout .Select-value-icon {
  border-right-color: var(--leq-lightgray) !important;
  color: var(--leq-midgray) !important;
}

#ans_layout .Select-value-icon:hover {
  background-color: var(--leq-navy) !important;
  color: white !important;
}

/* === SLIDER (Dash 2.x — rc-slider) === */
#ans_layout .rc-slider-track {
  background-color: var(--leq-navy) !important;
}

#ans_layout .rc-slider-rail {
  background-color: var(--leq-lightgray) !important;
}

#ans_layout .rc-slider-handle {
  background-color: white !important;
  border: 2px solid var(--leq-navy) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

#ans_layout .rc-slider-handle:hover,
#ans_layout .rc-slider-handle:focus,
#ans_layout .rc-slider-handle-dragging {
  border-color: var(--leq-gold2) !important;
  box-shadow: 0 0 0 4px rgba(122, 186, 186, 0.2) !important;
  outline: none !important;
}

#ans_layout .rc-slider-dot {
  border-color: var(--leq-lightgray) !important;
  background-color: white !important;
}

#ans_layout .rc-slider-dot-active {
  border-color: var(--leq-navy) !important;
}

#ans_layout .rc-slider-mark-text {
  color: var(--leq-midgray) !important;
  font-family: "Calibri", sans-serif !important;
  font-size: 10px !important;
}

#ans_layout .rc-slider-mark-text-active {
  color: var(--leq-navy) !important;
}

#ans_layout .rc-slider-tooltip-inner {
  background-color: var(--leq-navy) !important;
  color: var(--leq-gold) !important;
  font-family: "Calibri", sans-serif;
  font-size: 11px;
  border-radius: 3px;
}

#ans_layout .dash-range-slider-input {
  display: none !important;
}

/* === SLIDER (Dash 4 — Radix-based, kept for future upgrade) === */
#ans_layout .dash-slider-range {
  background-color: var(--leq-navy) !important;
}

#ans_layout .dash-slider-track {
  background-color: var(--leq-lightgray) !important;
}

#ans_layout .dash-slider-thumb {
  background-color: white !important;
  border: 2px solid var(--leq-navy) !important;
  box-shadow: none !important;
}

#ans_layout .dash-slider-thumb:hover,
#ans_layout .dash-slider-thumb:focus {
  border-color: var(--leq-gold2) !important;
  box-shadow: 0 0 0 4px rgba(122, 186, 186, 0.2) !important;
  outline: none !important;
}

#ans_layout .dash-slider-mark {
  color: var(--leq-midgray) !important;
  font-family: "Calibri", sans-serif !important;
  font-size: 10px !important;
}

#ans_layout .dash-slider-tooltip {
  background-color: var(--leq-navy) !important;
  color: var(--leq-gold) !important;
  font-family: "Calibri", sans-serif;
  font-size: 11px;
  border-radius: 3px;
}

/* === LOADING SPINNER === */
#ans_layout .dash-spinner svg circle {
  stroke: var(--leq-navy) !important;
}

#ans_layout ._dash-loading-callback {
  color: var(--leq-navy) !important;
}

/* === PLOTLY GRAPHS === */
#ans_layout .js-plotly-plot {
  transition: opacity 0.15s ease-in-out;
}

/* === DASH DATA TABLE === */
#ans_layout .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table {
  font-family: "Calibri", sans-serif !important;
}

#ans_layout .dash-table-container .dash-header {
  background-color: var(--leq-navy) !important;
  color: var(--leq-gold) !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
}

#ans_layout .dash-table-container .previous-next-container {
  font-family: "Calibri", sans-serif;
  font-size: 11px;
  color: var(--leq-midgray);
}

#ans_layout .dash-table-container .dash-cell:hover {
  background-color: var(--leq-offwhite) !important;
}

/* === SCROLLBAR (Chrome/Edge) — scoped to ANS overflow containers === */
#ans_layout ::-webkit-scrollbar { width: 6px; height: 6px; }
#ans_layout ::-webkit-scrollbar-track { background: var(--leq-offwhite); }
#ans_layout ::-webkit-scrollbar-thumb { background: var(--leq-gold2); border-radius: 3px; }
#ans_layout ::-webkit-scrollbar-thumb:hover { background: var(--leq-navy); }

/* === TEXT SELECTION === */
#ans_layout ::selection {
  background: var(--leq-gold2);
  color: var(--leq-navy2);
}

/* ============================================================
   DF-TABLE — Demonstrações Financeiras
   ============================================================ */

#ans_layout .df-table {
  font-family: "Calibri", "Segoe UI", sans-serif;
  font-size: 12px;
  color: var(--leq-charcoal);
  margin-bottom: 0;
  border-collapse: collapse;
  width: 100%;
}

#ans_layout .df-table thead th {
  background: var(--leq-offwhite);
  color: var(--leq-navy);
  font-family: "Calibri", sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 8px 10px !important;
  border-bottom: 2px solid var(--leq-navy) !important;
  border-top: none !important;
  white-space: nowrap;
}

#ans_layout .df-table thead th.df-col-num { text-align: right; }
#ans_layout .df-table thead th.df-col-linha { text-align: left; }

#ans_layout .df-table tbody td {
  padding: 5px 10px !important;
  border-top: 1px solid var(--leq-lightgray) !important;
  vertical-align: middle;
  line-height: 1.35;
}

#ans_layout .df-col-linha { text-align: left; color: var(--leq-charcoal); }

#ans_layout .df-col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  white-space: nowrap;
  min-width: 76px;
}

#ans_layout .df-col-num.df-neg { color: var(--leq-red); }

#ans_layout .df-table tbody tr.df-row-header td {
  background: var(--leq-navy) !important;
  color: var(--leq-gold) !important;
  font-family: "Cambria", "Georgia", serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 6px 10px !important;
  border-top: none !important;
  border-bottom: none !important;
}

#ans_layout .df-table tbody tr.df-row-subtotal td {
  font-weight: 700;
  background: var(--leq-cream);
  border-top: 1.5px solid var(--leq-gold2) !important;
}

#ans_layout .df-table tbody tr.df-row-subtotal .df-col-linha { color: var(--leq-navy); }

#ans_layout .df-table tbody tr.df-row-highlight td {
  background: var(--leq-navy) !important;
  color: var(--leq-gold) !important;
  font-family: "Cambria", "Georgia", serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  border-top: 2px solid var(--leq-navy2) !important;
  border-bottom: 2px solid var(--leq-navy2) !important;
}

#ans_layout .df-table tbody tr.df-row-highlight .df-col-num.df-neg {
  color: #F5A5A0 !important;
}

#ans_layout .df-table tbody tr.df-row-indicator td {
  background: var(--leq-offwhite);
  border-top: 1px dashed var(--leq-gold2) !important;
  border-bottom: 1px dashed var(--leq-lightgray) !important;
  font-style: italic;
  font-size: 11.5px;
  color: var(--leq-midgray);
}

#ans_layout .df-table tbody tr.df-row-indicator .df-col-linha {
  padding-left: 22px !important;
  font-weight: 600;
  color: var(--leq-navy) !important;
}

#ans_layout .df-table tbody tr.df-row-indicator .df-col-ind {
  color: var(--leq-navy2);
  font-weight: 700;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

#ans_layout .df-table tbody tr.df-row-indicator .df-col-ind.df-neg {
  color: var(--leq-red) !important;
}

#ans_layout .df-table tbody tr.df-row-sub .df-col-linha {
  padding-left: 22px !important;
  color: var(--leq-midgray);
  font-size: 11.5px;
  font-style: italic;
}

#ans_layout .df-table.table-hover tbody tr.df-row:hover td,
#ans_layout .df-table.table-hover tbody tr.df-row-subtotal:hover td {
  background: var(--leq-offwhite) !important;
}

#ans_layout .df-table.table-striped tbody tr:nth-of-type(odd) > td {
  background: inherit !important;
}

#ans_layout .table-responsive > .df-table { min-width: max-content; }

#ans_layout .df-table tbody tr.df-row-subheader td {
  background: var(--leq-navy2) !important;
  color: var(--leq-gold2) !important;
  font-size: 10px !important;
  letter-spacing: 2.5px;
  padding: 5px 10px !important;
  border-top: 3px double var(--leq-gold2) !important;
  border-bottom: none !important;
}

#ans_layout .df-row-growth td {
  background: rgba(218, 234, 232, 0.45) !important;
  border-top: 1px dotted var(--leq-gold2) !important;
  border-bottom: 1px dotted var(--leq-gold2) !important;
  font-size: 11px;
}

#ans_layout .df-row-growth .df-col-linha {
  padding-left: 30px !important;
  font-weight: 500;
  font-style: italic;
  color: var(--leq-midgray) !important;
  text-transform: none;
}

#ans_layout .df-row-growth .df-col-ind {
  font-weight: 700;
  color: var(--leq-navy2) !important;
  font-variant-numeric: tabular-nums;
}

#ans_layout .df-row-growth .df-col-ind.df-neg { color: var(--leq-red) !important; }

#ans_layout .rent-label {
  display: inline-block;
  font-weight: 700;
  color: var(--leq-navy) !important;
  font-style: normal;
  margin-right: 8px;
}

#ans_layout .rent-formula {
  display: inline-block;
  font-size: 10.5px;
  color: var(--leq-midgray);
  font-style: italic;
  font-weight: 400;
}

#ans_layout .df-table tbody tr.df-row-spacer td {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  height: 14px !important;
  line-height: 0;
}

/* === ANS GAAP CARD === */
#ans_layout .ans-gaap-card {
  border: 1px solid var(--leq-lightgray) !important;
  border-left: 4px solid var(--leq-navy) !important;
  background: linear-gradient(90deg, var(--leq-cream) 0%, rgba(235, 244, 242, 0.3) 100%) !important;
  box-shadow: none !important;
}

#ans_layout .ans-gaap-card .card-body { padding: 10px 14px !important; }

#ans_layout .ans-gaap-badge {
  background-color: var(--leq-navy) !important;
  color: var(--leq-gold) !important;
  font-family: "Calibri", sans-serif !important;
  font-size: 9.5px !important;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 4px 9px !important;
  border-radius: 12px !important;
  vertical-align: middle;
}

#ans_layout .ans-gaap-title {
  font-family: "Cambria", "Georgia", serif;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--leq-navy);
  letter-spacing: 0.2px;
}

#ans_layout .ans-gaap-body {
  font-family: "Calibri", "Segoe UI", sans-serif;
  font-size: 12px;
  line-height: 1.55;
  color: var(--leq-charcoal);
  text-align: justify;
}

#ans_layout .ans-gaap-body strong { color: var(--leq-navy); font-weight: 700; }