/* ============================================================================
   MILHAS PLUS ANALYTICS - PREMIUM THEME
   Version: 2.0 Premium Edition
   Design System: Cyberpunk Glassmorphism with Advanced Animations
   ============================================================================ */

:root {
  /* Color Palette — Dark theme, accent verde vibrante #1fffb9 (tom que estávamos usando) */
  --primary: #1fffb9;
  --accent: #1fffb9;
  --cta-bg: rgba(31, 255, 185, 0.15);
  --cta-color: #e8f6ff;

  --shell-bg: radial-gradient(120% 120% at 100% 0%, rgba(31, 255, 185, 0.12) 0%, rgba(10, 20, 32, 0.95) 45%, rgba(6, 12, 20, 1) 100%);
  --card-bg: rgba(17, 27, 40, 0.9);
  --card-border: rgba(31, 255, 185, 0.08);
  --text-primary: #e8f6ff;
  --text-secondary: rgba(232, 246, 255, 0.65);
  --accent-soft: rgba(31, 255, 185, 0.12);
  --accent-glow: rgba(31, 255, 185, 0.3);
  --danger: #ff6b6b;
  --warning: #f2c94c;

  /* Premium Shadows — dark theme */
  --shadow-soft: 0 32px 80px rgba(0, 0, 0, 0.45);
  --shadow-premium: 0 20px 60px rgba(0, 0, 0, 0.5), 0 8px 16px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 40px rgba(31, 255, 185, 0.15);
  --shadow-lift: 0 24px 48px rgba(31, 255, 185, 0.18), 0 8px 16px rgba(0, 0, 0, 0.4);

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-elegant: 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
   GLOBAL STYLES & BASE
   ============================================================================ */

* {
  box-sizing: border-box;
}

/* ============================================================================
   GLOBAL INPUT SURFACE
   ============================================================================ */

body .form-control:not(.login-input):not(.onboarding-input):not(.admin-config-input):not(.admin-config-textarea):not(.extrato-edit-textarea),
body textarea.form-control:not(.admin-config-input):not(.admin-config-textarea):not(.extrato-edit-textarea),
body .dash-filter-dropdown .Select__control,
body .filter-control .Select__control,
body .Select__control {
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: #13212f !important;
  box-shadow: none !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

body .form-control:not(.login-input):not(.onboarding-input):not(.admin-config-input):not(.admin-config-textarea):not(.extrato-edit-textarea)::placeholder,
body textarea.form-control:not(.admin-config-input):not(.admin-config-textarea):not(.extrato-edit-textarea)::placeholder {
  color: rgba(19, 33, 47, 0.42) !important;
}

body .form-control:not(.login-input):not(.onboarding-input):not(.admin-config-input):not(.admin-config-textarea):not(.extrato-edit-textarea):hover,
body textarea.form-control:not(.admin-config-input):not(.admin-config-textarea):not(.extrato-edit-textarea):hover,
body .dash-filter-dropdown .Select__control:hover,
body .filter-control .Select__control:hover,
body .Select__control:hover {
  border-color: rgba(31, 255, 185, 0.58) !important;
  background: #ffffff !important;
}

body .form-control:not(.login-input):not(.onboarding-input):not(.admin-config-input):not(.admin-config-textarea):not(.extrato-edit-textarea):focus,
body textarea.form-control:not(.admin-config-input):not(.admin-config-textarea):not(.extrato-edit-textarea):focus,
body .dash-filter-dropdown .Select__control--is-focused,
body .filter-control .Select__control--is-focused,
body .Select__control--is-focused {
  border-color: var(--accent) !important;
  background: #ffffff !important;
  color: #13212f !important;
  box-shadow: 0 0 0 3px rgba(31, 255, 185, 0.18) !important;
  outline: none;
}

body .dash-filter-dropdown .Select__value-container,
body .filter-control .Select__value-container,
body .Select__value-container,
body .dash-filter-dropdown .Select__single-value,
body .filter-control .Select__single-value,
body .Select__single-value,
body .dash-filter-dropdown .Select__placeholder,
body .filter-control .Select__placeholder,
body .Select__placeholder,
body .dash-filter-dropdown .Select__input-container,
body .filter-control .Select__input-container,
body .Select__input-container {
  color: #13212f !important;
}

body .dash-filter-dropdown .Select__placeholder,
body .filter-control .Select__placeholder,
body .Select__placeholder {
  color: rgba(19, 33, 47, 0.48) !important;
}

body .dash-filter-dropdown .Select__single-value,
body .filter-control .Select__single-value,
body .Select__single-value {
  color: #13212f !important;
  font-weight: 500;
}

body .dash-filter-dropdown .Select__indicator,
body .filter-control .Select__indicator,
body .Select__indicator,
body .dash-filter-dropdown .Select__dropdown-indicator,
body .filter-control .Select__dropdown-indicator,
body .Select__dropdown-indicator,
body .dash-filter-dropdown .Select__clear-indicator,
body .filter-control .Select__clear-indicator,
body .Select__clear-indicator {
  color: rgba(19, 33, 47, 0.72) !important;
}

body .dash-filter-dropdown .Select__indicator svg,
body .filter-control .Select__indicator svg,
body .Select__indicator svg,
body .dash-filter-dropdown .Select__dropdown-indicator svg,
body .filter-control .Select__dropdown-indicator svg,
body .Select__dropdown-indicator svg,
body .dash-filter-dropdown .Select__clear-indicator svg,
body .filter-control .Select__clear-indicator svg,
body .Select__clear-indicator svg {
  fill: rgba(19, 33, 47, 0.72) !important;
}

body .dash-filter-dropdown .Select__menu,
body .filter-control .Select__menu,
body .Select__menu {
  background: #ffffff !important;
  border: 1px solid rgba(31, 255, 185, 0.14) !important;
  box-shadow: var(--shadow-premium);
}

body .dash-filter-dropdown .Select__option,
body .filter-control .Select__option,
body .Select__option {
  color: #13212f !important;
}

body .dash-filter-dropdown .Select__option--is-focused,
body .filter-control .Select__option--is-focused,
body .Select__option--is-focused {
  background: rgba(31, 255, 185, 0.12) !important;
}

body .dash-filter-dropdown .Select__option--is-selected,
body .filter-control .Select__option--is-selected,
body .Select__option--is-selected {
  background: rgba(31, 255, 185, 0.18) !important;
  color: #0f5a43 !important;
}

body .dash-filter-dropdown .Select-control,
body .filter-control .Select-control,
body .Select-control {
  min-height: 44px;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: #13212f !important;
  box-shadow: none !important;
}

body .dash-filter-dropdown .Select-placeholder,
body .filter-control .Select-placeholder,
body .Select-placeholder,
body .dash-filter-dropdown .Select--single > .Select-control .Select-value,
body .filter-control .Select--single > .Select-control .Select-value,
body .Select--single > .Select-control .Select-value,
body .dash-filter-dropdown .Select-value-label,
body .filter-control .Select-value-label,
body .Select-value-label,
body .dash-filter-dropdown .Select-input > input,
body .filter-control .Select-input > input,
body .Select-input > input {
  color: #13212f !important;
}

body .dash-filter-dropdown .Select-placeholder,
body .filter-control .Select-placeholder,
body .Select-placeholder {
  color: rgba(19, 33, 47, 0.48) !important;
}

body .dash-filter-dropdown .Select-arrow,
body .filter-control .Select-arrow,
body .Select-arrow {
  border-top-color: rgba(19, 33, 47, 0.72) !important;
}

body .dash-filter-dropdown .is-open > .Select-control .Select-arrow,
body .filter-control .is-open > .Select-control .Select-arrow,
body .Select.is-open > .Select-control .Select-arrow {
  border-bottom-color: rgba(19, 33, 47, 0.72) !important;
}

body .dash-filter-dropdown .Select-menu-outer,
body .filter-control .Select-menu-outer,
body .Select-menu-outer {
  background: #ffffff !important;
  border: 1px solid rgba(31, 255, 185, 0.14) !important;
  box-shadow: var(--shadow-premium);
}

body .dash-filter-dropdown .Select-option,
body .filter-control .Select-option,
body .Select-option {
  color: #13212f !important;
  background: #ffffff !important;
}

body .dash-filter-dropdown .Select-option.is-focused,
body .filter-control .Select-option.is-focused,
body .Select-option.is-focused {
  background: rgba(31, 255, 185, 0.12) !important;
}

body .dash-filter-dropdown .Select-option.is-selected,
body .filter-control .Select-option.is-selected,
body .Select-option.is-selected {
  background: rgba(31, 255, 185, 0.18) !important;
  color: #0f5a43 !important;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text-primary);
  background: var(--shell-bg);
  background-attachment: fixed;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.dashboard-shell {
  min-height: 100vh;
  padding-bottom: 2rem;
  animation: fadeIn 0.6s ease-out;
  max-width: 100%;
  overflow-x: hidden;
}

.dashboard-container {
  backdrop-filter: blur(24px);
  animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 100%;
}

/* ============================================================================
   ANIMATIONS
   ============================================================================ */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

@keyframes shimmer {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

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

.dashboard-header {
  padding: 0.5rem 0 0.75rem;
  animation: slideUp 0.6s ease-out;
}

.brand-wrapper {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  animation: slideUp 0.7s ease-out 0.1s backwards;
}

.brand-logo {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--accent-soft);
  padding: 0.75rem;
  box-shadow:
    inset 0 0 0 1px rgba(31, 255, 185, 0.2),
    0 10px 30px rgba(31, 255, 185, 0.1);
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
  animation: float 6s ease-in-out infinite;
}

.brand-logo:hover {
  transform: scale(1.05) rotate(2deg);
  box-shadow:
    inset 0 0 0 1px rgba(31, 255, 185, 0.4),
    0 15px 40px rgba(31, 255, 185, 0.2);
}

.brand-title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.brand-subtitle {
  margin: 0.35rem 0 0;
  color: var(--text-secondary);
  max-width: 36rem;
  line-height: 1.5;
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.header-info {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-end;
  animation: slideUp 0.7s ease-out 0.2s backwards;
}

.header-date-inline {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  padding: 0.5rem 1rem;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(31, 255, 185, 0.2), rgba(31, 255, 185, 0.05));
  box-shadow:
    0 12px 36px rgba(31, 255, 185, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(31, 255, 185, 0.24);
  backdrop-filter: blur(18px);
  letter-spacing: 0.03em;
  transition: all var(--transition-smooth);
}

.header-date-inline:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 44px rgba(31, 255, 185, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.header-target {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
  transition: all var(--transition-fast);
}

.header-target:hover {
  background: rgba(31, 255, 185, 0.2);
  transform: scale(1.05);
}

/* ============================================================================
   FILTERS CARD
   ============================================================================ */

.filters-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 24px;
  box-shadow: var(--shadow-premium);
  margin-bottom: 2.5rem;
  backdrop-filter: blur(30px);
  transition: all var(--transition-smooth);
  animation: slideUp 0.8s ease-out 0.3s backwards;
  position: relative;
  z-index: 100;  /* CRÍTICO: Garantir que filtros fiquem acima de cards e gráficos */
}

.filters-card:hover {
  box-shadow: var(--shadow-lift);
  border-color: rgba(31, 255, 185, 0.15);
}

.filters-card .card-body {
  padding: 1.25rem 1.5rem;
}

/* Fonte selector (MP / FLIP / ALL) — global filter above main filters panel */
.fonte-selector-wrapper {
  min-height: 0;
  margin-top: -0.25rem;
}

.fonte-selector-group .fonte-selector-btn {
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 0.4rem 0.9rem;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.fonte-selector-group .fonte-selector-btn:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.fonte-selector-group .fonte-selector-btn:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.fonte-selector-group .fonte-selector-btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}

.filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem 1.75rem;
}

.filter-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.filter-group {
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.4s ease-out;
}

/* Dash 4.0 dark theme — filter dropdowns (paridade com remoto) */
.filter-control {
  --Dash-Fill-Interactive-Strong: rgba(31, 255, 185, 0.18);
  --Dash-Fill-Interactive-Weak: rgba(255, 255, 255, 0.96);
  --Dash-Fill-Inverse-Strong: rgba(255, 255, 255, 0.96);
  --Dash-Fill-Disabled: rgba(255, 255, 255, 0.92);
  --Dash-Shading-Strong: rgba(31, 255, 185, 0.12);
  --Dash-Shading-Weak: rgba(31, 255, 185, 0.06);
  --Dash-Stroke-Strong: rgba(255, 255, 255, 0.72);
  --Dash-Text-Strong: #13212f;
  --Dash-Text-Weak: rgba(19, 33, 47, 0.48);
  --Dash-Text-Disabled: rgba(19, 33, 47, 0.4);
  --Dash-Spacing: 8px;
  border-radius: 12px;
}

.dash-filter-dropdown {
  --Dash-Fill-Interactive-Strong: rgba(31, 255, 185, 0.18);
  --Dash-Fill-Interactive-Weak: rgba(255, 255, 255, 0.96);
  --Dash-Fill-Inverse-Strong: rgba(255, 255, 255, 0.96);
  --Dash-Fill-Disabled: rgba(255, 255, 255, 0.92);
  --Dash-Shading-Strong: rgba(31, 255, 185, 0.12);
  --Dash-Shading-Weak: rgba(31, 255, 185, 0.06);
  --Dash-Stroke-Strong: rgba(255, 255, 255, 0.72);
  --Dash-Text-Strong: #13212f;
  --Dash-Text-Weak: rgba(19, 33, 47, 0.48);
  --Dash-Text-Disabled: rgba(19, 33, 47, 0.4);
}

.filter-control .Select__control {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 12px;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: none;
  transition: all var(--transition-fast);
}

.filter-control .Select__control:hover {
  border-color: rgba(31, 255, 185, 0.35);
  box-shadow: 0 4px 12px rgba(31, 255, 185, 0.1);
}

.filter-control .Select__control--is-focused {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31, 255, 185, 0.18);
}

.filter-control .Select__value-container {
  color: #13212f;
  padding: 0 12px;
}

.filter-control .Select__single-value,
.filter-control .Select__placeholder,
.filter-control .Select__multi-value__label {
  color: #13212f;
}

.filter-control .Select__indicator-separator {
  display: none;
}

.filter-control .Select__multi-value {
  background: var(--accent-soft);
  border-radius: 12px;
  transition: all var(--transition-fast);
}

.filter-control .Select__multi-value:hover {
  background: rgba(31, 255, 185, 0.25);
}

.filter-control .Select__multi-value__remove {
  color: var(--accent);
  transition: all var(--transition-fast);
}

.filter-control .Select__multi-value__remove:hover {
  background: rgba(31, 255, 185, 0.3);
  color: white;
}

.filter-control .Select__menu {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid rgba(31, 255, 185, 0.15);
  overflow: hidden;
  box-shadow: var(--shadow-premium);
  animation: slideUp 0.2s ease-out;
  z-index: 1000 !important;  /* CRÍTICO: Dropdown deve ficar acima de TUDO */
  position: relative;
}

.filter-control .Select__option {
  color: #13212f;
  transition: all var(--transition-fast);
}

.filter-control .Select__option--is-focused {
  background: rgba(31, 255, 185, 0.12);
}

.filter-control .Select__option--is-selected {
  background: rgba(31, 255, 185, 0.25);
  color: var(--accent);
  font-weight: 600;
}

/* Legacy react-select class names (still emitted by Dash Dropdown in some views) */
.filter-control .Select-control,
.filter-control.Select-control,
.dash-dropdown .Select-control,
.filter-control .dash-dropdown .Select-control,
.filter-control .Select-menu-outer {
  background: rgba(17, 27, 40, 0.7) !important;
  border-color: rgba(31, 255, 185, 0.15) !important;
  border-radius: 12px !important;
  color: var(--text-primary) !important;
}

.filter-control .Select-value-label,
.filter-control .Select-placeholder {
  color: var(--text-secondary) !important;
}

.filter-control .Select-option.is-focused {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}

.filter-control .Select-option.is-selected {
  background: rgba(31, 255, 185, 0.2) !important;
  color: var(--accent) !important;
}

/* Dash 4 dropdown internals (new class names).
   Dash applies className to .dash-dropdown (trigger), while the opened popover
   (.dash-dropdown-content) is rendered as a sibling under .dash-dropdown-wrapper. */
.dash-dropdown.filter-control,
.filter-control.dash-dropdown-wrapper .dash-dropdown,
.filter-control.dash-dropdown,
.filter-control .dash-dropdown,
.dash-dropdown {
  background: rgba(17, 27, 40, 0.78) !important;
  border: 1px solid rgba(31, 255, 185, 0.22) !important;
  border-radius: 12px !important;
  color: var(--text-primary) !important;
  min-height: 42px !important;
}

.dash-dropdown[data-state="open"],
.dash-dropdown:hover,
.filter-control.dash-dropdown[data-state="open"],
.filter-control.dash-dropdown:hover,
.filter-control .dash-dropdown[data-state="open"],
.filter-control .dash-dropdown:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

.dash-dropdown-value,
.dash-dropdown-value-item,
.dash-dropdown-value-item span,
.dash-dropdown-placeholder,
.filter-control .dash-dropdown-value,
.filter-control .dash-dropdown-value-item,
.filter-control .dash-dropdown-value-item span,
.filter-control .dash-dropdown-placeholder {
  color: var(--text-primary) !important;
}

.dash-dropdown-clear,
.dash-dropdown-trigger svg,
.dash-dropdown-trigger-icon,
.filter-control .dash-dropdown-clear,
.filter-control .dash-dropdown-trigger svg {
  color: var(--text-secondary) !important;
}

.dash-dropdown-content {
  --Dash-Fill-Interactive-Strong: var(--accent) !important;
  --Dash-Fill-Interactive-Weak: rgba(31, 255, 185, 0.15) !important;
  --Dash-Text-Strong: var(--text-primary) !important;
  --Dash-Text-Weak: var(--text-secondary) !important;
  background: #0a1220 !important;
  border: 1px solid rgba(31, 255, 185, 0.2) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-premium) !important;
  color: var(--text-primary) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.dash-dropdown-search-container {
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  background: #0a1220 !important;
  border: 1px solid rgba(31, 255, 185, 0.22) !important;
  border-bottom: 1px solid rgba(31, 255, 185, 0.16) !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  box-shadow: 0 10px 20px rgba(10, 18, 30, 0.85) !important;
}

.dash-dropdown-search-container:focus-within {
  border-color: var(--accent) !important;
  outline: 1px solid rgba(31, 255, 185, 0.35) !important;
  box-shadow: 0 0 0 2px rgba(31, 255, 185, 0.15) !important;
}

.dash-dropdown-search-icon {
  color: var(--accent) !important;
}

.dash-dropdown-search {
  background: transparent !important;
  color: var(--text-primary) !important;
  outline: none !important;
  border: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.dash-dropdown-search:focus,
.dash-dropdown-search:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

.dash-dropdown-search::placeholder {
  color: var(--text-secondary) !important;
  opacity: 0.7 !important;
}

.dash-dropdown-options {
  background: #0a1220 !important;
  padding-top: 4px !important;
  overflow-y: auto !important;
}

.dash-dropdown-option,
.dash-options-list-option {
  color: var(--text-primary) !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(31, 255, 185, 0.05) !important;
}

.dash-dropdown-option:hover,
.dash-options-list-option:hover,
.dash-dropdown-option[aria-selected="true"],
.dash-options-list-option[aria-selected="true"],
.dash-dropdown-option[data-state="checked"],
.dash-options-list-option[data-state="checked"] {
  background: rgba(31, 255, 185, 0.14) !important;
  color: var(--accent) !important;
}

.dash-dropdown-option .dash-options-list-option-text,
.dash-dropdown-option .dash-options-list-option-text span {
  color: inherit !important;
}

.dash-dropdown-action-button {
  color: var(--text-secondary) !important;
}

.dash-dropdown-action-button:hover,
.dash-dropdown-action-button:focus-visible {
  color: var(--accent) !important;
}

.dash-dropdown-actions {
  background: #0a1220 !important;
  border-top: 1px solid rgba(31, 255, 185, 0.12) !important;
  border-bottom: 1px solid rgba(31, 255, 185, 0.12) !important;
}

.dash-options-list-option-checkbox {
  accent-color: var(--accent) !important;
}

/* ============================================================================
   KPI CARDS - PREMIUM EDITION
   ============================================================================ */

.kpi-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 22px;
  box-shadow: var(--shadow-premium);
  backdrop-filter: blur(30px);
  position: relative;
  overflow: hidden;
  transition: all var(--transition-elegant);
  animation: slideUp 0.6s ease-out backwards;
  height: 100%;
}

.kpi-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(31, 255, 185, 0.08) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--transition-smooth);
  pointer-events: none;
}

