/* FinanKey 1.5.9 — temas porcelana/obsidiana, sem alterações de geometria */

:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #030303;
  --surface: rgba(7, 7, 8, .82);
  --surface-2: rgba(12, 12, 13, .82);
  --surface-3: rgba(18, 18, 19, .82);
  --surface-soft: rgba(255, 255, 255, .055);
  --line: rgba(211, 178, 101, .16);
  --line-strong: rgba(225, 195, 124, .30);
  --text: #f8f8f5;
  --muted: #aaa9a4;
  --subtle: #777672;
  --silver: #f8f8f5;
  --lime: #35d07f;
  --lime-soft: rgba(53, 208, 127, .12);
  --coral: #ff5b61;
  --coral-soft: rgba(255, 91, 97, .12);
  --amber: #c9a85e;
  --gold: #c9a85e;
  --chart-1: #ff5b61;
  --chart-2: #d9444d;
  --chart-3: #a9323b;
  --chart-4: #f7f7f4;
  --chart-5: #b7b7b2;
  --chart-6: #747470;
  --chart-7: #3f3f3c;
  --chart-empty: #242424;
  --chart-income-top: #35d07f;
  --chart-income-bottom: #137c49;
  --chart-expense-top: #ff5b61;
  --chart-expense-bottom: #a72430;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f6f3;
  --surface: rgba(255, 255, 255, .82);
  --surface-2: rgba(255, 255, 255, .72);
  --surface-3: rgba(245, 245, 242, .80);
  --surface-soft: rgba(0, 0, 0, .035);
  --line: rgba(0, 0, 0, .12);
  --line-strong: rgba(0, 0, 0, .25);
  --text: #090909;
  --muted: #5f5f5c;
  --subtle: #777773;
  --silver: #111111;
  --lime: #087f4b;
  --lime-soft: rgba(8, 127, 75, .10);
  --coral: #d62839;
  --coral-soft: rgba(214, 40, 57, .10);
  --amber: #5f5f5c;
  --gold: #a68439;
  --shadow: 0 22px 62px rgba(15, 15, 15, .13);
  --chart-1: #d62839;
  --chart-2: #a91e2d;
  --chart-3: #72151f;
  --chart-4: #111111;
  --chart-5: #555552;
  --chart-6: #8e8e89;
  --chart-7: #c5c5c0;
  --chart-empty: #ddddda;
  --chart-income-top: #0a9a5a;
  --chart-income-bottom: #05643b;
  --chart-expense-top: #e13a49;
  --chart-expense-bottom: #9d1725;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
  background: #030303 !important;
}

html[data-theme="light"],
html[data-theme="light"] body {
  background: #f6f6f3 !important;
}

#root {
  background: transparent !important;
}

html[data-theme="dark"] .texture-layer,
html[data-theme="dark"] .login-shell::before {
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, .48)),
    url("/assets/finankey-bg-obsidian-dollar-1.5.9.webp") !important;
  background-color: #030303 !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

html[data-theme="light"] .texture-layer,
html[data-theme="light"] .login-shell::before {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .46)),
    url("/assets/finankey-bg-porcelain-dollar-1.5.9.webp") !important;
  background-color: #f6f6f3 !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

html[data-theme="dark"] body::before {
  opacity: .16 !important;
  background: radial-gradient(circle at 50% 0, rgba(207, 171, 90, .08), transparent 34rem) !important;
}

html[data-theme="light"] body::before {
  opacity: .18 !important;
  background: radial-gradient(circle at 50% 0, rgba(255, 255, 255, .52), transparent 34rem) !important;
}

/* Vidro e profundidade: somente pintura; nenhuma dimensão é alterada. */
html[data-theme="dark"] .glass-panel {
  color: var(--text) !important;
  background: rgba(6, 6, 7, .78) !important;
  border-color: rgba(211, 178, 101, .16) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .54), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
  backdrop-filter: blur(18px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(112%) !important;
}

html[data-theme="light"] .glass-panel {
  color: var(--text) !important;
  background: rgba(255, 255, 255, .78) !important;
  border-color: rgba(0, 0, 0, .12) !important;
  box-shadow: 0 22px 58px rgba(18, 18, 18, .12), inset 0 1px 0 rgba(255, 255, 255, .92) !important;
  backdrop-filter: blur(18px) saturate(105%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(105%) !important;
}

html[data-theme="dark"] .glass-panel::after,
html[data-theme="light"] .glass-panel::after {
  display: block !important;
  content: "" !important;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, .055), transparent 24% 72%, rgba(197, 159, 76, .035)) !important;
}

