/* RF Gestão — paleta institucional
   Somente cores. Estrutura, proporções e funcionalidades permanecem intactas. */

:root {
  --rf-page: #f7f8fa;
  --rf-sidebar: #f2f3f4;
  --rf-surface: #ffffff;
  --rf-border: #e7ebf0;
  --rf-text: #172033;
  --rf-text-secondary: #667085;
  --rf-disabled: #9aa6b8;
  --rf-icon: #cbd5e1;
  --rf-primary: var(--rf-theme-primary, #17324d);
  --rf-primary-hover: var(--rf-theme-primary-dark, #12273d);
  --rf-primary-soft: var(--rf-theme-primary-soft, #eaf0f6);
  --rf-link: var(--rf-theme-primary, #1f4e79);
  --rf-success-bg: #eaf7f1;
  --rf-success: #0f7a5a;
  --rf-error-bg: #fef2f2;
  --rf-error: #ef4444;
  --rf-warning-bg: #fff7ed;
  --rf-warning: #f47820;
  --bg: var(--rf-page);
  --panel: var(--rf-surface);
  --ink: var(--rf-text);
  --muted: var(--rf-text-secondary);
  --line: var(--rf-border);
  --green: var(--rf-success);
  --green-deep: #0b6248;
  --green-soft: var(--rf-success-bg);
  --red: var(--rf-error);
  --red-soft: var(--rf-error-bg);
  --blue: var(--rf-primary);
  --blue-soft: var(--rf-primary-soft);
  --gold: var(--rf-warning);
  --gold-soft: var(--rf-warning-bg);
  --violet: var(--rf-primary);
  --violet-soft: var(--rf-primary-soft);
  --cyan: var(--rf-link);
  --cyan-soft: var(--rf-primary-soft);
  --sidebar: var(--rf-sidebar);

  /* Especificação visual "primeira dobra" — Painel financeiro dos sócios.
     Tokens novos, isolados com prefixo --rf2-, não substituem os --rf-*
     usados pelas demais views/papéis (staff/parceiro). */
  --rf2-bg: #f6f7f8;
  --rf2-card-bg: #ffffff;
  --rf2-card-border: #e1e5e9;
  --rf2-card-radius: 18px;
  --rf2-card-shadow: 0 8px 24px rgba(30, 41, 59, 0.055);
  --rf2-text: #1c2737;
  --rf2-text-secondary: #718096;
  --rf2-text-tertiary: #98a2b3;
  --rf2-navy: #173653;
  --rf2-terracotta: #b35a3c;
  --rf2-green: #60784a;
  --rf2-blue-gray: #52718b;
  --rf2-violet: #745a92;
  --rf2-alert: #8f3f2e;
  --rf2-pastel-green: #eaf4ee;
  --rf2-pastel-blue: #eaf1f7;
  --rf2-pastel-violet: #f0ebf5;
  --rf2-pastel-terracotta: #f7ece7;
  --rf2-pastel-alert: #f8ede8;
  --rf2-pastel-gray: #f1f3f5;
}

html body:not(.auth-locked) {
  color: var(--rf-text) !important;
  background: var(--rf-page) !important;
}

html body:not(.auth-locked) aside.sidebar {
  position: relative;
  isolation: isolate;
  color: #fff9f5 !important;
  background:
    radial-gradient(circle at 9% 4%, color-mix(in srgb, white 30%, transparent) 0%, color-mix(in srgb, white 9%, transparent) 18%, transparent 39%),
    radial-gradient(circle at 96% 35%, color-mix(in srgb, var(--rf-theme-primary-dark, var(--rf-theme-primary)) 25%, transparent) 0%, transparent 35%),
    radial-gradient(circle at 15% 96%, color-mix(in srgb, var(--rf-theme-accent, var(--rf-theme-primary)) 26%, transparent) 0%, transparent 32%),
    linear-gradient(155deg,
      color-mix(in srgb, var(--rf-theme-primary) 82%, white) 0%,
      var(--rf-theme-primary) 34%,
      color-mix(in srgb, var(--rf-theme-primary) 55%, var(--rf-theme-primary-dark, var(--rf-theme-primary))) 69%,
      var(--rf-theme-primary-dark, var(--rf-theme-primary)) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  box-shadow:
    0 24px 58px color-mix(in srgb, var(--rf-theme-primary-dark, var(--rf-theme-primary)) 24%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

html body:not(.auth-locked) aside.sidebar::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  opacity: 0.34 !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) !important;
  background-size: 34px 34px !important;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent 72%) !important;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent 72%) !important;
}

.login-card .brand-mark {
  color: #ffffff !important;
  background: var(--rf-primary) !important;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--rf-primary) 18%, transparent) !important;
}

html body:not(.auth-locked) aside.sidebar .brand-mark {
  color: #ffffff !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.08)) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow:
    0 10px 24px color-mix(in srgb, var(--rf-theme-primary-dark, var(--rf-theme-primary)) 20%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

html body:not(.auth-locked) .topbar h1,
html body:not(.auth-locked) .panel-head h2,
html body:not(.auth-locked) .metric strong,
html body:not(.auth-locked) .quick-action strong,
html body:not(.auth-locked) .bank-card strong,
html body:not(.auth-locked) .list-main strong,
html body:not(.auth-locked) .list-amount strong {
  color: var(--rf-text) !important;
}

html body:not(.auth-locked) .page-subtitle,
html body:not(.auth-locked) .panel-head span,
html body:not(.auth-locked) .metric small,
html body:not(.auth-locked) .list-main span,
html body:not(.auth-locked) .list-amount small,
html body:not(.auth-locked) .bank-card small,
html body:not(.auth-locked) .sync-caption {
  color: var(--rf-text-secondary) !important;
}

html body:not(.auth-locked) [disabled],
html body:not(.auth-locked) .muted,
html body:not(.auth-locked) .empty-box {
  color: var(--rf-disabled) !important;
}

html body:not(.auth-locked) aside.sidebar .brand strong {
  color: #ffffff !important;
}

html body:not(.auth-locked) aside.sidebar .brand span {
  color: rgba(255, 255, 255, 0.67) !important;
}

html body:not(.auth-locked) aside.sidebar .nav-section-label {
  color: rgba(255, 255, 255, 0.49) !important;
}

html body:not(.auth-locked) aside.sidebar .nav-item {
  position: relative !important;
  color: rgba(255, 255, 255, 0.81) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body:not(.auth-locked) aside.sidebar .nav-item::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 3px !important;
  height: 18px !important;
  border-radius: 0 4px 4px 0 !important;
  background: color-mix(in srgb, var(--rf-theme-accent, var(--rf-theme-primary)) 40%, white) !important;
  opacity: 0 !important;
  transform: translateY(-50%) scaleY(0.55) !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
  pointer-events: none !important;
}

html body:not(.auth-locked) aside.sidebar .nav-item .nav-icon {
  color: rgba(255, 255, 255, 0.81) !important;
  opacity: 1 !important;
}

html body:not(.auth-locked) aside.sidebar .nav-item.active {
  color: #ffffff !important;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0.23), rgba(255, 255, 255, 0.11)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 10px 24px color-mix(in srgb, var(--rf-theme-primary-dark, var(--rf-theme-primary)) 14%, transparent) !important;
}

html body:not(.auth-locked) aside.sidebar .nav-item.active::before {
  opacity: 1 !important;
  transform: translateY(-50%) scaleY(1) !important;
}

html body:not(.auth-locked) aside.sidebar .nav-item.active .nav-icon {
  color: #ffffff !important;
}

html body:not(.auth-locked) aside.sidebar .nav-item:hover:not(.active) {
  color: #ffffff !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.07)) !important;
}

html body:not(.auth-locked) .app-shell {
  background: var(--rf-page) !important;
}

html body:not(.auth-locked) .panel,
html body:not(.auth-locked) .metric,
html body:not(.auth-locked) .quick-action,
html body:not(.auth-locked) .bank-card,
html body:not(.auth-locked) .header-user-card,
html body:not(.auth-locked) .global-search,
html body:not(.auth-locked) .period-control,
html body:not(.auth-locked) .notification-button,
html body:not(.auth-locked) .notification-panel,
html body:not(.auth-locked) .profile-switcher,
html body:not(.auth-locked) .cashflow-grid article,
html body:not(.auth-locked) input,
html body:not(.auth-locked) select,
html body:not(.auth-locked) textarea {
  color: var(--rf-text) !important;
  background: var(--rf-surface) !important;
  border-color: var(--rf-border) !important;
}

html body:not(.auth-locked) aside.sidebar .integration-card {
  color: #fff9f5 !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.07)) !important;
  border-color: rgba(255, 255, 255, 0.11) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html body:not(.auth-locked) aside.sidebar .integration-card p {
  color: rgba(255, 255, 255, 0.75) !important;
}

html body:not(.auth-locked) input::placeholder,
html body:not(.auth-locked) textarea::placeholder {
  color: var(--rf-icon) !important;
}

html body:not(.auth-locked) .search-icon,
html body:not(.auth-locked) .notification-icon,
html body:not(.auth-locked) .panel-title-icon,
html body:not(.auth-locked) .icon-only {
  color: var(--rf-icon) !important;
}

html body:not(.auth-locked) .quick-action > span,
html body:not(.auth-locked) .panel-title-icon,
html body:not(.auth-locked) .header-avatar,
html body:not(.auth-locked) .list-avatar {
  color: var(--rf-primary) !important;
  background: var(--rf-primary-soft) !important;
}

html body:not(.auth-locked) .header-avatar {
  color: #ffffff !important;
  background: var(--rf-primary) !important;
}

html body:not(.auth-locked) .primary-button,
html body:not(.auth-locked) button.primary,
html body:not(.auth-locked) .tab-button.active {
  color: #ffffff !important;
  background: var(--rf-primary) !important;
  border-color: var(--rf-primary) !important;
}

html body:not(.auth-locked) .primary-button:hover,
html body:not(.auth-locked) button.primary:hover {
  background: var(--rf-primary-hover) !important;
  border-color: var(--rf-primary-hover) !important;
}

html body:not(.auth-locked) .secondary-button,
html body:not(.auth-locked) .ghost-button,
html body:not(.auth-locked) .link-button,
html body:not(.auth-locked) a {
  color: var(--rf-link) !important;
}

html body:not(.auth-locked) .secondary-button,
html body:not(.auth-locked) .ghost-button {
  background: var(--rf-surface) !important;
  border-color: var(--rf-border) !important;
}

html body:not(.auth-locked) .secondary-button:hover,
html body:not(.auth-locked) .ghost-button:hover,
html body:not(.auth-locked) .quick-action:hover,
html body:not(.auth-locked) .bank-card:hover {
  color: var(--rf-primary-hover) !important;
  background: var(--rf-primary-soft) !important;
  border-color: #d7e1eb !important;
}

html body:not(.auth-locked) .semantic-positive strong,
html body:not(.auth-locked) .positive,
html body:not(.auth-locked) .bank-status.synced,
html body:not(.auth-locked) .status-success {
  color: var(--rf-success) !important;
}

html body:not(.auth-locked) .semantic-positive,
html body:not(.auth-locked) .success-soft,
html body:not(.auth-locked) .status-success-soft {
  background: var(--rf-success-bg) !important;
}

html body:not(.auth-locked) .semantic-negative strong,
html body:not(.auth-locked) .negative,
html body:not(.auth-locked) .danger,
html body:not(.auth-locked) .danger-soft strong,
html body:not(.auth-locked) .result-negative strong {
  color: var(--rf-error) !important;
}

html body:not(.auth-locked) .danger-soft,
html body:not(.auth-locked) .result-negative,
html body:not(.auth-locked) .overdue-item.danger {
  background: var(--rf-error-bg) !important;
  border-color: #fee2e2 !important;
}

html body:not(.auth-locked) .warning,
html body:not(.auth-locked) .partial,
html body:not(.auth-locked) .bank-status.pending {
  color: var(--rf-warning) !important;
}

html body:not(.auth-locked) .warning-soft,
html body:not(.auth-locked) .overdue-item.partial,
html body:not(.auth-locked) .bank-card.pending {
  background: var(--rf-warning-bg) !important;
  border-color: #ffedd5 !important;
}

html body:not(.auth-locked) table,
html body:not(.auth-locked) th,
html body:not(.auth-locked) td,
html body:not(.auth-locked) .overdue-item,
html body:not(.auth-locked) .upcoming-item,
html body:not(.auth-locked) .cashflow-line,
html body:not(.auth-locked) .grid-line {
  border-color: var(--rf-border) !important;
}

html body:not(.auth-locked) th {
  color: var(--rf-text-secondary) !important;
  background: var(--rf-primary-soft) !important;
}

html body:not(.auth-locked) .green-dot,
html body:not(.auth-locked) .green-line,
html body:not(.auth-locked) .metric-sparkline.green {
  color: var(--rf-success) !important;
  background-color: var(--rf-success) !important;
}

html body:not(.auth-locked) .blue-dot,
html body:not(.auth-locked) .blue-line,
html body:not(.auth-locked) .metric-sparkline.blue {
  color: var(--rf-link) !important;
  background-color: var(--rf-link) !important;
}

html body:not(.auth-locked) .red-dot,
html body:not(.auth-locked) .red-line {
  color: var(--rf-error) !important;
  background-color: var(--rf-error) !important;
}

.login-screen {
  color: var(--rf-text) !important;
  background: var(--rf-page) !important;
}

.login-card {
  color: var(--rf-text) !important;
  background: var(--rf-surface) !important;
  border-color: var(--rf-border) !important;
}

html body:not(.auth-locked) #sidebar-toggle {
  color: rgba(255, 255, 255, 0.82) !important;
  background: transparent !important;
  border-color: transparent !important;
}

html body:not(.auth-locked) #sidebar-toggle:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
}

html body:not(.auth-locked) aside.sidebar .sidebar-user-card {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: none !important;
}

html body:not(.auth-locked) aside.sidebar .sidebar-user-monogram {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
}

html body:not(.auth-locked) aside.sidebar .sidebar-user-copy strong {
  color: #ffffff !important;
}

html body:not(.auth-locked) aside.sidebar .sidebar-user-copy small {
  color: rgba(255, 255, 255, 0.65) !important;
}

html body:not(.auth-locked) aside.sidebar .sidebar-user-exit-icon {
  color: rgba(255, 255, 255, 0.80) !important;
}

/* Scrollbar do .nav real (herdada do styles.css) fica visualmente oculta,
   igual à referência (.nav::-webkit-scrollbar{width:0}). */
html body:not(.auth-locked) aside.sidebar nav.nav::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

html body:not(.auth-locked) aside.sidebar nav.nav {
  scrollbar-width: none !important;
}