.kpi-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--shadow-lift);
  border-color: rgba(31, 255, 185, 0.2);
}

.kpi-card:hover::before {
  opacity: 1;
}

.kpi-card:nth-child(1) { animation-delay: 0.1s; }
.kpi-card:nth-child(2) { animation-delay: 0.2s; }
.kpi-card:nth-child(3) { animation-delay: 0.3s; }
.kpi-card:nth-child(4) { animation-delay: 0.4s; }
.kpi-card:nth-child(5) { animation-delay: 0.5s; }

.kpi-label {
  display: block;
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 0.6rem;
  letter-spacing: 0.03em;
  font-weight: 500;
}

/* Label + info icon on the same line (Financeiro and other KPI cards with tooltip) */
.kpi-label-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.6rem;
}
.kpi-label-row .kpi-label {
  display: inline;
  margin-bottom: 0;
}

.kpi-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  transition: color var(--transition-smooth);
}

.kpi-card:hover .kpi-value {
  color: var(--accent);
}

.kpi-secondary-row {
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 1rem;
  border-top: 1px solid rgba(31, 255, 185, 0.08);
}

.kpi-secondary-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  font-weight: 600;
}

.kpi-secondary-value {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--accent);
}

.kpi-footnote {
  display: block;
  margin-top: 1rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  line-height: 1.4;
}

/* ============================================================================
   KPI TOOLTIPS
   ============================================================================ */

.tooltip-inner {
  background-color: rgba(17, 27, 40, 0.97);
  color: #e8f6ff;
  border: 1px solid rgba(31, 255, 185, 0.25);
  border-radius: 6px;
  font-size: 0.78rem;
  max-width: 260px;
  padding: 8px 12px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: left;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.tooltip .tooltip-arrow::before {
  border-top-color: rgba(17, 27, 40, 0.97);
}

/* Info icon (ℹ) — reusable across all pages */
.info-tooltip-icon {
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-left: 0.5rem;
  transition: color 0.2s ease;
}
.info-tooltip-icon:hover {
  color: var(--accent);
}

/* Botões de ação no header dos cards (detalhe, câmera, cópia) — mesmo estilo do ícone i */
.detail-btn {
  color: var(--text-secondary);
  transition: color 0.2s ease;
}
.detail-btn:hover {
  color: var(--accent);
}

/* Flex header with title + info icon */
.info-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}

/* ============================================================================
   GOAL CARDS - PREMIUM EDITION
   ============================================================================ */

.goal-card {
  background: var(--card-bg);
  border-radius: 26px;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-premium);
  backdrop-filter: blur(30px);
  position: relative;
  overflow: hidden;
  transition: all var(--transition-elegant);
  animation: slideUp 0.7s ease-out backwards;
}

.goal-card:nth-child(1) { animation-delay: 0.2s; }
.goal-card:nth-child(2) { animation-delay: 0.3s; }
.goal-card:nth-child(3) { animation-delay: 0.4s; }

.goal-card-column {
  display: flex;
}

.goal-card-column .goal-card {
  flex: 1;
}

.goal-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 0% 100%, rgba(31, 255, 185, 0.18) 0%, rgba(31, 255, 185, 0) 55%);
  pointer-events: none;
  opacity: 0.7;
  transition: opacity var(--transition-smooth);
}

.goal-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(31, 255, 185, 0.2);
}

.goal-card:hover::before {
  opacity: 1;
}

.goal-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.goal-card-header-meta {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.card-eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  font-weight: 600;
}

.card-date {
  font-size: 0.95rem;
  color: var(--accent);
  font-weight: 600;
}

.goal-card-percentage {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
}

.goal-card-value {
  margin: 1.3rem 0 0.4rem;
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.goal-card-value-row {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin: 1.3rem 0 0.4rem;
}

.goal-card-value-row .goal-card-value {
  margin: 0;
}

.goal-card-subtitle {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.goal-progress {
  height: 8px;
  border-radius: 999px;
  margin: 1.2rem 0;
  background-color: var(--accent-soft);
  overflow: hidden;
  position: relative;
}

.goal-progress .progress-bar {
  border-radius: 999px;
  transition: all var(--transition-elegant);
  position: relative;
}

.goal-progress .progress-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* Premium gradient colors for progress bars */
.goal-progress .bg-danger {
  background: linear-gradient(90deg, #dc3545 0%, #e74c3c 100%) !important;
}

.goal-progress .bg-orange {
  background: linear-gradient(90deg, #fd7e14 0%, #ff8c42 100%) !important;
}

.goal-progress .bg-warning {
  background: linear-gradient(90deg, #ffc107 0%, #f2c94c 100%) !important;
}

.goal-progress .bg-info {
  background: linear-gradient(90deg, #17a2b8 0%, #1fffb9 100%) !important;
}

.goal-progress .bg-success {
  background: linear-gradient(90deg, #28a745 0%, #1fffb9 100%) !important;
}

.goal-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.75rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

.goal-meta {
  font-weight: 500;
  transition: color var(--transition-fast);
}

.goal-meta:hover {
  color: var(--text-primary);
}

.goal-card-header-label {
  display: flex;
  align-items: center;
  gap: 0;
}

.goal-meta-row {
  display: flex;
  align-items: center;
  gap: 0;
}

.goal-delta {
  font-weight: 700;
  color: var(--accent);
  text-shadow: 0 0 8px rgba(31, 255, 185, 0.3);
}

.goal-delta-negative {
  font-weight: 700;
  color: var(--danger);
  text-shadow: 0 0 8px rgba(255, 99, 99, 0.3);
}

/* ============================================================================
   DASHBOARD PAGE — equal-height chart row
   ============================================================================ */

.page-dashboard .row.align-items-stretch > [class*="col"] > *,
.page-dashboard .row.align-items-stretch > [class*="col"] > * > .chart-card {
  height: 100%;
}

/* ============================================================================
   CHART CARDS
   ============================================================================ */

.chart-card {
  background: var(--card-bg);
  border-radius: 26px;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-premium);
  backdrop-filter: blur(30px);
  padding: 0.75rem;
  transition: all var(--transition-smooth);
  position: relative;
  z-index: 1;
  animation: fadeIn 0.7s ease-out backwards;
}

.chart-card:hover {
  box-shadow: var(--shadow-lift);
  border-color: rgba(31, 255, 185, 0.15);
}

/* ============================================================================
   PAGINATION CONTROLS (Ranking)
   ============================================================================ */

.ranking-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  padding: 0.5rem;
}

.ranking-pagination {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(17, 27, 40, 0.6);
  padding: 0.5rem 1.25rem;
  border-radius: 16px;
  border: 1px solid var(--card-border);
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transition: all var(--transition-smooth);
}

.ranking-pagination:hover {
  background: rgba(17, 27, 40, 0.8);
  border-color: rgba(31, 255, 185, 0.15);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 24px rgba(31, 255, 185, 0.08);
}

.ranking-nav-btn {
  min-width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 600;
  border: 1px solid var(--accent-glow);
  background: rgba(31, 255, 185, 0.08);
  color: var(--accent);
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.ranking-nav-btn:hover:not(:disabled) {
  background: rgba(31, 255, 185, 0.18);
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(31, 255, 185, 0.25), 0 4px 12px rgba(0, 0, 0, 0.3);
  transform: scale(1.05);
  color: #fff;
}

.ranking-nav-btn:active:not(:disabled) {
  transform: scale(0.95);
  box-shadow: 0 0 12px rgba(31, 255, 185, 0.15), 0 2px 6px rgba(0, 0, 0, 0.25);
}

.ranking-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  background: rgba(232, 246, 255, 0.05);
  border-color: rgba(232, 246, 255, 0.1);
  color: rgba(232, 246, 255, 0.3);
}

.ranking-page-info {
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 500;
  font-family: "Inter", sans-serif;
  letter-spacing: 0.3px;
  padding: 0 0.75rem;
  white-space: nowrap;
  user-select: none;
}

.page-ranking {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ranking-toolbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 132px;
  padding: 1.25rem 1.25rem;
  border: 1px solid rgba(31, 255, 185, 0.18);
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(31, 255, 185, 0.14), transparent 30%),
    radial-gradient(circle at top right, rgba(255, 196, 77, 0.1), transparent 28%),
    linear-gradient(135deg, rgba(7, 18, 24, 0.94), rgba(10, 25, 32, 0.9));
  box-shadow: 0 22px 40px rgba(4, 12, 17, 0.24);
}

.ranking-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.45rem;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 0 220px 0 0;
}

.ranking-hero-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0.12rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.72rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ranking-hero-subtitle {
  max-width: none;
  font-size: 1.34rem;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  white-space: nowrap;
}

.ranking-filter-shell {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  min-height: 62px;
  min-width: 188px;
  padding: 0.72rem 0.78rem;
  border-radius: 18px;
  border: 1px solid rgba(31, 255, 185, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.03);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 12px 24px rgba(3, 10, 14, 0.14);
}

.ranking-filter-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-secondary);
  font-weight: 700;
}

.page-ranking .ranking-top-n-dropdown .Select-control,
.page-ranking .ranking-top-n-dropdown .Select__control {
  min-height: 48px;
  border-radius: 16px;
  border: 1px solid rgba(31, 255, 185, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)),
    rgba(8, 20, 27, 0.8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 18px rgba(2, 8, 12, 0.18);
}

.page-ranking .ranking-top-n-dropdown {
  min-width: 168px;
}

.page-ranking .ranking-top-n-dropdown .Select-control:hover,
.page-ranking .ranking-top-n-dropdown .Select__control:hover {
  border-color: rgba(31, 255, 185, 0.32);
}

.page-ranking .ranking-top-n-dropdown.is-focused .Select-control,
.page-ranking .ranking-top-n-dropdown .Select__control--is-focused {
  border-color: rgba(31, 255, 185, 0.42) !important;
  box-shadow:
    0 0 0 3px rgba(31, 255, 185, 0.1),
    0 12px 24px rgba(2, 8, 12, 0.2);
}

.page-ranking .ranking-top-n-dropdown .Select-value,
.page-ranking .ranking-top-n-dropdown .Select-value-label,
.page-ranking .ranking-top-n-dropdown .Select__value-container {
  padding-left: 0.15rem;
}

.page-ranking .ranking-top-n-dropdown .Select-input,
.page-ranking .ranking-top-n-dropdown .Select__input-container {
  color: var(--text-primary);
}

.page-ranking .ranking-top-n-dropdown .Select-placeholder,
.page-ranking .ranking-top-n-dropdown .Select-value-label,
.page-ranking .ranking-top-n-dropdown .Select__single-value {
  color: var(--text-primary) !important;
  font-weight: 700;
  font-size: 0.95rem;
}

.page-ranking .ranking-top-n-dropdown .Select-arrow,
.page-ranking .ranking-top-n-dropdown .Select__indicator {
  color: var(--accent);
}

.page-ranking .ranking-top-n-dropdown .Select-menu-outer,
.page-ranking .ranking-top-n-dropdown .Select-menu,
.page-ranking .ranking-top-n-dropdown .Select__menu {
  margin-top: 0.4rem;
  border: 1px solid rgba(31, 255, 185, 0.16);
  border-radius: 16px;
  background: rgba(8, 20, 27, 0.96);
  box-shadow: 0 18px 36px rgba(3, 10, 14, 0.28);
  overflow: hidden;
}

.page-ranking .ranking-top-n-dropdown .Select-option,
.page-ranking .ranking-top-n-dropdown .Select__option {
  padding: 0.72rem 0.85rem;
  color: var(--text-primary);
  font-weight: 600;
  background: transparent;
}

.page-ranking .ranking-top-n-dropdown .Select-option.is-focused,
.page-ranking .ranking-top-n-dropdown .Select-option:hover,
.page-ranking .ranking-top-n-dropdown .Select__option--is-focused {
  background: rgba(31, 255, 185, 0.12);
  color: var(--text-primary);
}

.page-ranking .ranking-top-n-dropdown .Select-option.is-selected,
.page-ranking .ranking-top-n-dropdown .Select__option--is-selected {
  background: rgba(31, 255, 185, 0.18);
  color: var(--accent);
}

@media (max-width: 991.98px) {
  .ranking-toolbar {
    min-height: auto;
    padding: 1.05rem;
  }

  .ranking-hero-copy {
    padding-right: 0;
  }

  .ranking-filter-shell {
    position: static;
    transform: none;
    margin: 0 auto;
  }

  .ranking-hero-subtitle {
    white-space: normal;
  }
}

.ranking-main-shell {
  min-height: 160px;
}

.ranking-tab-root {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ranking-page-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.9rem;
  flex-wrap: wrap;
  padding-bottom: 0.25rem;
}

.ranking-page-title {
  color: var(--text-primary);
  font-weight: 800;
}

.ranking-page-chip-group {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.ranking-page-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(31, 255, 185, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ranking-block {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1rem 1.05rem 1.1rem;
  border-radius: 22px;
  border: 1px solid rgba(31, 255, 185, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.012)),
    rgba(255, 255, 255, 0.02);
  box-shadow: 0 18px 36px rgba(6, 19, 27, 0.16);
}

.ranking-block--previous {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(31, 255, 185, 0.025)),
    rgba(255, 255, 255, 0.018);
}

.ranking-block-kicker {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.ranking-block-subtitle {
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.ranking-period-grid {
  margin-top: 0.1rem;
}

.ranking-period-card-shell {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  height: 100%;
}

.ranking-section-card-title {
  color: var(--text-primary);
  font-weight: 700;
}

.page-ranking .perf-card {
  height: 100%;
  border: 1px solid rgba(31, 255, 185, 0.12);
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(31, 255, 185, 0.08), transparent 30%),
    radial-gradient(circle at top left, rgba(255, 196, 77, 0.07), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015));
  box-shadow: 0 18px 40px rgba(6, 19, 27, 0.22);
  overflow: hidden;
}

.page-ranking .perf-card .card-body {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1rem 1rem 1.05rem;
}

.page-ranking .perf-card h6 {
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 700;
}

.page-ranking .perf-rank-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding-bottom: 0.25rem;
}