html[data-theme="light"] :where(
  .sidebar, .app-header, .privacy-card, .quick-actions button, .kpi-card,
  .analytics-card, .recent-card, .budgets-card, .simulator-card,
  .installments-overview, .installment-series-card, .debt-hero, .debt-card,
  .filter-bar, .transaction-card-full, .month-group, .safe-spend-card,
  .rule-card, .bill-summary-card, .monthly-bills-panel, .monthly-bill-row,
  .forecast-metric, .forecast-accounts-panel, .forecast-account-row,
  .future-installments-card, .hero-plan-card, .hero-plan-meta > span,
  .login-panel, .login-preview-card, .modal-sheet, .modal-sheet-wide,
  .toast, .bottom-nav
) {
  color: var(--text) !important;
  background: rgba(255, 255, 255, .76) !important;
  border-color: rgba(0, 0, 0, .12) !important;
  box-shadow: 0 18px 48px rgba(16, 16, 16, .09) !important;
}

html[data-theme="dark"] :where(
  .sidebar, .app-header, .privacy-card, .quick-actions button, .kpi-card,
  .analytics-card, .recent-card, .budgets-card, .simulator-card,
  .installments-overview, .installment-series-card, .debt-hero, .debt-card,
  .filter-bar, .transaction-card-full, .month-group, .safe-spend-card,
  .rule-card, .bill-summary-card, .monthly-bills-panel, .monthly-bill-row,
  .forecast-metric, .forecast-accounts-panel, .forecast-account-row,
  .future-installments-card, .hero-plan-card, .hero-plan-meta > span,
  .login-panel, .login-preview-card, .modal-sheet, .modal-sheet-wide,
  .toast, .bottom-nav
) {
  color: var(--text) !important;
  background: rgba(6, 6, 7, .76) !important;
  border-color: rgba(211, 178, 101, .14) !important;
  box-shadow: 0 20px 54px rgba(0, 0, 0, .42) !important;
}