.page-ranking .perf-rank-kicker {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 196, 77, 0.92);
}

.page-ranking .perf-rank-stack {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.page-ranking .perf-rank-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 0.8rem 0.9rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.page-ranking .perf-rank-row:hover {
  transform: translateY(-1px);
  border-color: rgba(31, 255, 185, 0.2);
}

.page-ranking .perf-rank-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.page-ranking .perf-rank-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.32rem;
  min-width: 0;
}

.page-ranking .perf-rank-pos {
  min-width: 2.35rem;
  min-height: 2.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-weight: 800;
}

.page-ranking .perf-rank-name {
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}

.page-ranking .perf-rank-company {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 7px;
  border: 1px solid rgba(31, 255, 185, 0.16);
  background: rgba(31, 255, 185, 0.09);
  overflow: visible;
}

.page-ranking .perf-rank-companies {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
}

.page-ranking .perf-rank-company-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.26rem;
  padding: 0.08rem 0.32rem 0.08rem 0.08rem;
  border-radius: 999px;
  border: 1px solid rgba(31, 255, 185, 0.14);
  background: rgba(31, 255, 185, 0.06);
}

.page-ranking .perf-rank-company-icon {
  font-size: 0.68rem;
  line-height: 1;
}

.page-ranking .perf-rank-company-logo {
  width: 15px;
  height: 15px;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
  padding: 0;
  display: block;
  flex-shrink: 0;
}

.page-ranking .perf-rank-company-count {
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
  min-width: 0.95rem;
  text-align: right;
}

.page-ranking .perf-rank-company-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-ranking .perf-rank-count {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-primary);
}

.page-ranking .perf-rank-row--gold {
  border-color: rgba(255, 196, 77, 0.24);
  background: linear-gradient(135deg, rgba(255, 196, 77, 0.14), rgba(255, 255, 255, 0.04));
  box-shadow: 0 12px 24px rgba(255, 196, 77, 0.12);
}

.page-ranking .perf-rank-row--gold .perf-rank-pos {
  background: rgba(255, 196, 77, 0.16);
  border-color: rgba(255, 196, 77, 0.3);
  color: #ffd67b;
}

.page-ranking .perf-rank-row--silver {
  border-color: rgba(191, 208, 224, 0.22);
  background: linear-gradient(135deg, rgba(191, 208, 224, 0.1), rgba(255, 255, 255, 0.035));
}

.page-ranking .perf-rank-row--silver .perf-rank-pos {
  background: rgba(191, 208, 224, 0.12);
  border-color: rgba(191, 208, 224, 0.24);
  color: #d9e7f5;
}

.page-ranking .perf-rank-row--bronze {
  border-color: rgba(201, 138, 86, 0.22);
  background: linear-gradient(135deg, rgba(201, 138, 86, 0.11), rgba(255, 255, 255, 0.03));
}

.page-ranking .perf-rank-row--bronze .perf-rank-pos {
  background: rgba(201, 138, 86, 0.13);
  border-color: rgba(201, 138, 86, 0.26);
  color: #f0bf92;
}

.page-ranking .perf-rank-me {
  border-color: rgba(31, 255, 185, 0.22);
  background: rgba(31, 255, 185, 0.08);
  box-shadow: 0 0 0 1px rgba(31, 255, 185, 0.06) inset;
}

.page-ranking .perf-ranking-empty {
  padding: 1rem 0.8rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-secondary);
  text-align: center;
}

.ranking-company-leader {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  min-height: 30px;
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 196, 77, 0.14);
  background: rgba(255, 196, 77, 0.08);
  color: #f3d488;
  font-size: 0.76rem;
  font-weight: 600;
}

/* ============================================================================
   ALERTS & EMPTY STATES
   ============================================================================ */

.empty-alert {
  background: rgba(31, 255, 185, 0.08);
  border: 1px solid rgba(31, 255, 185, 0.18);
  color: var(--text-primary);
  border-radius: 18px;
  text-align: center;
  padding: 2rem;
  animation: pulse 2s ease-in-out infinite;
}

/* ============================================================================
   GRID & LAYOUT
   ============================================================================ */

.goal-grid {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.row.mb-4 {
  margin-bottom: 2.5rem !important;
}

/* Prevent Bootstrap .row negative margins from causing horizontal overflow */
.row {
  margin-right: 0;
  margin-left: 0;
}

.row > * {
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}

/* ============================================================================
   LOADING STATES
   ============================================================================ */

.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(31, 255, 185, 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Global first-load (Dash) loader: keep same airplane language used in app loaders. */
._dash-loading {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    ellipse at 30% 50%,
    rgba(31, 255, 185, 0.08) 0%,
    rgba(10, 20, 32, 0.92) 72%
  );
  color: transparent;
  font-size: 0;
  z-index: 10000;
}

._dash-loading::after {
  content: "✈  Carregando...";
  color: var(--text-primary);
  font-size: 1rem;
  letter-spacing: 0.02em;
  animation: detail-spin 1.5s ease-in-out infinite;
}

.skeleton {
  background: linear-gradient(
    90deg,
    rgba(31, 255, 185, 0.05) 0%,
    rgba(31, 255, 185, 0.15) 50%,
    rgba(31, 255, 185, 0.05) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

/* ============================================================================
   SCROLLBAR CUSTOMIZATION
   ============================================================================ */

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: rgba(17, 27, 40, 0.5);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: rgba(31, 255, 185, 0.3);
  border-radius: 10px;
  border: 2px solid rgba(17, 27, 40, 0.5);
  transition: background var(--transition-fast);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(31, 255, 185, 0.5);
}

/* ============================================================================
   FINANCIAL SECTION
   ============================================================================ */

.financial-section {
  margin-top: 2.5rem;
  animation: fadeIn 0.8s ease-out;
  position: relative;
  z-index: 0;
}

/* Página /financeiro: sem margem em cima para não haver linha entre filtros e Extrato. */
.page-financeiro .financial-section {
  margin-top: 0;
}

.financial-section-divider {
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(31, 255, 185, 0.3) 50%,
    transparent 100%
  );
  margin: 3rem 0 2rem;
}

/* Ordem visual: Extrato em cima, gráficos (ROI por Companhia + Rentabilidade por Responsável) embaixo.
   .financial-section-stack: Extrato (1º no DOM), Gráficos (2º no DOM).
   order: 1 = Extrato em cima, order: 2 = gráficos embaixo. */
.financial-section-stack {
  display: flex;
  flex-direction: column;
  isolation: isolate;
}
.financial-section-stack-extrato {
  order: 1;
  position: relative;
  z-index: 0;
}
.financial-section-stack-extrato .financial-section-header {
  animation: none;
  position: relative;
  z-index: 0;
}
.financial-section-stack-charts {
  order: 2;
  position: relative;
  z-index: 0;
}

/* Fora do stack: row sozinha (sem Extrato); z-index/position para ficar acima de conteúdo abaixo. */
.financial-charts-row {
  position: relative;
  z-index: 1;
}

/* Financeiro: ROI + Rentabilidade — layout estável ao entrar/sair da aba (evita CLS e sobreposição).
   - Colunas com altura igual (align-items-stretch) e min-height reservado.
   - Sem animação nos cards para evitar reflow ao exibir a página.
   - Gráficos mantêm altura definida pelo Plotly (não usar height:auto em media queries). */
.financial-chart-col {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.financial-chart-col .chart-card.financial-chart-card {
  flex: 1;
  min-height: 400px;
  animation: none;
  contain: layout;
}
.financial-chart-col .chart-card.financial-chart-card .card-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.financial-chart-col .chart-card.financial-chart-card .dash-graph {
  flex: 1;
  min-height: 320px;
}
/* Ordem visual definida por flex order (extrato 1, charts 2); z-index 0 em ambos. */

.financial-section-header {
  text-align: center;
  margin-bottom: 2rem;
  animation: fadeIn 0.6s ease-out;
}

.financial-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
}

.financial-section-subtitle {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin: 0;
}

/* Extrato da Operação — position: relative preserva containing block e alinhamento dos cards.
   Sem z-index: ordem de pintura vem do wrapper .financial-section-stack (overlay fix independente). */
/* Overlay fix: z-index 0 para não cobrir gráficos (wrapper .financial-section-stack-charts tem z-index: 1 !important). */
.extrato-da-operacao {
  position: relative;
  z-index: 0 !important;
}
.extrato-da-operacao .extrato-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  padding-bottom: 0.35rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.extrato-da-operacao .extrato-row:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.extrato-da-operacao .extrato-row--separator {
  margin-top: 0.4rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
/* Remove border-bottom do row imediatamente antes do separator para evitar linha dupla */
.extrato-da-operacao .extrato-row:has(+ .extrato-row--separator) {
  border-bottom: none;
}
.extrato-da-operacao .extrato-label {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
}
.extrato-da-operacao .extrato-value-wrap {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
}
.extrato-da-operacao .extrato-value {
  color: var(--text-primary);
  font-weight: 500;
}

/* Extrato: cards com mesma altura por linha (como antes do wrapper por target_id).
   O wrapper html.Div(id=target_id) existe só para block print/copy; não deve alterar layout. */
.extrato-da-operacao .extrato-col {
  display: flex;
  align-items: stretch;
}
.extrato-da-operacao .extrato-col > div {
  height: 100%;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.extrato-da-operacao .extrato-col .extrato-period-card {
  flex: 1;
  min-height: 380px;
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.extrato-period-card .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.extrato-period-card .extrato-list {
  flex: 1;
}
.extrato-da-operacao .extrato-col .chart-card {
  width: 100%;
}

/* Ambas as linhas do extrato: mesma altura entre cards (Bootstrap .row pode não usar stretch por padrão) */
.extrato-da-operacao .extrato-row-1,
.extrato-da-operacao .extrato-row-2 {
  align-items: stretch !important;
}

/* Extrato card header: title + info icon left, reference date (green) right */
.extrato-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1rem;
}
/* Evitar quebra da data em duas linhas (ex.: 02/03 - 08/03/2026) — fix mínimo, sem alterar layout do título/ícones */
.extrato-card-header .card-date {
  white-space: nowrap;
}
.extrato-card-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: nowrap;
}
.extrato-period-card .extrato-card-title {
  margin-bottom: 0;
  font-weight: 600;
  white-space: nowrap;
}

/* Risk Cards */
.risk-card {
  background: var(--card-bg);
  border-radius: 22px;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-premium);
  backdrop-filter: blur(30px);
  position: relative;
  overflow: hidden;
  transition: all var(--transition-elegant);
  animation: slideUp 0.7s ease-out backwards;
}

.risk-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

.risk-card--danger {
  border-color: rgba(255, 107, 107, 0.2);
}

.risk-card--danger::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at top left,
    rgba(255, 107, 107, 0.1) 0%,
    transparent 60%
  );
  pointer-events: none;
}

.risk-card--warning {
  border-color: rgba(242, 201, 76, 0.2);
}

.risk-card--warning::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at top left,
    rgba(242, 201, 76, 0.1) 0%,
    transparent 60%
  );
  pointer-events: none;
}

.risk-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.75rem;
}

.risk-card-count {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.risk-card-value {
  font-size: 2rem;
  font-weight: 700;
  margin: 0.5rem 0;
  line-height: 1.2;
}

.risk-card-value--danger {
  color: var(--danger);
  text-shadow: 0 0 12px rgba(255, 107, 107, 0.3);
}

.risk-card-value--warning {
  color: var(--warning);
  text-shadow: 0 0 12px rgba(242, 201, 76, 0.3);
}

.risk-card-description {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin: 0;
}

.financial-risk-row {
  margin-top: 1.5rem;
}

/* ============================================================================
   COMPARISON CARDS (Yesterday, Last Week, Last Month)
   ============================================================================ */

.comparison-card {
  background: var(--card-bg);
  border-radius: 22px;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-premium);
  backdrop-filter: blur(30px);
  transition: all var(--transition-elegant);
  animation: slideUp 0.6s ease-out backwards;
}

.comparison-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(31, 255, 185, 0.12);
}

.comparison-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.comparison-card .card-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--accent);
}

.comparison-card-date {
  font-size: 0.95rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.comparison-card-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.comparison-card-metrics {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.comparison-card-metric {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* ============================================================================
   CLIENT SEGMENTATION
   ============================================================================ */

.client-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.client-stat {
  padding: 0.5rem 0;
}

.client-stat-value {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 0.25rem;
}

.client-stat--new {
  color: #4dabf7;
}

.client-stat--returning {
  color: var(--accent);
}

.client-stat-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary);
}

.client-progress {
  height: 12px;
  border-radius: 6px;
  background: var(--accent-soft);
}

.client-top-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.client-top-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.client-top-item {
  font-size: 0.8rem;
  color: var(--text-secondary);
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--card-border);
}

.client-top-item:last-child {
  border-bottom: none;
}

/* ============================================================================
   SIDEBAR NAVIGATION — tema escuro, accent #1fffb9
   ============================================================================ */

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 240px;
  height: 100vh;
  background: rgba(17, 27, 40, 0.97);
  border-right: 1px solid rgba(31, 255, 185, 0.12);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 1040;
  display: flex;
  flex-direction: column;
  padding: 0;
  box-shadow: var(--shadow-soft);
  animation: fadeIn 0.5s ease-out;
  overflow: visible;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem 1.25rem 1.25rem;
  border-bottom: 1px solid var(--card-border);
  text-decoration: none;
}

.sidebar-brand img {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 0 8px var(--accent-glow));
}

.sidebar-brand-text {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.sidebar-brand-sub {
  font-size: 0.7rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sidebar-nav {
  flex: 1;
  padding: 1rem 0;
  overflow-y: auto;
}

.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  margin: 0.125rem 0.5rem;
  border-radius: 8px;
  border-left: 3px solid transparent;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--transition-smooth);
  background: transparent;
}

.sidebar-nav .nav-link:hover {
  color: var(--accent);
  background: var(--accent-soft);
  border-left-color: var(--accent);
}

.sidebar-nav .nav-link.active {
  color: var(--accent);
  background: var(--accent-soft);
  border-left-color: var(--accent);
  font-weight: 600;
  box-shadow: 0 0 16px var(--accent-glow);
}

.sidebar-nav .nav-icon {
  font-size: 1.1rem;
  width: 1.5rem;
  text-align: center;
  flex-shrink: 0;
}

.sidebar-section-label {
  padding: 1.25rem 1.25rem 0.5rem;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.sidebar-footer {
  padding: 1rem 1rem 1.15rem;
  border-top: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.8rem;
  overflow: visible;
}

.sidebar-user-name {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.sidebar-user-badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  align-self: flex-start;
  padding: 0.28rem 0.55rem;
  background: linear-gradient(135deg, rgba(184, 77, 255, 0.9), rgba(132, 72, 255, 0.85)) !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 22px rgba(132, 72, 255, 0.28);
}

.sidebar-logout-link {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s;
}

.sidebar-logout-link:hover {
  color: #ff6b6b;
  text-decoration: none;
}

.logout-shell {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: radial-gradient(
    ellipse at 30% 50%,
    rgba(31, 255, 185, 0.05) 0%,
    transparent 60%
  ),
  var(--body-bg, #0a1420);
}

.logout-card {
  width: min(100%, 420px);
  padding: 2rem;
  border-radius: 20px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-premium);
  text-align: center;
}

.logout-title {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.logout-subtitle {
  margin: 0 0 1.25rem;
  color: var(--text-secondary);
  font-size: 0.92rem;
}

.sidebar-version {
  font-size: 0.68rem;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.8rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(31, 255, 185, 0.08);
  letter-spacing: 0.03em;
}

.sidebar-version i {
  color: var(--accent);
  font-size: 0.72rem;
}

.sidebar-version-separator {
  opacity: 0.55;
}

/* Main content offset */
.main-content {
  margin-left: 240px;
  transition: margin-left var(--transition-smooth);
  max-width: 100%;
  overflow-x: hidden;
}

/* Mobile header (hamburger) */
.mobile-header {
  display: none;
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--card-bg);
  border-bottom: 1px solid var(--card-border);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: 0.75rem 1rem;
  align-items: center;
  gap: 0.75rem;
}

.mobile-header-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

.mobile-header-brand img {
  width: 32px;
  height: 32px;
}

.mobile-header-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
}

.sidebar-toggle-btn {
  background: transparent;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  color: var(--text-primary);
  padding: 0.5rem 0.625rem;
  font-size: 1.25rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  line-height: 1;
}

.sidebar-toggle-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* Fix: Bootstrap offcanvas/modal backdrop blocks clicks even when closed */
.offcanvas-backdrop:not(.show),
.modal-backdrop:not(.show) {
  pointer-events: none;
}

/* Offcanvas overrides for mobile sidebar */
.sidebar-offcanvas {
  --bs-offcanvas-width: 260px;
  max-width: 82vw;
}

.sidebar-offcanvas .offcanvas-body {
  background: rgba(17, 27, 40, 0.98);
  padding: 0;
  display: flex;
  flex-direction: column;
}

.sidebar-offcanvas .offcanvas-header {
  background: rgba(17, 27, 40, 0.98);
  border-bottom: 1px solid rgba(31, 255, 185, 0.12);
}

.sidebar-offcanvas .btn-close {
  filter: invert(1);
}

/* Footer mobile: padding lateral para não colar na borda */
.sidebar-mobile-footer {
  padding: 0.75rem 1.25rem 1rem;
  border-top: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: auto;
}

/* ============================================================================
   SIDEBAR COLLAPSED STATE
   ============================================================================ */

.sidebar {
  transition: width 200ms ease-in-out;
  will-change: width;
}

.sidebar.collapsed {
  width: 60px;
}

.sidebar.collapsed .sidebar-brand-text,
.sidebar.collapsed .sidebar-brand-sub,
.sidebar.collapsed .sidebar-section-label,
.sidebar.collapsed .sidebar-user-text,
.sidebar.collapsed .sidebar-version {
  display: none;
}

.sidebar.collapsed .nav-link span:not(.nav-icon) {
  display: none;
}

.sidebar.collapsed .sidebar-brand {
  justify-content: center;
  padding: 1.5rem 0.5rem 1.25rem;
}

.sidebar.collapsed .sidebar-nav .nav-link {
  justify-content: center;
  padding: 0.75rem 0;
  margin: 0.125rem 0.25rem;
  border-left: none;
}

.sidebar.collapsed .sidebar-nav .nav-link:hover {
  border-left: none;
}

.sidebar.collapsed .sidebar-nav .nav-link.active {
  border-left: none;
}

.sidebar.collapsed .sidebar-nav .nav-link.active .nav-icon {
  color: var(--accent);
}

.sidebar.collapsed .sidebar-footer {
  padding: 0.75rem 0.5rem;
}

/* Main content responsive via #app-shell class */
#app-shell.sidebar-collapsed .main-content {
  margin-left: 60px;
}

/* ============================================================================
   SIDEBAR TOGGLE BUTTON (DESKTOP)
   ============================================================================ */

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--card-border);
  padding-right: 0.5rem;
}

.sidebar-header .sidebar-brand {
  border-bottom: none;
  flex: 1;
  min-width: 0;
}

.sidebar .sidebar-toggle-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  border-radius: 6px;
  flex-shrink: 0;
}

.sidebar.collapsed .sidebar-header {
  justify-content: center;
  padding-right: 0;
  padding: 1rem 0.25rem;
}

.sidebar.collapsed .sidebar-header .sidebar-brand {
  display: none;
}

.sidebar.collapsed .sidebar-toggle-btn {
  width: 32px;
  height: 32px;
  font-size: 1rem;
}

/* ============================================================================
   SIDEBAR AVATAR & USER FOOTER
   ============================================================================ */

.sidebar-avatar {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(18, 102, 78, 0.9), rgba(12, 71, 55, 0.95));
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  border: 1px solid rgba(31, 255, 185, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 28px rgba(0, 0, 0, 0.28);
  transition:
    transform var(--transition-fast),
    background var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}

.sidebar-avatar:hover {
  background: linear-gradient(135deg, rgba(21, 118, 90, 0.95), rgba(13, 82, 63, 0.98));
  transform: translateY(-1px);
}

.sidebar-user-footer {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  cursor: pointer;
  padding: 0.85rem 0.9rem;
  border-radius: 20px;
  background:
    radial-gradient(circle at top left, rgba(31, 255, 185, 0.08), transparent 45%),
    rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(31, 255, 185, 0.12);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
  position: relative;
  overflow: visible;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.sidebar-user-footer-toggle {
  display: block !important;
  width: 100%;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.sidebar-footer-dropdown {
  width: 100%;
}

.sidebar-footer-dropdown > .dropdown-toggle {
  display: block !important;
  width: 100%;
  text-align: left;
}

.sidebar-user-footer-toggle::after {
  display: none !important;
}

.sidebar-user-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.sidebar-user-eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(232, 246, 255, 0.46);
}

.sidebar-user-text .sidebar-user-name {
  margin-bottom: 0;
}

.sidebar-user-text .sidebar-user-email {
  font-size: 0.73rem;
  color: rgba(232, 246, 255, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.sidebar-footer-content {
  width: 100%;
  position: relative;
  overflow: visible;
}

.sidebar-user-toggle-icon {
  color: rgba(232, 246, 255, 0.5);
  font-size: 0.8rem;
  flex: 0 0 auto;
}

.sidebar.collapsed .sidebar-user-footer {
  justify-content: center;
  padding: 0.55rem;
}

/* User footer dropdown */
.sidebar-footer-dropdown .dropdown-menu {
  background: rgba(17, 27, 40, 0.98);
  border: 1px solid rgba(31, 255, 185, 0.12);
  box-shadow: 0 24px 44px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(20px);
  min-width: 190px;
  padding: 0.45rem;
  border-radius: 18px;
  margin-bottom: 0.65rem !important;
  z-index: 1060;
}

.sidebar-footer-dropdown .dropdown-item {
  color: var(--text-primary);
  font-size: 0.8rem;
  padding: 0.7rem 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 12px;
  transition: background 0.15s, color 0.15s;
}

.sidebar-footer-dropdown .dropdown-item:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.sidebar-footer-dropdown .dropdown-item.text-danger:hover {
  background: rgba(255, 107, 107, 0.1);
  color: #ff6b6b;
}

.sidebar-footer-dropdown .dropdown-divider {
  border-color: rgba(31, 255, 185, 0.08);
  margin: 0.35rem 0;
}

/* ============================================================================
   SIDEBAR TOOLTIPS (COLLAPSED ONLY)
   ============================================================================ */

.sidebar:not(.collapsed) .sidebar-tooltip {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* ============================================================================
   SIDEBAR RESPONSIVE — mobile hides collapsed sidebar
   ============================================================================ */

@media (max-width: 992px) {
  .sidebar.collapsed {
    display: none;
  }

  #app-shell.sidebar-collapsed .main-content {
    margin-left: 0;
  }
}

/* ============================================================================
   MOBILE FILTER TOGGLE
   ============================================================================ */

.filter-toggle-btn {
  display: none;
  width: 100%;
  padding: 0.75rem 1.25rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.filter-toggle-btn:hover {
  border-color: var(--accent-glow);
  background: var(--accent-soft);
}

.filter-toggle-btn .filter-toggle-icon {
  transition: transform var(--transition-fast);
  font-size: 0.75rem;
}

.filter-toggle-btn.filters-open .filter-toggle-icon {
  transform: rotate(180deg);
}

/* ============================================================================
   RESPONSIVE TABLE WRAPPER
   ============================================================================ */

.table-responsive-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.table-responsive-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 24px;
  background: linear-gradient(to left, var(--card-bg), transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.table-responsive-wrapper.has-scroll::after {
  opacity: 1;
}

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

@media (max-width: 992px) {
  .sidebar {
    display: none;
  }

  .mobile-header {
    display: flex;
  }

  .main-content {
    margin-left: 0;
  }

  .brand-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }

  .header-info {
    align-items: flex-start;
    text-align: left;
    margin-top: 1.5rem;
  }

  .brand-logo {
    width: 76px;
    height: 76px;
  }

  .brand-title {
    font-size: 1.75rem;
  }

  .filters-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  /* Filter toggle visible on tablet/mobile */
  .filter-toggle-btn {
    display: flex;
  }

  .filters-card .card-body {
    display: none;
  }

  .filters-card.filters-expanded .card-body {
    display: block;
  }

  /* Chart heights: responsive on tablet (exclui .financial-chart-card para evitar reflow/CLS) */
  .chart-card {
    max-height: none;
  }

  .chart-card:not(.financial-chart-card):not(.operacional-chart-card) .dash-graph {
    height: auto !important;
    min-height: 280px;
  }

  /* Operacional chart responsive override */
  .page-operacional .row .chart-card {
    height: auto;
    min-height: 320px;
  }

  .page-operacional .row .chart-card .dash-graph {
    height: auto;
    min-height: 300px;
  }

  /* Goal cards: compact mode */
  .goal-card .card-body {
    padding: 1rem 1.25rem;
  }

  .goal-card-value {
    font-size: 2rem;
  }

  .goal-card-meta {
    gap: 0.25rem;
  }

  .goal-card-meta-item {
    font-size: 0.8rem;
    padding: 0.2rem 0;
  }

  /* Notification panel responsive */
  #notification-panel {
    width: 100% !important;
    max-width: 380px;
  }
}

@media (max-width: 768px) {
  .dashboard-header {
    padding: 0.4rem 0 0.5rem;
  }

  .filters-card .card-body {
    padding: 1rem 1.25rem;
  }

  .filters-card.filters-expanded .card-body {
    padding: 1rem 1.25rem;
  }

  /* Brand compact */
  .brand-wrapper {
    gap: 0.75rem;
  }

  .brand-subtitle {
    font-size: 0.85rem;
  }

  /* Chart margins tighter (exclui financial e operacional para manter altura estável) */
  .chart-card:not(.financial-chart-card):not(.operacional-chart-card) .dash-graph {
    min-height: 250px;
  }

  /* Touch targets ≥44px (WCAG / mobile usability) */
  .filter-toggle-btn {
    min-height: 44px;
  }
  .fonte-selector-group .fonte-selector-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 0.9rem;
  }
  .header-date-inline {
    min-height: 44px;
    min-width: 44px;
  }
  .header-target {
    min-height: 44px;
    min-width: 44px;
  }
}

@media (max-width: 576px) {
  .kpi-card {
    border-radius: 18px;
  }

  .goal-card {
    border-radius: 22px;
  }

  .brand-title {
    font-size: 1.5rem;
  }

  .brand-logo {
    width: 64px;
    height: 64px;
  }

  .goal-card-value {
    font-size: 1.625rem;
  }

  .goal-card-percentage {
    font-size: 1rem;
  }

  .goal-card .card-body {
    padding: 0.875rem 1rem;
  }

  .goal-card-header {
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .goal-card-subtitle {
    font-size: 0.8rem;
  }

  .goal-card-meta {
    gap: 0.15rem;
  }

  .goal-card-meta-item {
    font-size: 0.75rem;
    padding: 0.15rem 0;
  }

  .kpi-value {
    font-size: 1.75rem;
  }

  .filters-grid {
    grid-template-columns: 1fr;
  }

  .risk-card-value {
    font-size: 1.75rem;
  }

  .financial-section-title {
    font-size: 1.25rem;
  }

  /* Charts even smaller on phone */
  .chart-card:not(.financial-chart-card):not(.operacional-chart-card) .dash-graph {
    min-height: 220px;
  }

  /* Ranking controls compact */
  .ranking-pagination {
    padding: 0.35rem 0.75rem;
    gap: 0.5rem;
  }

  .ranking-nav-btn {
    min-width: 36px;
    height: 36px;
    font-size: 14px;
    border-radius: 10px;
  }

  .ranking-page-info {
    font-size: 12px;
    padding: 0 0.35rem;
  }

  /* KPI cards tighter */
  .kpi-card .card-body {
    padding: 1rem;
  }

  /* Info icon smaller */
  .kpi-info-tooltip {
    padding: 6px 10px;
    font-size: 0.75rem;
    max-width: 220px;
  }
}

@media (max-width: 480px) {
  /* Extra-small phones */
  .brand-title {
    font-size: 1.25rem;
  }

  .brand-logo {
    width: 48px;
    height: 48px;
  }

  .brand-subtitle {
    font-size: 0.75rem;
  }

  .card-eyebrow {
    font-size: 0.65rem;
  }

  .card-date {
    font-size: 0.8rem;
  }

  .goal-card-value {
    font-size: 1.5rem;
  }

  .kpi-value {
    font-size: 1.5rem;
  }

  .kpi-label {
    font-size: 0.75rem;
  }

  .chart-card:not(.financial-chart-card):not(.operacional-chart-card) .dash-graph {
    min-height: 200px;
  }

  /* Filter button more compact */
  .filter-toggle-btn {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
  }

  /* DataTable cells tighter */
  .dash-table-container .cell-table td,
  .dash-table-container .cell-table th {
    padding: 6px 8px !important;
    font-size: 0.75rem !important;
  }
}

/* ============================================================================
   DASH DATATABLE — tema (evitar cinza; overflow mobile)
   ============================================================================ */
.dash-table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
/* Células e cabeçalhos: alinhar ao tema (--text-primary, --card-border) */
.dash-table-container table,
.dash-table-container .dash-spreadsheet-container,
.dash-table-container th,
.dash-table-container td,
.dash-table-container .dash-cell {
  color: var(--text-primary);
  border-color: var(--card-border);
}
.dash-table-container thead th,
.dash-table-container .column-header {
  background: var(--accent-soft);
  color: var(--text-primary);
  font-weight: 600;
}
.dash-table-container tbody tr:hover td,
.dash-table-container .dash-cell:hover {
  background: var(--accent-soft);
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus states for accessibility */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================================
   LOGIN PAGE — SPLIT CARD
   ============================================================================ */

/* Shell: full viewport, centers the card */
.login-shell {
  min-height: 100vh;
  width: 100%;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: radial-gradient(
    ellipse at 30% 50%,
    rgba(31, 255, 185, 0.04) 0%,
    transparent 60%
  ),
  var(--body-bg, #0a1420);
  animation: fadeIn 0.6s ease-out;
}

@keyframes loginInitialLoaderFade {
  0% {
    opacity: 1;
    visibility: visible;
  }
  80% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

/* Class kept for backward compatibility if referenced by cached HTML. */
.login-initial-loader {
  display: none;
}

/* Card: the main container that holds both panels side by side */
.login-card {
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 960px;
  min-height: 580px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(31, 255, 185, 0.05);
  animation: slideUp 0.6s ease-out;
}

/* -- Left panel: image -- */
.login-panel-left {
  flex: 1;
  min-height: 100%;
  position: relative;
  /* backgroundImage set inline via Dash style prop */
}

/* Subtle vignette on the image edges */
.login-panel-left::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    transparent 70%,
    rgba(17, 27, 40, 0.6) 100%
  );
  pointer-events: none;
}

/* -- Right panel: form -- */
.login-panel-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2.5rem;
  gap: 1.25rem;
  max-width: 460px;
}

/* Logo */
.login-logo {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: var(--accent-soft);
  padding: 0.5rem;
  box-shadow: inset 0 0 0 1px rgba(31, 255, 185, 0.2),
    0 10px 30px rgba(31, 255, 185, 0.1);
  margin-bottom: 0.25rem;
}

/* Title */
.login-title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Subtitle */
.login-subtitle {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
  letter-spacing: 0.03em;
}

/* -- Google sign-in button -- */
.login-google-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.login-google-button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.login-google-button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.login-google-icon {
  width: 20px;
  height: 20px;
}

.login-coming-soon {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-style: italic;
}

/* -- Divider -- */
.login-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.login-divider-line {
  flex: 1;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 0;
}

.login-divider-text {
  font-size: 0.8rem;
  color: var(--text-secondary);
  white-space: nowrap;
  text-transform: lowercase;
}

/* -- Credential form -- */
.login-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Input styles — high specificity avoids !important on most properties */
.login-form .login-input,
.login-form input.login-input[type] {
  background: var(--card-bg);
  border: 1px solid rgba(31, 255, 185, 0.15);
  border-radius: 12px;
  color: var(--text-primary);
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  width: 100%;
  transition: all var(--transition-fast);
}

.login-form .login-input:focus,
.login-form input.login-input[type]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.login-form .login-input::placeholder,
.login-form input.login-input[type]::placeholder {
  color: var(--text-secondary);
}

/* Button styles */
.login-button {
  width: 100%;
  padding: 0.75rem !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  background: linear-gradient(135deg, var(--accent), rgba(31, 255, 185, 0.7)) !important;
  border: none !important;
  color: #0a1420 !important;
  transition: all var(--transition-smooth);
  margin-top: 0.25rem;
}

.login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(31, 255, 185, 0.3);
}

.login-button:disabled {
  opacity: 0.9;
  cursor: wait;
}

.login-button-loading-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}

.login-button-loading-icon {
  animation: detail-spin 1.5s ease-in-out infinite;
}

/* Alert */
.login-alert {
  width: 100%;
  border-radius: 12px !important;
  text-align: center;
  font-size: 0.9rem;
}

/* Footer text */
.login-footer-text {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: var(--text-secondary);
  opacity: 0.6;
}

/* -- Responsive: stack on mobile/tablet -- */
@media (max-width: 992px) {
  .login-shell {
    padding: 1rem;
  }

  .login-card {
    flex-direction: column;
    max-width: 440px;
    min-height: auto;
  }

  .login-panel-left {
    display: none;
  }

  .login-panel-right {
    max-width: 100%;
    padding: 2.5rem 2rem;
  }
}

@media (max-width: 576px) {
  .login-panel-right {
    padding: 2rem 1.5rem;
  }

  .login-logo {
    width: 60px;
    height: 60px;
  }

  .login-title {
    font-size: 1.35rem;
  }
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
  body {
    background: white;
    color: black;
  }

  .sidebar,
  .mobile-header {
    display: none !important;
  }

  .main-content {
    margin-left: 0 !important;
  }

  .dashboard-header,
  .filters-card {
    break-inside: avoid;
  }

  .chart-card,
  .kpi-card,
  .goal-card,
  .risk-card {
    box-shadow: none;
    border: 1px solid #ddd;
  }
}

/* ============================================================================
   FERRAMENTAS PAGE — reutiliza paleta de Configurações (admin-tabs)
   ============================================================================ */

.page-ferramentas {
  color: var(--text-primary);
}

/* Abas: mesmo estilo de Configurações (admin-tabs) para paridade visual */
.ferramentas-tabs .nav-link {
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  padding: 10px 20px;
  font-size: 0.9rem;
  transition: var(--transition-fast);
}

.ferramentas-tabs .nav-link:hover {
  color: var(--accent);
  border-bottom-color: rgba(31, 255, 185, 0.3);
}

.ferramentas-tabs .nav-link.active {
  color: var(--accent);
  background: rgba(31, 255, 185, 0.06);
  border-bottom: 2px solid var(--accent);
}

/* Botões e loading na página Ferramentas: paleta do projeto (accent), não azul */
.page-ferramentas .btn-primary {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #0d1519;
}

.page-ferramentas .btn-primary:hover {
  background-color: rgba(31, 255, 185, 0.85);
  border-color: var(--accent);
  color: #0d1519;
}

.page-ferramentas .tool-card .form-control,
.page-ferramentas .perf-card .form-control,
.page-ferramentas .codigo-email-input,
.page-ferramentas .localizador-input,
.page-ferramentas .extrator-input {
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.96);
  color: #13212f;
  box-shadow: none;
}