html[data-theme="light"] .hero-balance {
  color: var(--text) !important;
  background: rgba(255, 255, 255, .72) !important;
  border-color: rgba(0, 0, 0, .13) !important;
  box-shadow: 0 28px 74px rgba(16, 16, 16, .13) !important;
  backdrop-filter: blur(18px) saturate(105%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(105%) !important;
}

html[data-theme="dark"] .hero-balance {
  color: var(--text) !important;
  background: rgba(4, 4, 5, .74) !important;
  border-color: rgba(211, 178, 101, .18) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .62) !important;
  backdrop-filter: blur(18px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(112%) !important;
}

html[data-theme="light"] .hero-balance::after { color: rgba(0, 0, 0, .25) !important; }
html[data-theme="dark"] .hero-balance::after { color: rgba(211, 178, 101, .34) !important; }

/* Tipografia e controles neutros do tema claro. */
html[data-theme="light"] :where(
  .brand-word, .page-title-row h1, .hero-copy h1, .hero-copy > strong,
  .hero-plan-card > strong, .hero-plan-meta strong, .section-heading h2,
  .kpi-card > strong, .bill-summary-card strong, .forecast-metric strong,
  .forecast-accounts-actions > strong, .forecast-account-total strong,
  .monthly-bill-value, .future-installments-card h2, .ept-hub-header h2,
  .future-installments-total strong, .ept-hub-total strong, .modal-sheet h2
) {
  color: #090909 !important;
}

html[data-theme="light"] :where(
  .brand-word span, .page-title-row p, .section-heading p, .hero-copy > p,
  .hero-rate small, .quick-actions small, .kpi-top small, .kpi-detail,
  .transaction-copy small, .month-group > header small, .bill-summary-card span,
  .bill-summary-card small, .monthly-bills-panel > header p, .monthly-bill-copy small,
  .forecast-metric span, .forecast-metric small, .forecast-accounts-panel > header p,
  .forecast-account-copy small, .forecast-account-row label > span,
  .forecast-account-total span, .modal-sheet p, .modal-sheet small
) {
  color: #5f5f5c !important;
}

html[data-theme="dark"] .eyebrow { color: #cdb274 !important; }
html[data-theme="light"] .eyebrow { color: #1c1c1c !important; }

html[data-theme="light"] :where(.month-switcher, .icon-button, .desktop-logout, .profile-chip, .privacy-card) {
  color: #202020 !important;
  background: rgba(255, 255, 255, .70) !important;
  border-color: rgba(0, 0, 0, .13) !important;
}

html[data-theme="dark"] :where(.month-switcher, .icon-button, .desktop-logout, .profile-chip, .privacy-card) {
  color: #deded9 !important;
  background: rgba(8, 8, 9, .72) !important;
  border-color: rgba(211, 178, 101, .15) !important;
}

html[data-theme="light"] .month-switcher .month-current { color: #090909 !important; }
html[data-theme="light"] .month-switcher button { color: #565653 !important; }
html[data-theme="light"] .month-switcher button:hover { color: #000 !important; background: rgba(0, 0, 0, .06) !important; }

html[data-theme="light"] :where(.sidebar nav button, .sidebar-logout, .bottom-nav button) {
  color: #555552 !important;
}

html[data-theme="light"] .sidebar nav button.active,
html[data-theme="light"] .bottom-nav button.active {
  color: #fff !important;
  background: #090909 !important;
  border-color: #090909 !important;
}

html[data-theme="dark"] .sidebar nav button.active,
html[data-theme="dark"] .bottom-nav button.active {
  color: #f7e6b7 !important;
  background: rgba(201, 168, 94, .12) !important;
  border-color: rgba(211, 178, 101, .30) !important;
}

html[data-theme="light"] :where(.sidebar-add, .bottom-add, .primary-button) {
  color: #fff !important;
  background: #090909 !important;
  border-color: #090909 !important;
  box-shadow: 0 13px 28px rgba(0, 0, 0, .18) !important;
}

html[data-theme="dark"] :where(.sidebar-add, .bottom-add, .primary-button) {
  color: #090909 !important;
  background: linear-gradient(145deg, #f2dfaa, #c39c45) !important;
  border-color: rgba(255, 232, 175, .68) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .42) !important;
}

html[data-theme="light"] .secondary-button {
  color: #111 !important;
  background: rgba(255, 255, 255, .72) !important;
  border-color: rgba(0, 0, 0, .18) !important;
}

html[data-theme="dark"] .secondary-button {
  color: #f5f5f2 !important;
  background: rgba(8, 8, 9, .76) !important;
  border-color: rgba(211, 178, 101, .18) !important;
}

html[data-theme="light"] .danger-button,
html[data-theme="dark"] .danger-button {
  color: #fff !important;
  background: #b91f31 !important;
  border-color: #d62839 !important;
}

html[data-theme="light"] :where(
  .search-box, .field-label input, .field-label select, .field-label textarea,
  .money-input, .suffix-input, .forecast-action select,
  .forecast-account-row input, .forecast-account-row .money-input
) {
  color: #090909 !important;
  background-color: rgba(255, 255, 255, .82) !important;
  border-color: rgba(0, 0, 0, .16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92) !important;
}

html[data-theme="dark"] :where(
  .search-box, .field-label input, .field-label select, .field-label textarea,
  .money-input, .suffix-input, .forecast-action select,
  .forecast-account-row input, .forecast-account-row .money-input
) {
  color: #f8f8f5 !important;
  background-color: rgba(3, 3, 4, .78) !important;
  border-color: rgba(211, 178, 101, .17) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

html[data-theme="light"] :where(.field-label input, .field-label textarea)::placeholder { color: #777773 !important; }
html[data-theme="light"] .field-label { color: #292927 !important; }
html[data-theme="light"] :where(input, select, textarea) { caret-color: #090909; }
html[data-theme="dark"] :where(input, select, textarea) { caret-color: #f8f8f5; }

html[data-theme="light"] :where(
  .type-selector, .entry-kind-selector, .recurrence-box, .repeat-config,
  .inss-card, .salary-deductions-box, .installment-quick-config,
  .installment-picker, .bulk-row, .info-box, .installments-overview > div,
  .installment-series-values > div, .debt-stats > div
) {
  color: #111 !important;
  background: rgba(255, 255, 255, .66) !important;
  border-color: rgba(0, 0, 0, .12) !important;
}

html[data-theme="dark"] :where(
  .type-selector, .entry-kind-selector, .recurrence-box, .repeat-config,
  .inss-card, .salary-deductions-box, .installment-quick-config,
  .installment-picker, .bulk-row, .info-box, .installments-overview > div,
  .installment-series-values > div, .debt-stats > div
) {
  color: #f7f7f4 !important;
  background: rgba(8, 8, 9, .66) !important;
  border-color: rgba(211, 178, 101, .13) !important;
}

html[data-theme="light"] :where(.type-selector button.active, .entry-kind-selector button.active, .recurrence-options button.active, .filter-chips button.active, .history-scope-button.active, .bill-filter-tabs button.active) {
  color: #fff !important;
  background: #090909 !important;
  border-color: #090909 !important;
}

html[data-theme="dark"] :where(.type-selector button.active, .entry-kind-selector button.active, .recurrence-options button.active, .filter-chips button.active, .history-scope-button.active, .bill-filter-tabs button.active) {
  color: #090909 !important;
  background: #e3c879 !important;
  border-color: #e3c879 !important;
}

/* Cores semânticas: verde apenas para entrada/positivo, vermelho para saída/negativo. */
.positive,
.transaction-icon.incoming,
.quick-icon.income,
.bill-summary-card.balance.is-positive strong,
.forecast-balance-card.is-positive strong,
.bill-status-toggle.is-paid,
.forecast-settle-button.is-paid {
  color: var(--lime) !important;
}

.negative,
.transaction-icon.outgoing,
.quick-icon.expense,
.bill-summary-card.balance.is-negative strong,
.forecast-balance-card.is-negative strong,
.form-error {
  color: var(--coral) !important;
}

.quick-icon.income {
  background: var(--lime-soft) !important;
  border-color: color-mix(in srgb, var(--lime) 26%, transparent) !important;
}

.quick-icon.expense {
  background: var(--coral-soft) !important;
  border-color: color-mix(in srgb, var(--coral) 26%, transparent) !important;
}

.bill-summary-card.paid,
.bill-summary-card.income,
.forecast-income-card,
.bill-summary-card.balance.is-positive,
.forecast-balance-card.is-positive {
  border-top-color: var(--lime) !important;
}

.bill-summary-card.pending,
.forecast-expense-card,
.bill-summary-card.balance.is-negative,
.forecast-balance-card.is-negative {
  border-top-color: var(--coral) !important;
}

html[data-theme="light"] .transaction-icon { background: rgba(255, 255, 255, .62) !important; border-color: rgba(0, 0, 0, .12) !important; }
html[data-theme="dark"] .transaction-icon { background: rgba(8, 8, 9, .70) !important; border-color: rgba(211, 178, 101, .13) !important; }

/* Gráficos: entradas verdes, saídas vermelhas e categorias auxiliares neutras. */
.donut,
.progress-ring {
  filter: none !important;
}

.chart-grid { stroke: color-mix(in srgb, var(--text) 12%, transparent) !important; }
.cash-chart text { fill: var(--muted) !important; }
.key-income { background: var(--chart-income-top) !important; }
.key-expense { background: var(--chart-expense-top) !important; }
.chart-legend span,
.legend-row span { color: var(--muted) !important; }
.legend-row strong { color: var(--text) !important; }
.donut-hole {
  color: var(--text) !important;
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
}
.future-month-column i {
  background: linear-gradient(180deg, var(--chart-expense-top), var(--chart-expense-bottom)) !important;
}

html[data-theme="light"] .series-progress i,
html[data-theme="light"] .progress-track > i {
  background: linear-gradient(90deg, #111, #777773) !important;
}

html[data-theme="dark"] .series-progress i,
html[data-theme="dark"] .progress-track > i {
  background: linear-gradient(90deg, #a9873d, #f0d993) !important;
}

html[data-theme="light"] .modal-backdrop { background: rgba(245, 245, 242, .72) !important; }
html[data-theme="dark"] .modal-backdrop { background: rgba(0, 0, 0, .74) !important; }

@media (max-width: 819px) {
  html[data-theme="dark"] .glass-panel,
  html[data-theme="light"] .glass-panel,
  html[data-theme="dark"] .hero-balance,
  html[data-theme="light"] .hero-balance {
    backdrop-filter: blur(12px) saturate(106%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(106%) !important;
  }

  html[data-theme="dark"] .texture-layer,
  html[data-theme="light"] .texture-layer,
  html[data-theme="dark"] .login-shell::before,
  html[data-theme="light"] .login-shell::before {
    background-position: 55% top !important;
  }
}