.page-ferramentas .tool-card .form-control::placeholder,
.page-ferramentas .perf-card .form-control::placeholder,
.page-ferramentas .codigo-email-input::placeholder,
.page-ferramentas .localizador-input::placeholder,
.page-ferramentas .extrator-input::placeholder {
  color: rgba(19, 33, 47, 0.42);
}

.page-ferramentas .tool-card .form-control:hover,
.page-ferramentas .perf-card .form-control:hover,
.page-ferramentas .codigo-email-input:hover,
.page-ferramentas .localizador-input:hover,
.page-ferramentas .extrator-input:hover {
  border-color: rgba(31, 255, 185, 0.58);
  background: #ffffff;
}

.page-ferramentas .tool-card .form-control:focus,
.page-ferramentas .perf-card .form-control:focus,
.page-ferramentas .codigo-email-input:focus,
.page-ferramentas .localizador-input:focus,
.page-ferramentas .extrator-input:focus {
  border-color: var(--accent);
  background: #ffffff;
  color: #13212f;
  box-shadow: 0 0 0 3px rgba(31, 255, 185, 0.18);
  outline: none;
}

/* Localizador: input e botão com altura de toque ≥44px e estados de foco/hover (ux-modal) */
.page-ferramentas .localizador-input {
  border-radius: 10px;
}
.page-ferramentas .localizador-input:hover {
  border-color: var(--accent);
}
.page-ferramentas .localizador-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31, 255, 185, 0.18);
  outline: none;
}
.page-ferramentas .localizador-buscar-btn {
  min-height: 44px;
  cursor: pointer;
}
.page-ferramentas .localizador-buscar-btn:focus {
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Extrator: textarea para colar linha da planilha */
.page-ferramentas .extrator-linha-input {
  min-height: 108px;
  padding: 0.8rem 0.9rem;
  border-radius: var(--radius-md, 6px);
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text-primary);
  line-height: 1.45;
  resize: vertical;
}

.page-ferramentas .extrator-linha-input:hover {
  border-color: var(--accent);
}

.page-ferramentas .extrator-linha-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}

.page-ferramentas textarea.extrator-linha-input::placeholder,
.page-ferramentas .extrator-linha-input.form-control::placeholder {
  color: var(--bs-secondary-color, #6c757d);
  opacity: 1;
}

.page-ferramentas .extrator-buscar-btn {
  min-height: 44px;
  cursor: pointer;
}
.page-ferramentas .extrator-buscar-btn:focus {
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ============================================================================
   EXTRATOR RESULT MODAL - visual refinado alinhado ao sistema
   ============================================================================ */

.extrator-result-modal-shell .modal-dialog {
  max-width: min(1080px, 95vw);
}

.extrator-result-modal-header {
  padding: 1.15rem 1.35rem !important;
}

.extrator-result-modal-header-wrap {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.extrator-result-modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(31, 255, 185, 0.18), rgba(31, 255, 185, 0.05));
  border: 1px solid rgba(31, 255, 185, 0.18);
  color: var(--accent);
  font-size: 1.08rem;
  box-shadow: 0 16px 32px rgba(31, 255, 185, 0.08);
  flex-shrink: 0;
}

.extrator-result-modal-heading {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.extrator-result-modal-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.extrator-result-modal-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.extrator-result-modal-subtitle {
  margin: 0;
  max-width: 42rem;
  color: var(--text-secondary);
  line-height: 1.5;
  font-size: 0.94rem;
}

.extrator-result-modal-body {
  padding: 1.35rem 1.5rem 1rem;
}

.extrator-result-modal-footer {
  padding: 0.95rem 1.5rem 1.2rem;
}

.extrator-result-modal-footer-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}

.extrator-result-modal-footer-note {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.extrator-result-modal-close-btn {
  min-width: 96px;
}

.extrator-result-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.extrator-result-summary-shell {
  padding: 1rem 1.05rem;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
    rgba(17, 27, 40, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 14px 28px rgba(0, 0, 0, 0.14);
}

.extrator-result-summary-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.extrator-result-summary-copy {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.extrator-result-summary-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.extrator-result-summary-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
}

.extrator-result-summary-subtitle {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.84rem;
}

.extrator-result-summary-chip-row,
.extrator-result-chip-row {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.extrator-result-summary-chip,
.extrator-result-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.extrator-result-card {
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)),
    rgba(11, 20, 30, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.02),
    0 16px 30px rgba(0, 0, 0, 0.12);
}

.extrator-result-card-body {
  padding: 1.15rem 1.15rem 1.05rem;
}

.extrator-result-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.1rem;
  padding-bottom: 0.95rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.extrator-result-card-heading {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}

.extrator-result-card-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.extrator-result-card-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--text-primary);
}

.extrator-result-card-subtitle {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.86rem;
}

.extrator-result-section-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
}

.extrator-result-section-row + .extrator-result-section-row {
  margin-top: 0.85rem;
}

.extrator-result-section-row--top {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.35fr);
}

.extrator-result-section-row--bottom {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr);
}

.extrator-result-section {
  margin-top: 0;
  padding: 0.9rem 0.92rem 0.95rem;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0)),
    rgba(6, 12, 20, 0.42);
}

.extrator-result-section-title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.9rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.extrator-result-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(31, 255, 185, 0.16), rgba(255, 255, 255, 0.02));
}

.extrator-result-section--identity {
  background:
    linear-gradient(180deg, rgba(31, 255, 185, 0.025), rgba(255, 255, 255, 0)),
    rgba(6, 12, 20, 0.42);
}

.extrator-result-section--financial {
  border-color: rgba(31, 255, 185, 0.1);
  background:
    linear-gradient(180deg, rgba(31, 255, 185, 0.035), rgba(31, 255, 185, 0.008)),
    rgba(6, 12, 20, 0.44);
}

.extrator-result-section--payment {
  border-color: rgba(112, 193, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(112, 193, 255, 0.03), rgba(255, 255, 255, 0)),
    rgba(6, 12, 20, 0.42);
}

.extrator-result-section--operational {
  border-color: rgba(255, 255, 255, 0.08);
}

.extrator-result-section--timeline {
  border-color: rgba(255, 255, 255, 0.08);
}

.extrator-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.65rem;
}

.extrator-result-item {
  display: flex;
  flex-direction: column;
  gap: 0.24rem;
  min-height: 66px;
  padding: 0.68rem 0.78rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.025);
}

.extrator-result-item--emphasis {
  background: linear-gradient(180deg, rgba(31, 255, 185, 0.065), rgba(31, 255, 185, 0.02));
  border-color: rgba(31, 255, 185, 0.12);
}

.extrator-result-item--subtle {
  background: rgba(255, 255, 255, 0.018);
}

.extrator-result-item-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(232, 246, 255, 0.58);
}

.extrator-result-item-value {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.42;
  word-break: break-word;
}

.extrator-result-notes {
  margin-top: 0;
  padding: 0.95rem 1rem;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0)),
    rgba(7, 14, 22, 0.34);
}

.extrator-result-notes-label {
  display: inline-flex;
  margin-bottom: 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.extrator-result-notes-text {
  margin: 0;
  color: var(--text-primary);
  line-height: 1.6;
  white-space: pre-wrap;
}

@media (max-width: 992px) {
  .extrator-result-section-row,
  .extrator-result-section-row--top,
  .extrator-result-section-row--bottom {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .extrator-result-modal-header-wrap,
  .extrator-result-summary-top,
  .extrator-result-card-top,
  .extrator-result-modal-footer-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  .extrator-result-grid {
    grid-template-columns: 1fr;
  }

  .extrator-result-modal-body {
    padding: 1.05rem 1rem 0.9rem;
  }

  .extrator-result-modal-footer {
    padding: 0.9rem 1rem 1rem;
  }

  .extrator-result-modal-close-btn {
    width: 100%;
  }
}

/* ============================================================================
   EXTRATO LINHA MODAL — layout refinado
   ============================================================================ */

.extrato-section-label {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.extrato-copy-btn {
  font-size: 0.72rem;
  padding: 0.15rem 0.55rem;
  min-height: 26px;
  border-color: rgba(31, 255, 185, 0.3);
  color: var(--accent);
  transition: var(--transition-fast);
}
.extrato-copy-btn:hover:not(:disabled) {
  background: rgba(31, 255, 185, 0.1);
  border-color: var(--accent);
  color: var(--accent);
}

.extrato-resumo-wrapper {
  background: rgba(31, 255, 185, 0.03);
  border: 1px solid rgba(31, 255, 185, 0.12);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
}

.extrator-linha-modal .modal-dialog {
  max-width: min(1120px, 96vw);
}

.extrator-linha-modal-header {
  padding: 1.2rem 1.35rem !important;
}

.extrator-linha-modal-header-wrap {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.extrator-linha-modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(31, 255, 185, 0.18), rgba(31, 255, 185, 0.05));
  border: 1px solid rgba(31, 255, 185, 0.18);
  color: var(--accent);
  font-size: 1.1rem;
  box-shadow: 0 16px 32px rgba(31, 255, 185, 0.08);
  flex-shrink: 0;
}

.extrator-linha-modal-heading {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.extrator-linha-modal-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.extrator-linha-modal-title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.extrator-linha-modal-subtitle {
  margin: 0;
  max-width: 42rem;
  color: var(--text-secondary);
  line-height: 1.5;
  font-size: 0.95rem;
}

.extrator-linha-summary-shell {
  background:
    linear-gradient(180deg, rgba(31, 255, 185, 0.08), rgba(31, 255, 185, 0.03)),
    rgba(17, 27, 40, 0.72);
  border-color: rgba(31, 255, 185, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 18px 34px rgba(0, 0, 0, 0.18);
}

.extrator-linha-summary-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

.extrator-linha-section-copy {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.extrator-linha-section-help {
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.45;
}

.extrator-linha-chip-row {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.extrator-linha-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(31, 255, 185, 0.16);
  background: rgba(31, 255, 185, 0.08);
  color: var(--text-primary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.extrato-resumo-block {
  min-height: 60px;
  max-height: 180px;
  overflow-y: auto;
  background: transparent;
  border: none;
  padding: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  margin-bottom: 0;
}

.extrator-linha-panel {
  height: 100%;
  padding: 1rem 1rem 0.95rem;
  border-radius: 18px;
  border: 1px solid rgba(31, 255, 185, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)),
    rgba(11, 20, 30, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.extrator-linha-panel--client {
  border-color: rgba(31, 255, 185, 0.16);
}

.extrator-linha-panel--supplier {
  border-color: rgba(232, 246, 255, 0.12);
}

.extrator-linha-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.extrator-linha-copy-action {
  min-width: 96px;
}

.extrato-text-block {
  min-height: 260px;
  max-height: 420px;
  overflow-y: auto;
  padding: 1rem 1.05rem;
  border-radius: 16px;
  border: 1px solid rgba(31, 255, 185, 0.08);
  background: rgba(5, 10, 18, 0.45);
  font-size: 0.86rem;
  line-height: 1.65;
}

.extrato-edit-btn {
  min-width: 36px;
  padding: 0.25rem 0.5rem;
  font-size: 0.82rem;
  color: rgba(251, 191, 36, 0.85);
  border-color: rgba(251, 191, 36, 0.35);
}

.extrato-edit-btn:hover {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.7);
  background: rgba(251, 191, 36, 0.08);
}

body .page-ferramentas textarea.extrato-edit-textarea,
body .page-ferramentas .extrato-edit-textarea.form-control {
  resize: vertical;
  font-family: var(--font-mono, "Fira Mono", "Courier New", monospace);
  color: #e6edf5 !important;
  caret-color: #e6edf5;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
  border: 1px solid rgba(71, 85, 105, 0.42) !important;
  background-color: rgb(17, 25, 38) !important;
  background:
    linear-gradient(180deg, rgba(21, 31, 46, 0.98) 0%, rgba(14, 22, 34, 0.98) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 12px 26px rgba(0, 0, 0, 0.22);
}

body .page-ferramentas textarea.extrato-edit-textarea::placeholder,
body .page-ferramentas .extrato-edit-textarea.form-control::placeholder {
  color: rgba(203, 213, 225, 0.46);
}

body .page-ferramentas textarea.extrato-edit-textarea::selection,
body .page-ferramentas .extrato-edit-textarea.form-control::selection {
  background: rgba(37, 99, 235, 0.18);
}

body .page-ferramentas textarea.extrato-edit-textarea:hover,
body .page-ferramentas .extrato-edit-textarea.form-control:hover,
body .page-ferramentas textarea.extrato-edit-textarea:focus,
body .page-ferramentas .extrato-edit-textarea.form-control:focus {
  color: #f3f7fb !important;
  border-color: rgba(251, 191, 36, 0.55) !important;
  background-color: rgb(19, 28, 41) !important;
  box-shadow:
    0 0 0 3px rgba(251, 191, 36, 0.12),
    0 16px 30px rgba(0, 0, 0, 0.24);
  background:
    linear-gradient(180deg, rgba(24, 35, 50, 0.99) 0%, rgba(17, 26, 39, 0.99) 100%) !important;
}

.extrato-section-divider {
  border-color: rgba(31, 255, 185, 0.12);
  margin: 0.25rem 0 1.25rem 0;
}

.extrato-modal-body {
  padding: 1.35rem 1.5rem 0.9rem;
}

.extrato-fechar-btn {
  min-width: 90px;
  font-size: 0.84rem;
}

.extrator-linha-modal-footer {
  padding: 0.95rem 1.5rem 1.2rem;
}

.extrator-linha-footer-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}

.extrator-linha-footer-note {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.extrator-linha-close-btn {
  min-width: 108px;
}

@media (max-width: 767px) {
  .extrator-linha-modal-header-wrap,
  .extrator-linha-summary-top,
  .extrator-linha-panel-header,
  .extrator-linha-footer-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  .extrator-linha-chip-row {
    justify-content: flex-start;
  }

  .extrator-linha-copy-action,
  .extrator-linha-close-btn {
    width: 100%;
  }

  .extrato-modal-body {
    padding: 1rem 1rem 0.75rem;
  }
}

/* Validação: mesmo padrão visual de Ferramentas (accent, não azul Bootstrap) */
.page-validacao .btn-primary {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #0d1519;
}

.page-validacao .btn-primary:hover {
  background-color: rgba(31, 255, 185, 0.85);
  border-color: var(--accent);
  color: #0d1519;
}

.page-validacao .btn-outline-secondary {
  border-color: rgba(31, 255, 185, 0.4);
  color: var(--accent);
}

.page-validacao .btn-outline-secondary:hover:not(:disabled) {
  background-color: rgba(31, 255, 185, 0.12);
  border-color: var(--accent);
  color: var(--accent);
}

.tool-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  transition: var(--transition-fast);
}

.tool-card:hover {
  border-color: rgba(31, 255, 185, 0.3);
}

.page-ferramentas .tool-card .card-body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1rem;
}

.page-ferramentas .tool-card .form-label,
.page-ferramentas .tool-card label:not(.manual-trip-radio-label) {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 0.45rem;
}

.page-ferramentas .tool-card .text-muted:not(.codigo-email-card-badge):not(.manual-airline-card-badge) {
  font-size: 0.88rem;
  line-height: 1.45;
}

.page-ferramentas .tool-card-input,
.page-ferramentas .tool-card-textarea {
  border-radius: 12px;
}

.page-ferramentas .tool-card-textarea {
  min-height: 108px;
  padding: 0.8rem 0.9rem;
  line-height: 1.45;
  resize: vertical;
}

.page-ferramentas .tool-card-action-btn {
  min-height: 46px;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-wrap: nowrap;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.page-ferramentas .tool-card-feedback {
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-primary);
}

.page-ferramentas .tool-card-feedback--success,
.page-ferramentas .tool-card-feedback--danger {
  background: rgba(255, 255, 255, 0.035);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.page-ferramentas .tool-card-feedback--success {
  border-color: rgba(31, 255, 185, 0.22);
  background: linear-gradient(180deg, rgba(31, 255, 185, 0.08), rgba(255, 255, 255, 0.03));
}

.page-ferramentas .tool-card-feedback--danger {
  border-color: rgba(255, 107, 107, 0.2);
  background: linear-gradient(180deg, rgba(255, 107, 107, 0.08), rgba(255, 255, 255, 0.03));
}

.page-ferramentas .tool-card-feedback-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
}

.page-ferramentas .tool-card-feedback-panel {
  padding: 0.8rem 0.9rem;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.025);
}

.page-ferramentas .tool-card-feedback-label,
.page-ferramentas .tool-card-feedback-note {
  color: var(--text-secondary);
}

.page-ferramentas .tool-card-feedback-link {
  display: inline-block;
  color: var(--text-primary);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.page-ferramentas .tool-card-feedback-link:hover {
  color: var(--accent);
}

.page-ferramentas .tool-card-feedback-action {
  min-height: 38px;
  border-radius: 10px;
  font-weight: 600;
}

.codigo-email-workspace {
  animation: fadeIn 0.28s ease-out;
}

.codigo-email-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(31, 255, 185, 0.18);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 0% 0%, rgba(31, 255, 185, 0.1), transparent 35%),
    linear-gradient(180deg, rgba(31, 255, 185, 0.04) 0%, rgba(31, 255, 185, 0.01) 100%);
}

.codigo-email-title {
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}

.codigo-email-subtitle {
  color: var(--text-secondary);
  font-size: 0.86rem;
}

.codigo-email-chip-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}

.codigo-email-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(31, 255, 185, 0.25);
  background: rgba(31, 255, 185, 0.08);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 600;
}

.codigo-email-card-header {
  justify-content: space-between;
}

.codigo-email-card-title {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--text-primary);
}

.codigo-email-card-title::before {
  content: "";
  width: 2.2rem;
  height: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 1px solid rgba(31, 255, 185, 0.18);
  background: rgba(31, 255, 185, 0.08);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 1.5 3 3.4v3.8c0 3.05 2.12 5.9 5 6.8 2.88-.9 5-3.75 5-6.8V3.4L8 1.5Z' stroke='%231fffb9' stroke-width='1.2'/%3E%3Cpath d='M6.6 7.1V6.2a1.4 1.4 0 1 1 2.8 0v.9' stroke='%231fffb9' stroke-width='1.2' stroke-linecap='round'/%3E%3Crect x='5.4' y='7.1' width='5.2' height='3.7' rx='1' stroke='%231fffb9' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1rem 1rem;
}

.codigo-email-workspace .row > *:last-child .codigo-email-card-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Crect x='1.7' y='3.2' width='12.6' height='9.6' rx='1.6' stroke='%231fffb9' stroke-width='1.2'/%3E%3Cpath d='m2.8 4.5 5.2 4 5.2-4' stroke='%231fffb9' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.codigo-email-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.7rem;
  font-weight: 600;
}

.codigo-email-card-description {
  min-height: 2.6rem;
}

.manual-search-card .card-body {
  padding: 1rem;
}

.manual-search-card .codigo-email-card-title::before {
  display: none;
}

.manual-search-workspace {
  align-items: stretch;
}

.manual-search-column {
  display: flex;
}

.manual-search-panel,
.manual-results-panel {
  width: 100%;
}

.manual-results-panel .card-body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: visible;
}

.manual-search-topbar {
  display: block;
}

.manual-search-intro {
  max-width: 760px;
}

.manual-results-intro {
  display: none;
}

.manual-results-output {
  flex: 1 1 auto;
  overflow: visible;
  margin-top: 0 !important;
}

.manual-results-empty-state {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 1.1rem 1.15rem;
  border: 1px dashed rgba(31, 255, 185, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
}

.manual-results-empty-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.manual-results-empty-text {
  color: var(--text-secondary);
  max-width: 34rem;
}

.manual-search-chip-group {
  justify-content: flex-start;
  gap: 0.4rem;
}

.manual-search-grid {
  align-items: end;
}

.manual-search-divider {
  display: none;
}

.manual-trip-shell {
  min-height: 46px;
  display: flex;
  align-items: center;
  border-radius: 12px;
  border: 1px solid rgba(31, 255, 185, 0.16);
  background: var(--card-bg);
  padding: 4px;
}

.page-ferramentas .manual-trip-radio {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  min-height: 44px;
  padding: 0;
  margin: 0;
}

.page-ferramentas .manual-trip-radio .form-check {
  margin-bottom: 0;
  flex: 1 1 0;
  min-width: 0;
}

.page-ferramentas .manual-trip-radio-label,
.page-ferramentas .manual-trip-radio-input {
  cursor: pointer;
}

.page-ferramentas .manual-trip-radio-label {
  color: var(--text-primary);
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 0.85rem;
  border-radius: 10px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.02);
  font-weight: 600;
  transition: var(--transition-fast);
}

.page-ferramentas .manual-trip-radio-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.page-ferramentas .manual-trip-radio-input:checked + .manual-trip-radio-label {
  background: rgba(31, 255, 185, 0.12);
  border-color: rgba(31, 255, 185, 0.22);
  color: var(--text-primary);
}

.page-ferramentas .manual-trip-radio-label:hover {
  border-color: rgba(31, 255, 185, 0.18);
  background: rgba(255, 255, 255, 0.04);
}

.page-ferramentas .manual-search-input,
.page-ferramentas input.manual-search-input[type] {
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(31, 255, 185, 0.16);
  background: var(--card-bg);
  color: var(--text-primary);
  padding: 0.65rem 1rem;
}

.page-ferramentas .manual-search-input:hover,
.page-ferramentas input.manual-search-input[type]:hover {
  border-color: rgba(31, 255, 185, 0.3);
}

.page-ferramentas .manual-search-input:focus,
.page-ferramentas input.manual-search-input[type]:focus {
  border-color: var(--accent);
  background: var(--card-bg);
  color: var(--text-primary);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.page-ferramentas .manual-search-input--compact {
  text-align: center;
}

.page-ferramentas .filter-control.manual-search-select .Select__control {
  min-height: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(31, 255, 185, 0.16);
  background: var(--card-bg);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
}

.page-ferramentas .filter-control.manual-search-select .Select__control:hover {
  border-color: rgba(31, 255, 185, 0.3);
}

.page-ferramentas .filter-control.manual-search-select .Select__control--is-focused {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.page-ferramentas .filter-control.manual-search-select .Select__single-value,
.page-ferramentas .filter-control.manual-search-select .Select__input-container,
.page-ferramentas .filter-control.manual-search-select .Select__value-container {
  color: #13212f !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #13212f !important;
}

.page-ferramentas .filter-control.manual-search-select .Select__single-value {
  color: #13212f !important;
  font-weight: 500;
  opacity: 1 !important;
  -webkit-text-fill-color: #13212f !important;
}

.page-ferramentas .filter-control.manual-search-select .Select__placeholder {
  color: rgba(19, 33, 47, 0.48) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: rgba(19, 33, 47, 0.48) !important;
}

.page-ferramentas .filter-control.manual-search-select .Select-placeholder,
.page-ferramentas .filter-control.manual-search-select .Select--single > .Select-control .Select-value,
.page-ferramentas .filter-control.manual-search-select .Select-value-label,
.page-ferramentas .filter-control.manual-search-select .Select-input > input {
  color: #13212f !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #13212f !important;
}

.page-ferramentas .filter-control.manual-search-select .Select__value-container {
  min-height: 44px;
  padding: 0 0.85rem;
}

.page-ferramentas .filter-control.manual-search-select .Select__menu {
  background: rgba(17, 27, 40, 0.98);
  border: 1px solid rgba(31, 255, 185, 0.12);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-premium);
}

.page-ferramentas .filter-control.manual-search-select .Select__option--is-focused {
  background: rgba(31, 255, 185, 0.12);
}

.page-ferramentas .filter-control.manual-search-select .Select__option--is-selected {
  background: rgba(31, 255, 185, 0.22);
  color: var(--text-primary);
}

.manual-search-submit-btn {
  min-height: 46px;
  font-weight: 700;
}

.latam-tool-card.manual-search-card .card-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0.85rem;
  padding: 1.15rem;
}

.manual-links-output {
  min-height: 96px;
}

.page-ferramentas .codigo-email-refresh-btn,
.page-ferramentas .codigo-email-search-btn {
  min-height: 44px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.page-ferramentas .codigo-email-input {
  border-radius: 10px;
}

.codigo-email-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  font-weight: 600;
}

.codigo-email-stats {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  color: var(--text-secondary);
}

.codigo-email-stat-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

.codigo-email-stat-value {
  color: var(--accent);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
}

.codigo-email-stat-note {
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.manual-search-summary {
  justify-content: flex-start;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.manual-search-summary-pills {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
}

.manual-search-summary-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(31, 255, 185, 0.24);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  font-size: 0.76rem;
  font-weight: 600;
}

.manual-airline-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.manual-airline-card {
  overflow: visible;
}

.manual-airline-card .card-body {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  height: 100%;
  padding: 0.95rem 1rem;
}

.manual-airline-card-header {
  justify-content: space-between;
}

.manual-airline-card-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.manual-airline-card-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 600;
}

.manual-airline-card-description {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.35;
  font-size: 0.88rem;
}

.manual-airline-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.manual-airline-meta-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-primary);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
}

.manual-airline-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.15rem;
}

.manual-airline-passengers {
  color: var(--text-secondary);
  font-size: 0.76rem;
}

.manual-airline-btn {
  min-width: 110px;
  min-height: 34px;
  padding: 0.32rem 0.8rem;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
}

.codigo-email-table {
  border: 1px solid rgba(31, 255, 185, 0.16);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.codigo-email-table thead th {
  background: rgba(31, 255, 185, 0.08);
  border-bottom-color: rgba(31, 255, 185, 0.2);
  color: var(--text-primary);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.codigo-email-table tbody td {
  vertical-align: middle;
  color: var(--text-primary);
  font-size: 0.84rem;
}

.codigo-email-result-code-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border: 1px solid rgba(31, 255, 185, 0.24);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.75rem;
  background: rgba(31, 255, 185, 0.06);
}

.codigo-email-result-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-secondary);
  font-weight: 600;
}

.codigo-email-result-code {
  color: var(--accent);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.codigo-email-result-meta {
  font-size: 0.82rem;
}

@media (max-width: 991px) {
  .manual-airline-grid {
    grid-template-columns: 1fr;
  }

  .codigo-email-hero {
    flex-direction: column;
  }

  .codigo-email-chip-group {
    justify-content: flex-start;
  }
}

@media (max-width: 576px) {
  .manual-search-card .card-body {
    padding: 1rem;
  }

  .page-ferramentas .manual-trip-radio {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .manual-search-summary {
    flex-direction: column;
    align-items: flex-start;
  }

  .manual-airline-meta-grid {
    grid-template-columns: 1fr;
  }

  .manual-airline-card-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .manual-airline-btn {
    width: 100%;
  }

  .codigo-email-result-code {
    font-size: 1rem;
  }
}

.tool-card-header {
  background: rgba(31, 255, 185, 0.04);
  border-bottom: 1px solid var(--border-color);
  font-weight: 600;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tool-card-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.tool-card-title {
  font-weight: 600;
  color: var(--text-primary);
}

.tool-card-icon {
  width: 2.2rem;
  height: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 1px solid rgba(31, 255, 185, 0.18);
  background: rgba(31, 255, 185, 0.08);
  color: var(--accent);
  flex: 0 0 auto;
}

.tool-card-icon i {
  font-size: 1rem;
  line-height: 1;
}

.tool-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.tool-card-info {
  color: var(--text-secondary);
}

.tool-card-info:hover {
  color: var(--accent);
}

.upload-area {
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition-fast);
  color: var(--text-secondary);
}

.upload-area:hover {
  border-color: var(--accent);
  background: rgba(31, 255, 185, 0.04);
}

.cuv-text-output {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px;
  font-size: 0.8rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
  color: var(--text-primary);
}

.extrato-inline-card {
  margin-top: 0;
}

.latam-tools-row {
  --latam-card-initial-height: 760px;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.04fr) minmax(0, 1.28fr);
  gap: 1.5rem;
  align-items: start;
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}

.latam-tools-row > [class*="col-"] {
  display: flex;
  align-self: start;
  width: auto;
  max-width: none;
  min-height: var(--latam-card-initial-height);
  padding-left: 0;
  padding-right: 0;
}

.latam-tools-row .latam-tool-card {
  height: var(--latam-card-initial-height);
  min-height: var(--latam-card-initial-height);
}

@media (max-width: 1399.98px) {
  .latam-tools-row {
    --latam-card-initial-height: 700px;
  }

  .latam-tools-row .latam-tool-card {
    height: auto;
    min-height: var(--latam-card-initial-height);
    overflow: visible;
  }
}

.latam-tools-row .latam-tool-card:has(#converter-output > *),
.latam-tools-row .latam-tool-card:has(#comprovante-output > *),
.latam-tools-row .latam-tool-card:has(.comprovante-cookie-collapse.collapsing),
.latam-tools-row .latam-tool-card:has(.comprovante-cookie-collapse.show),
.latam-tools-row .latam-tool-card:has(#extrato-results-row:not([style*="display: none"])),
.latam-tools-row .latam-tool-card:has(#extrato-cliente-text:not(:empty)),
.latam-tools-row .latam-tool-card:has(#extrato-fornecedor-text:not(:empty)),
.latam-tools-row .latam-tool-card:has(#extrato-conta-propria-alert .alert) {
  height: auto;
  overflow: visible;
}

@media (max-width: 1199.98px) {
  .latam-tools-row {
    --latam-card-initial-height: auto;
  }

  .latam-tools-row > [class*="col-"] {
    min-height: 0;
  }

  .latam-tools-row .latam-tool-card {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
}

@media (max-width: 991.98px) {
  .latam-tools-row {
    grid-template-columns: 1fr;
    --latam-card-initial-height: auto;
  }

  .latam-tools-row > [class*="col-"] {
    min-height: 0;
  }

  .latam-tools-row .latam-tool-card {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
}

.latam-tool-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
  min-height: 386px;
  border: 1px solid rgba(31, 255, 185, 0.12);
  background:
    radial-gradient(circle at top right, rgba(31, 255, 185, 0.1), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.01));
  box-shadow: 0 18px 42px rgba(6, 19, 27, 0.2);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.latam-tool-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, rgba(31, 255, 185, 0.92), rgba(31, 255, 185, 0.24));
}

.latam-tool-card:hover {
  transform: translateY(-4px);
  border-color: rgba(31, 255, 185, 0.28);
  box-shadow: 0 26px 48px rgba(6, 19, 27, 0.28);
}

.latam-tool-card .tool-card-header {
  padding: 1rem 1.15rem;
  background: linear-gradient(180deg, rgba(31, 255, 185, 0.08), rgba(31, 255, 185, 0.03));
  border-bottom-color: rgba(31, 255, 185, 0.12);
}

.latam-tool-card .tool-card-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.latam-tool-card .codigo-email-card-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.latam-tool-card .tool-card-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(31, 255, 185, 0.16), rgba(31, 255, 185, 0.05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.latam-tool-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0.28rem 0.72rem;
  border-radius: 999px;
  border: 1px solid rgba(31, 255, 185, 0.18);
  background: rgba(31, 255, 185, 0.1);
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.latam-tool-card-description {
  color: var(--text-secondary);
}

.latam-tool-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.latam-tool-card-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.24rem 0.68rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  font-size: 0.76rem;
  font-weight: 600;
}

.latam-tool-card-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0.85rem;
  padding: 1.15rem;
}

.latam-tool-card .card-body:not(.latam-tool-card-body) {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0.85rem;
  padding: 1.15rem;
}

.latam-tool-card .tool-card-input,
.latam-tool-card .form-control {
  border-radius: 14px;
}

.latam-tool-card-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0.55rem;
  min-height: 50px !important;
  border-radius: 14px !important;
  padding: 0.8rem 1rem !important;
  font-size: clamp(0.84rem, 0.8rem + 0.18vw, 0.95rem);
  line-height: 1.1;
  white-space: nowrap;
  box-shadow: 0 14px 26px rgba(8, 20, 27, 0.18);
}

.latam-tool-card-btn i {
  font-size: 0.95rem;
  flex: 0 0 auto;
}

.latam-tool-card-btn span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.latam-tool-card-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.latam-tool-card-btn--primary {
  background: linear-gradient(135deg, var(--accent), rgba(31, 255, 185, 0.78)) !important;
  border: none !important;
  color: #08141b !important;
}

.latam-tool-card-btn--primary:hover:not(:disabled) {
  box-shadow: 0 18px 32px rgba(31, 255, 185, 0.22);
}

.latam-tool-card-btn--secondary {
  border: 1px solid rgba(31, 255, 185, 0.18) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--text-primary) !important;
}

.latam-tool-card-btn--secondary:hover:not(:disabled) {
  border-color: rgba(31, 255, 185, 0.34) !important;
  background: rgba(31, 255, 185, 0.08) !important;
  box-shadow: 0 16px 28px rgba(6, 19, 27, 0.16);
}

.latam-tool-card .tool-card-action-btn,
.latam-tool-card .codigo-email-refresh-btn,
.latam-tool-card .codigo-email-search-btn,
.latam-tool-card .extrator-buscar-btn,
.latam-tool-card .extrator-linha-gerar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 50px;
  border-radius: 14px;
  box-shadow: 0 14px 26px rgba(8, 20, 27, 0.18);
}

.latam-tool-card .btn-primary.tool-card-action-btn,
.latam-tool-card .btn-primary.codigo-email-refresh-btn,
.latam-tool-card .btn-primary.codigo-email-search-btn,
.latam-tool-card .btn-primary.extrator-buscar-btn,
.latam-tool-card .btn-primary.extrator-linha-gerar-btn {
  background: linear-gradient(135deg, var(--accent), rgba(31, 255, 185, 0.78));
  border: none;
  color: #08141b;
}

.latam-tool-card .btn-primary.tool-card-action-btn:hover:not(:disabled),
.latam-tool-card .btn-primary.codigo-email-refresh-btn:hover:not(:disabled),
.latam-tool-card .btn-primary.codigo-email-search-btn:hover:not(:disabled),
.latam-tool-card .btn-primary.extrator-buscar-btn:hover:not(:disabled),
.latam-tool-card .btn-primary.extrator-linha-gerar-btn:hover:not(:disabled) {
  box-shadow: 0 18px 32px rgba(31, 255, 185, 0.22);
  transform: translateY(-1px);
}

.latam-tool-card .tool-card-info {
  width: 1.8rem;
  height: 1.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.latam-tool-card-body > .tool-card-action-btn.w-100 {
  margin-top: auto;
}

#comprovante-btn.tool-card-action-btn.w-100 {
  margin-top: 0.35rem;
  flex: 0 0 auto;
}

.comprovante-tool-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
  align-items: stretch;
}

.comprovante-tool-main-field,
.comprovante-cookie-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.comprovante-tool-fields {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.comprovante-tool-tip-panel,
.comprovante-cookie-guide {
  height: 100%;
}

.comprovante-tool-tip-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
  align-items: start;
  padding: 0.85rem 1rem;
}

.comprovante-tool-tip-panel .tool-card-feedback-label {
  margin-bottom: 0;
  white-space: normal;
}

.comprovante-tool-tip-panel p {
  margin-bottom: 0;
  line-height: 1.45;
}

.comprovante-tool-output,
.comprovante-cookie-output,
.comprovante-result-stack {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.comprovante-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.comprovante-result-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.comprovante-cookie-collapse {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: 100%;
  overflow: visible;
  padding: 1rem;
  border-radius: 16px;
  border: 1px solid rgba(31, 255, 185, 0.12);
  background: linear-gradient(180deg, rgba(31, 255, 185, 0.04), rgba(255, 255, 255, 0.02));
}

.comprovante-cookie-toggle {
  align-self: stretch;
  width: 100%;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.6rem 0.8rem !important;
  margin-top: 0.25rem;
  border-radius: 12px !important;
  border: 1px dashed rgba(31, 255, 185, 0.24) !important;
  background: rgba(31, 255, 185, 0.05) !important;
  color: var(--accent) !important;
  font-weight: 700 !important;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  text-decoration: none !important;
}

.comprovante-cookie-toggle span {
  white-space: normal;
}

.comprovante-cookie-toggle:hover,
.comprovante-cookie-toggle:focus {
  color: #7fffd4 !important;
}

.comprovante-cookie-steps {
  margin: 0;
  padding-left: 1rem;
  color: var(--text-secondary);
  font-size: 0.84rem;
  line-height: 1.55;
}

.comprovante-cookie-textarea {
  min-height: 128px;
}

@media (max-width: 1199.98px) {
  .comprovante-tool-top {
    grid-template-columns: 1fr;
  }

  .comprovante-tool-fields {
    gap: 0.95rem;
  }

  .comprovante-tool-tip-panel {
    padding: 0.8rem 0.95rem;
  }
}

.extrato-inline-heading {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.extrato-inline-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.extrato-inline-body .row {
  --bs-gutter-y: 0.5rem;
}

.extrato-inline-body .row > [class*="col-"] {
  min-width: 0;
}

.extrato-inline-top-row {
  align-items: end;
}

.extrato-inline-switch-shell {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 0.25rem;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.extrato-inline-upload {
  padding-top: 12px;
  padding-bottom: 12px;
  min-height: 52px;
}

.extrato-inline-secondary-btn {
  gap: 0.5rem;
}

.extrato-inline-switch .form-check {
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .latam-tool-card {
    min-height: auto;
  }

  .latam-tool-card-body {
    padding: 1rem;
  }

  .latam-tool-card-btn {
    width: 100%;
  }

  .comprovante-tool-top {
    grid-template-columns: 1fr;
  }

  .comprovante-tool-fields {
    gap: 0.85rem;
  }

  .comprovante-tool-tip-panel {
    grid-template-columns: 1fr;
    gap: 0.35rem;
    padding: 0.75rem 0.85rem;
  }

  .comprovante-tool-tip-panel .tool-card-feedback-label {
    white-space: normal;
  }

  .comprovante-tool-main-field .extrato-inline-switch-shell {
    width: 100%;
    justify-content: center;
    min-height: 42px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .comprovante-result-actions {
    flex-direction: column;
  }

  .comprovante-cookie-toggle {
    min-height: 44px;
    font-size: 0.92rem;
  }

}

.extrato-inline-switch .form-check-label {
  color: var(--text-primary);
}

.extrato-inline-upload {
  min-height: 46px;
}

.extrato-inline-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  width: 100%;
  max-width: 100%;
  align-items: stretch;
}

.extrato-inline-actions .tool-card-action-btn {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding-left: 1.15rem;
  padding-right: 1.15rem;
  font-size: 0.95rem;
  font-weight: 700;
}

.extrato-inline-secondary-btn {
  box-shadow: none;
}

.extrato-inline-results {
  margin-top: 0.25rem;
}

.extrato-inline-panel-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.3rem;
  margin-bottom: 0.5rem;
}

.extrato-inline-panel-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
}

.extrato-inline-panel-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.75rem;
}

.extrato-inline-copy-btn {
  border-radius: 10px;
}

.extrato-inline-text {
  min-height: 260px;
  max-height: 460px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem 1.05rem;
  border-radius: 16px;
  border: 1px solid rgba(31, 255, 185, 0.08);
  background: rgba(5, 10, 18, 0.45);
  font-size: 0.86rem;
  line-height: 1.65;
}

@media (max-width: 1399.98px) {
  .extrato-inline-text {
    min-height: 236px;
  }
}

@media (max-width: 1199.98px) {
  .extrato-inline-body {
    gap: 0.6rem;
  }

  .extrato-inline-switch-shell {
    width: 100%;
    justify-content: center;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .extrato-inline-actions {
    gap: 0.55rem;
  }

  .extrato-inline-panel-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .extrato-inline-text {
    min-height: 220px;
    max-height: 400px;
  }
}

@media (max-width: 991.98px) {
  .extrato-inline-body {
    gap: 0.7rem;
  }

  .extrato-inline-top-row {
    align-items: stretch;
  }

  .extrato-inline-switch-shell {
    min-height: 46px;
  }

  .extrato-inline-results {
    margin-top: 0.1rem;
  }

  .extrato-inline-panel-header {
    gap: 0.4rem;
    margin-bottom: 0.65rem;
  }

  .extrato-inline-text {
    min-height: 210px;
    max-height: 360px;
  }
}

body .page-ferramentas .extrato-inline-text.extrato-edit-textarea.form-control {
  background:
    linear-gradient(180deg, rgba(21, 31, 46, 0.98) 0%, rgba(14, 22, 34, 0.98) 100%) !important;
  background-color: rgb(17, 25, 38) !important;
}

@media (max-width: 768px) {
  .extrato-inline-actions {
    grid-template-columns: 1fr;
  }

  .extrato-inline-panel-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .extrato-inline-upload {
    padding-top: 11px;
    padding-bottom: 11px;
  }

  .extrato-inline-text {
    min-height: 180px;
    max-height: 320px;
    padding: 0.9rem 0.95rem;
    font-size: 0.84rem;
    line-height: 1.58;
  }
}

@media (max-width: 575.98px) {
  .extrato-inline-body {
    gap: 0.8rem;
  }

  .extrato-inline-switch-shell {
    min-height: 42px;
  }

  .extrato-inline-actions .tool-card-action-btn {
    min-height: 48px;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .extrato-inline-panel-actions {
    gap: 0.4rem;
    margin-bottom: 0.6rem;
  }

  .extrato-inline-copy-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================================
   ADMIN PANEL
   ============================================================================ */

.page-admin {
  color: var(--text-primary);
}

.page-admin .admin-config-card {
  background: linear-gradient(180deg, rgba(15, 24, 36, 0.95), rgba(10, 18, 28, 0.9));
  border: 1px solid rgba(31, 255, 185, 0.1);
  border-radius: 20px;
}

.page-admin .admin-config-card .card-body {
  padding: 1rem 1.15rem;
}

.page-admin .admin-config-title {
  display: block;
  margin: 0;
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
}

.page-admin .admin-config-title--section {
  font-size: 1.1rem;
}

.page-admin .admin-config-desc {
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.45;
  margin-bottom: 0.55rem;
}

.page-admin .admin-config-label {
  display: inline-block;
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.4rem;
}

.page-admin .admin-config-app {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.page-admin .admin-config-app-icon {
  font-size: 1.15rem;
  line-height: 1;
}

body .page-admin .admin-config-input.form-control {
  min-height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(31, 255, 185, 0.18) !important;
  background: rgba(17, 27, 40, 0.72) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

body .page-admin .admin-config-input.form-control::placeholder {
  color: var(--text-secondary) !important;
}

body .page-admin .admin-config-input.form-control:hover {
  border-color: rgba(31, 255, 185, 0.32) !important;
  background: rgba(17, 27, 40, 0.8) !important;
}

body .page-admin .admin-config-input.form-control:focus {
  border-color: var(--accent) !important;
  background: rgba(17, 27, 40, 0.86) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 0 0 3px rgba(31, 255, 185, 0.16) !important;
}

body .page-admin .admin-config-textarea.form-control {
  min-height: 58px;
  resize: vertical;
  line-height: 1.4;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

body .page-admin #cookies-input.admin-config-textarea.form-control {
  min-height: 88px;
}

.page-admin .admin-config-hint {
  display: block;
  color: var(--text-secondary);
  font-size: 0.78rem;
  line-height: 1.35;
  margin-top: 0.35rem;
}

body .page-admin .admin-config-action.btn {
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(31, 255, 185, 0.24) !important;
  background: linear-gradient(135deg, rgba(31, 255, 185, 0.2), rgba(31, 255, 185, 0.08)) !important;
  color: var(--accent) !important;
  box-shadow: 0 12px 24px rgba(31, 255, 185, 0.12);
}

body .page-admin .admin-config-action.btn:hover,
body .page-admin .admin-config-action.btn:focus {
  background: linear-gradient(135deg, rgba(31, 255, 185, 0.3), rgba(31, 255, 185, 0.12)) !important;
  border-color: rgba(31, 255, 185, 0.38) !important;
  color: #e8f6ff !important;
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(31, 255, 185, 0.17);
}

body .page-admin .admin-config-action--ghost.btn {
  background: rgba(17, 27, 40, 0.72) !important;
  border: 1px solid rgba(31, 255, 185, 0.22) !important;
  color: var(--text-primary) !important;
  box-shadow: none;
}

body .page-admin .admin-config-action--ghost.btn:hover,
body .page-admin .admin-config-action--ghost.btn:focus {
  background: rgba(31, 255, 185, 0.12) !important;
  border-color: rgba(31, 255, 185, 0.32) !important;
  color: var(--accent) !important;
}

body .page-admin .admin-config-action:not(.w-100) {
  width: auto;
  min-width: 132px;
}

body .page-admin .input-group .admin-config-input.form-control {
  flex: 1 1 auto;
  min-width: 0;
}

body .page-admin .input-group .admin-config-action:not(.w-100) {
  flex: 0 0 auto;
  margin-left: 0.55rem;
}

.page-admin .admin-config-switch {
  transform: scale(1.08);
}

.page-admin .tab-content {
  min-width: 0;
}

.page-admin .row {
  min-width: 0;
}

.page-admin .dash-filter-dropdown,
.page-admin .dash-filter-dropdown * {
  color: #13212f !important;
}

.page-admin .dash-filter-dropdown .Select-control,
.page-admin .dash-filter-dropdown .Select__control {
  background: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  box-shadow: none !important;
}

.page-admin .dash-filter-dropdown .Select-placeholder,
.page-admin .dash-filter-dropdown .Select__placeholder,
.page-admin .dash-filter-dropdown .Select-value-label,
.page-admin .dash-filter-dropdown .Select__single-value,
.page-admin .dash-filter-dropdown .Select-value,
.page-admin .dash-filter-dropdown input,
.page-admin .dash-filter-dropdown .Select-input > input {
  color: #13212f !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #13212f !important;
}

.page-admin .dash-filter-dropdown .Select-arrow,
.page-admin .dash-filter-dropdown .Select__indicator,
.page-admin .dash-filter-dropdown .Select__dropdown-indicator,
.page-admin .dash-filter-dropdown svg {
  color: rgba(19, 33, 47, 0.72) !important;
  fill: rgba(19, 33, 47, 0.72) !important;
}

.admin-form-modal .dash-filter-dropdown,
.admin-form-modal .dash-filter-dropdown * {
  color: #13212f !important;
}

.admin-form-modal .dash-filter-dropdown .Select-control,
.admin-form-modal .dash-filter-dropdown .Select__control {
  background: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  box-shadow: none !important;
}

.admin-form-modal .dash-filter-dropdown .Select-placeholder,
.admin-form-modal .dash-filter-dropdown .Select__placeholder,
.admin-form-modal .dash-filter-dropdown .Select-value-label,
.admin-form-modal .dash-filter-dropdown .Select__single-value,
.admin-form-modal .dash-filter-dropdown .Select-value,
.admin-form-modal .dash-filter-dropdown input,
.admin-form-modal .dash-filter-dropdown .Select-input > input {
  color: #13212f !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #13212f !important;
}

.admin-form-modal .dash-filter-dropdown .Select-arrow,
.admin-form-modal .dash-filter-dropdown .Select__indicator,
.admin-form-modal .dash-filter-dropdown .Select__dropdown-indicator,
.admin-form-modal .dash-filter-dropdown svg {
  color: rgba(19, 33, 47, 0.72) !important;
  fill: rgba(19, 33, 47, 0.72) !important;
}

.admin-tabs .nav-link {
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  padding: 10px 20px;
  font-size: 0.9rem;
  transition: var(--transition-fast);
}

.admin-tabs .nav-link:hover {
  color: var(--accent);
  border-bottom-color: rgba(31, 255, 185, 0.3);
}

.admin-tabs .nav-link.active {
  color: var(--accent);
  background: rgba(31, 255, 185, 0.06);
  border-bottom: 2px solid var(--accent);
}

.admin-table-card {
  background:
    linear-gradient(180deg, rgba(15, 24, 36, 0.96), rgba(10, 18, 28, 0.9));
  border: 1px solid rgba(31, 255, 185, 0.12);
  border-radius: 22px;
  padding: 0.4rem;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.24);
}

.admin-table-card .dash-table-container {
  border-radius: 18px;
}

.admin-table-card .dash-spreadsheet-container {
  overflow: visible !important;
}

.admin-table-toolbar-action {
  display: flex;
  justify-content: flex-end;
}

.admin-table-search {
  min-height: 44px;
  border-radius: 14px;
}

.admin-table-empty {
  margin-top: 0.75rem;
  padding: 1rem 1.25rem;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.02);
}

.admin-table-toolbar-spacer {
  min-height: 1px;
}

.page-admin .dash-table-container table {
  min-width: 100%;
}

.page-admin .dash-table-container .dash-header div,
.page-admin .dash-table-container .dash-cell-value {
  line-height: 1.35;
}

.page-admin .dash-table-container td,
.page-admin .dash-table-container th {
  vertical-align: middle;
}

.page-admin .dash-table-container tbody tr:hover td,
.page-admin .dash-table-container .dash-cell:hover {
  background: rgba(11, 71, 52, 0.92) !important;
  border-color: rgba(31, 255, 185, 0.36) !important;
}

.page-admin .dash-table-container .dash-cell.column-0 {
  font-weight: 600;
  color: #f7fcff;
}

/* Dashboard tabs (Visão Geral, Operacional, Performance) — paridade com admin-tabs/ferramentas-tabs e modelo em configurações */
.dashboard-tabs .nav-link {
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  padding: 10px 20px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: var(--transition-fast);
  cursor: pointer;
}

.dashboard-tabs .nav-link:hover {
  color: var(--accent);
  border-bottom-color: rgba(31, 255, 185, 0.3);
}

.dashboard-tabs .nav-link.active {
  color: var(--accent);
  background: rgba(31, 255, 185, 0.12);
  border-bottom: 2px solid var(--accent);
  font-weight: 600;
}

/* Pós-Venda tabs — paridade visual com dashboard-tabs (accent verde, sem azul Bootstrap) */
.pos-venda-tabs .nav-link {
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  padding: 10px 20px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: var(--transition-fast);
  cursor: pointer;
}

.pos-venda-tabs .nav-link:hover {
  color: var(--accent);
  border-bottom-color: rgba(31, 255, 185, 0.3);
}

.pos-venda-tabs .nav-link.active {
  color: var(--accent);
  background: rgba(31, 255, 185, 0.12);
  border-bottom: 2px solid var(--accent);
  font-weight: 600;
}

/* Fornecimento tabs (Indicadores | Contas) — paridade com dashboard-tabs/admin-tabs; paleta do projeto (accent), não azul Bootstrap */
.fornecimento-tabs .nav-link {
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  padding: 10px 20px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: var(--transition-fast);
  cursor: pointer;
}
.fornecimento-tabs .nav-link:hover {
  color: var(--accent);
  border-bottom-color: rgba(31, 255, 185, 0.3);
}
.fornecimento-tabs .nav-link.active {
  color: var(--accent);
  background: rgba(31, 255, 185, 0.12);
  border-bottom: 2px solid var(--accent);
  font-weight: 600;
}

/* Row: tabs (left) | actions Flip/MP/All (right); tab content full width below */
.tabs-fonte-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.tabs-fonte-row-tabs {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
}
.tabs-fonte-row-tabs .dashboard-tabs {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 auto;
  width: 100%;
}
.tabs-fonte-row-tabs .dashboard-tabs .nav {
  flex: 0 0 auto;
}
.tabs-fonte-row-tabs .dashboard-tabs .tab-content {
  flex: 1 1 100%;
  width: 100%;
  margin-top: 0.25rem;
}
.tabs-fonte-row-actions {
  flex: 0 0 auto;
}

/* Ferramentas: abas em desenvolvimento (visíveis, cor fosca, não clicáveis) */
.ferramentas-tabs .nav-item.ferramentas-tab-em-desenvolvimento .nav-link {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  color: var(--text-secondary);
}

.ferramentas-tab-badge {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-secondary);
  opacity: 0.9;
}

/* Ferramentas: ícones nas abas via pseudo-elements (Bootstrap Icons) */
.ferramentas-tabs .nav-link.tab-extrator::before {
  content: "\F18F";
  font-family: "bootstrap-icons";
  margin-right: 6px;
}
.ferramentas-tabs .nav-link.tab-latam::before {
  content: "\F589";
  font-family: "bootstrap-icons";
  margin-right: 6px;
}
.ferramentas-tabs .nav-link.tab-gol::before {
  content: "\F2D1";
  font-family: "bootstrap-icons";
  margin-right: 6px;
}
.ferramentas-tabs .nav-link.tab-azul::before {
  content: "\F30D";
  font-family: "bootstrap-icons";
  margin-right: 6px;
}
.ferramentas-tabs .nav-link.tab-analise-voos::before {
  content: "\F17C";
  font-family: "bootstrap-icons";
  margin-right: 6px;
}
.ferramentas-tabs .nav-link.tab-tokens::before {
  content: "\F538";
  font-family: "bootstrap-icons";
  margin-right: 6px;
}
.ferramentas-tabs .nav-link.tab-buscador::before {
  content: "\F52A";
  font-family: "bootstrap-icons";
  margin-right: 6px;
}

/* Ferramentas: badge dinâmico para status Gmail */
.codigo-email-badge-active {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--text-primary) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
.codigo-email-badge-inactive {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}

.page-ferramentas .codigo-email-status-alert.alert {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  box-shadow: none;
}

.page-ferramentas .codigo-email-status-alert.alert .alert-heading,
.page-ferramentas .codigo-email-status-alert.alert p,
.page-ferramentas .codigo-email-status-alert.alert span {
  color: inherit;
}

.page-ferramentas .codigo-email-status-alert.alert-info,
.page-ferramentas .codigo-email-status-alert.alert-danger,
.page-ferramentas .codigo-email-status-alert.alert-warning,
.page-ferramentas .codigo-email-status-alert.alert-success {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.admin-action-btn {
  font-size: 0.85rem;
  min-height: 44px;
  padding: 0.7rem 1.1rem;
  border-radius: 14px;
  width: 100%;
  box-shadow: 0 14px 30px rgba(31, 255, 185, 0.12);
}

.admin-goal-input-group {
  align-items: stretch;
  gap: 0.7rem;
  margin-bottom: 0.55rem;
}

.admin-goal-input-group > .form-control,
.admin-goal-input-group > .admin-goal-input,
.admin-goal-input-group > .input-group-text,
.admin-goal-input-group > .btn {
  border-radius: 16px !important;
}

.admin-goal-input {
  min-height: 46px;
  font-size: 1rem;
  font-weight: 600;
  padding-inline: 0.95rem;
}

.admin-goal-save-btn {
  width: 152px;
  min-width: 152px;
  min-height: 46px;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0;
}

.admin-goal-save-btn:hover,
.admin-goal-save-btn:focus {
  transform: translateY(-1px);
}

.admin-goal-hint {
  display: block;
  color: var(--text-secondary);
  font-size: 0.8rem;
  line-height: 1.4;
  padding-left: 0.15rem;
}

.admin-switch .form-check-label {
  color: var(--text-primary);
}

@media (max-width: 768px) {
  .admin-tabs .nav-link {
    padding: 0.85rem 1rem;
  }

  .admin-table-card {
    border-radius: 18px;
    padding: 0.25rem;
  }

  .admin-table-toolbar-action {
    justify-content: stretch;
  }

  .admin-table-toolbar-action .admin-action-btn {
    width: 100%;
  }

  .admin-goal-input-group {
    gap: 0.6rem;
  }

  .admin-goal-save-btn {
    width: 100%;
    min-width: 0;
  }

  .page-admin .dash-table-container .cell-table td,
  .page-admin .dash-table-container .cell-table th {
    padding: 0.7rem 0.85rem !important;
    font-size: 0.78rem !important;
  }
}

/* ============================================================================
   ONBOARDING PAGE
   ============================================================================ */

.page-onboarding {
  color: var(--text-primary);
  animation: slideUp 0.45s ease-out;
}

.onboarding-state .alert {
  border-radius: 14px;
  border: 1px solid var(--card-border);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

.onboarding-card {
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-premium);
}

.onboarding-card-header {
  background: rgba(31, 255, 185, 0.06);
}

.onboarding-form-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
  font-weight: 600;
}

.page-onboarding .onboarding-input,
.page-onboarding input.onboarding-input[type] {
  background: var(--card-bg);
  border: 1px solid rgba(31, 255, 185, 0.16);
  border-radius: 12px;
  color: var(--text-primary);
}

.page-onboarding .onboarding-input:focus,
.page-onboarding input.onboarding-input[type]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.onboarding-select .Select__menu {
  z-index: 1100 !important;
}

.onboarding-btn-accent {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--shell-bg) !important;
  font-weight: 600;
  border-radius: 12px;
  transition: var(--transition-fast);
}
.onboarding-btn-accent:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  color: var(--shell-bg) !important;
  box-shadow: 0 4px 16px rgba(31, 255, 185, 0.3);
}

.onboarding-btn-outline {
  background: transparent !important;
  border: 1px solid var(--accent) !important;
  color: var(--accent) !important;
  font-weight: 500;
  border-radius: 10px;
  transition: var(--transition-fast);
}
.onboarding-btn-outline:hover {
  background: rgba(31, 255, 185, 0.12) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

@media (max-width: 768px) {
  .page-onboarding .financial-section-title {
    font-size: 1.25rem;
  }
}

/* ============================================================================
   NOTIFICATION CENTER
   ============================================================================ */

.notification-bell-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  position: relative;
  transition: var(--transition-fast);
  border-radius: 6px;
}

.notification-bell-btn:hover {
  background: rgba(31, 255, 185, 0.1);
}

.notification-bell-btn:hover .notification-bell-icon {
  color: var(--accent);
}

.notification-bell-icon {
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text-secondary);
  transition: color var(--transition-fast);
  font-style: normal;
}

@keyframes bell-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.notification-bell-btn.has-alerts {
  animation: bell-pulse 2s ease-in-out infinite;
}

.notification-bell-btn.has-alerts .notification-bell-icon {
  color: #ffb347;
}

.notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background-color: var(--danger);
  color: #fff;
  border-radius: 50%;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 3px 6px;
  min-width: 18px;
  text-align: center;
  line-height: 1.3;
}

/* ============================================================================
   MINI-CHART CARDS (Operacional dynamic block)
   ============================================================================ */

.mini-chart-card {
  background: var(--card-bg);
  border-radius: 16px;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-premium);
  backdrop-filter: blur(30px);
  transition: all var(--transition-smooth);
}

.mini-chart-card:hover {
  border-color: rgba(31, 255, 185, 0.15);
}

.mini-chart-card .card-body {
  padding: 0.25rem !important;
}

/* Operacional page: reserved space to prevent layout shift when block fills (CLS) */
.page-operacional .operacional-dynamic-block-wrapper {
  min-height: 220px;
}

/* Operacional page: chart height with responsive fallback and stable min-height.
   .operacional-chart-card: no animation and contain:layout to avoid CLS when entering/leaving the page. */
.page-operacional .row .chart-card {
  height: 440px;
  min-height: 400px;
  overflow: hidden;
}
.page-operacional .row .chart-card.operacional-chart-card {
  animation: none;
  contain: layout;
}

.page-operacional .row .chart-card .dash-graph {
  height: 400px;
  min-height: 380px;
}

.page-operacional .row .chart-card .dash-graph .js-plotly-plot {
  height: 100% !important;
}

/* Plotly chart responsive config */
.dash-graph .js-plotly-plot .plotly {
  width: 100% !important;
}

.dash-graph .js-plotly-plot {
  width: 100% !important;
}

/* ============================================================================
   MODAL THEME — Shared shell for all modals (detail, collaborator, localizador)
   ============================================================================ */

/* Dash applies Modal className to the outer .modal element; style inner content. */
.modal-theme .modal-content {
  background: var(--card-bg);
  color: var(--text-primary);
  border: 1px solid var(--card-border);
}

.modal-theme .modal-header,
.modal-theme .modal-footer {
  background: var(--card-bg);
  border-color: var(--card-border);
}

/* Títulos com espaçamento mínimo (evitar grudados ao conteúdo). */
.modal-theme .modal-header {
  padding: 1rem 1.25rem;
}

/* ============================================================================
   DETAIL MODAL TABLE — Alinhado à Performance: fundo do tema (não preto), hover de linha
   ============================================================================ */

/* Fundo da tabela = mesmo tom do conteúdo da modal (card-bg), sem preto. */
.modal-theme .detail-modal-table,
.modal-theme .detail-modal-table thead th,
.modal-theme .detail-modal-table tbody td {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--card-border);
}

.detail-modal-table thead th {
  padding: 8px 12px;
}

.detail-modal-table tbody tr:hover td {
  background: var(--accent-soft);
}

/* ============================================================================
   DETAIL MODAL — Full-width with contained scroll
   ============================================================================ */

/* Centralizar modal na viewport (evitar modal "no canto"). */
.detail-modal-fullwidth.modal {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.detail-modal-fullwidth .modal-dialog {
  max-width: 96vw;
  width: 96vw;
  margin: 2rem auto;
}

.detail-modal-fullwidth .modal-body {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 75vh;
  padding: 0.75rem;
}

.detail-modal-fullwidth .modal-body .table {
  margin-bottom: 0;
}

/* Currency / numeric columns: never break */
.detail-modal-fullwidth .modal-body td,
.detail-modal-fullwidth .modal-body th {
  vertical-align: middle;
}

.detail-modal-fullwidth .modal-content {
  border: 1px solid var(--border);
}

/* Preview da captura (print): centralizada na tela, tema alinhado ao app, backdrop menos opaco (ver docs/PRINT_COPY_IMPLEMENTACAO_RECUPERACAO.md) */
.block-print-preview-modal.modal {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.block-print-preview-modal .modal-dialog {
  margin: 1.75rem auto;
  max-width: 520px;
}
/* Backdrop menos opaco quando esta modal está aberta (evita cor fosca) */
body:has(.block-print-preview-modal.show) .modal-backdrop {
  opacity: 0.35;
}
.block-print-preview-modal .modal-content {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--text-primary);
  box-shadow: var(--shadow-premium, 0 8px 32px rgba(0, 0, 0, 0.3));
}
.block-print-preview-modal .modal-body,
.block-print-preview-modal .modal-footer {
  background: transparent;
  border-color: var(--card-border);
}

/* Modal de detalhe: nosso loading (sem tela branca/opaca do dcc.Loading) */
.detail-modal-loading {
  text-align: center;
  padding: 2rem 1rem;
  background: transparent;
  color: var(--text-secondary);
}
.detail-modal-loading .text-muted {
  color: var(--text-secondary) !important;
}

/* Airplane loading spinner animation */
@keyframes detail-spin {
  0% { transform: rotate(0deg) translateX(0); }
  25% { transform: rotate(15deg) translateX(4px); }
  50% { transform: rotate(0deg) translateX(0); }
  75% { transform: rotate(-15deg) translateX(-4px); }
  100% { transform: rotate(0deg) translateX(0); }
}

/* ============================================================================
   AIRPLANE LOADING — dcc.Loading custom_spinner standardization
   Used across all pages: inline cards, validacao, admin, login, modals.
   ============================================================================ */

/* When dcc.Loading is showing its custom_spinner, hide the default Dash
   circle spinners so only the airplane is visible.
   Scope this to the custom spinner wrapper so default spinners remain visible
   where no custom_spinner is in use. */
.detail-modal-loading .dash-spinner-default,
.detail-modal-loading .dash-spinner-dot,
.detail-modal-loading .dash-spinner-cube,
.detail-modal-loading .dash-spinner-circle,
.detail-modal-loading .dash-spinner-graph {
  display: none !important;
}

/* Ensure the custom_spinner container doesn't add unwanted backgrounds */
.dash-loading-callback-focused {
  background: transparent !important;
}

/* When airplane_loading wraps an inline content area, give it min-height
   so the spinner is visible and doesn't collapse */
.dash-loading > .detail-modal-loading {
  min-height: 80px;
}

.codigo-email-loading-shell {
  margin-top: 0.9rem;
}

.codigo-email-loading-shell .dash-loading > .detail-modal-loading {
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.25rem 1rem 1rem;
}

.codigo-email-loading-shell .dash-loading > .detail-modal-loading .airplane-loading,
.codigo-email-loading-shell .dash-loading > .detail-modal-loading .airplane-loading-container {
  margin-top: 1rem;
}

.codigo-email-loading-shell .dash-loading > .detail-modal-loading .bi-airplane {
  margin-top: 0.5rem;
}

.codigo-email-imap-loading-shell {
  padding-top: 1rem;
}

/* Login panel: airplane inline loading sits centered in the form area */
.login-panel-right .dash-loading > .detail-modal-loading {
  min-height: 120px;
  padding: 2.5rem 1rem;
}

/* Login button: animate on active (press) as tactile feedback */
.login-button:active {
  transform: scale(0.97);
}

/* Gerenciador de Tokens: scrollable token list */
.codigo-email-codes-output {
  max-height: 400px;
  overflow-y: auto;
}

.codigo-email-codes-output .codigo-email-status-alert {
  margin-top: 0.9rem;
}