/* FinanKey 1.5.16 — contraste integral, texturas e renderização mais leve. */

/* O cabeçalho do modal é deliberadamente escuro nos dois temas. */
.modal-sheet > header,
.modal-sheet-wide > header {
  background-image:
    linear-gradient(90deg, rgba(5, 5, 6, .96), rgba(10, 10, 11, .82) 58%, rgba(8, 7, 5, .70)),
    url("./finankey-bg-obsidian-dollar-1.5.9.webp") !important;
  background-position: center, 58% 46% !important;
  background-size: auto, cover !important;
  box-shadow: inset 0 -1px 0 rgba(214, 179, 93, .18) !important;
}

/* Obsidiana/dourado também nos blocos pretos destacados pelo usuário. */
.bill-summary-card.paid,
.bill-summary-card.pending,
.month-group > header {
  background-image:
    linear-gradient(100deg, rgba(6, 6, 7, .96), rgba(10, 10, 11, .88) 55%, rgba(8, 7, 5, .76)),
    url("./finankey-bg-obsidian-dollar-1.5.9.webp") !important;
  background-position: center, 56% 48% !important;
  background-size: auto, cover !important;
  background-repeat: no-repeat !important;
}

html[data-theme="light"] .bill-summary-card.paid,
html[data-theme="light"] .bill-summary-card.pending,
html[data-theme="light"] .month-group > header {
  color: #fff !important;
}

html[data-theme="light"] .bill-summary-card.paid :where(h1, h2, h3, p, span, small, strong, b, svg):not(.positive):not(.negative),
html[data-theme="light"] .bill-summary-card.pending :where(h1, h2, h3, p, span, small, strong, b, svg):not(.positive):not(.negative),
html[data-theme="light"] .month-group > header :where(h1, h2, h3, p, span, small, strong, b, svg):not(.positive):not(.negative) {
  color: #fff !important;
}

html[data-theme="light"] .bill-summary-card.paid :where(p, small),
html[data-theme="light"] .bill-summary-card.pending :where(p, small),
html[data-theme="light"] .month-group > header :where(p, small) {
  color: rgba(255, 255, 255, .72) !important;
}

html[data-theme="light"] .modal-sheet > header,
html[data-theme="light"] .modal-sheet > header :where(h2, p, button, svg) {
  color: #fff !important;
}

html[data-theme="light"] .modal-sheet > header p {
  color: rgba(255, 255, 255, .72) !important;
}

html[data-theme="light"] .modal-sheet > header > button {
  background: rgba(255, 255, 255, .12) !important;
  border-color: rgba(255, 255, 255, .18) !important;
}

/* Qualquer controle que permanece preto no tema claro recebe conteúdo branco. */
html[data-theme="light"] :where(
  .filter-chips button,
  .history-scope-button,
  .row-actions button,
  .bill-status-toggle.is-pending,
  .bill-edit-button
) {
  color: #fff !important;
}

html[data-theme="light"] :where(
  .filter-chips button,
  .history-scope-button,
  .row-actions button,
  .bill-status-toggle.is-pending,
  .bill-edit-button
) :where(svg, span, strong, small, b, i) {
  color: #fff !important;
}

/* Android: evita repintura contínua de fundos fixos e vidro durante o scroll. */
html[data-fk-platform="android"] body::before {
  display: none !important;
}

html[data-fk-platform="android"] .texture-layer {
  position: absolute !important;
}

html[data-fk-platform="android"] .glass-panel,
html[data-fk-platform="android"] .app-header,
html[data-fk-platform="android"] .bottom-nav,
html[data-fk-platform="android"] .modal-sheet {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Em telas grandes, reduz o custo do vidro sem eliminar a transparência. */
@media (min-width: 820px) {
  :where(.sidebar.glass-panel, .app-header.glass-panel) {
    -webkit-backdrop-filter: blur(8px) saturate(103%) !important;
    backdrop-filter: blur(8px) saturate(103%) !important;
  }
}

/* FinanKey 1.5.15 — previsão executável em Contas. */
.monthly-bills-page .page-title-row {
  flex-wrap: wrap;
}

.bills-forecast-import {
  min-height: 48px;
  border: 1px solid color-mix(in srgb, #d7b95f 54%, var(--line, transparent));
  border-radius: 15px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #0a0a0b;
  background: linear-gradient(145deg, #fff7d7, #d8b85d 72%, #b58d2e);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18), inset 0 1px rgba(255, 255, 255, .76);
  font-size: 13px;
  font-weight: 780;
  cursor: pointer;
}

.bills-forecast-import svg { width: 18px; height: 18px; }

/* No tema claro a ação executável é neutra: preto, branco e sem dourado. */
html[data-theme="light"] .bills-forecast-import:not(.is-applied) {
  color: #fff !important;
  background: linear-gradient(145deg, #262626, #080809 72%) !important;
  border-color: rgba(0, 0, 0, .72) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18), inset 0 1px rgba(255, 255, 255, .14) !important;
}

html[data-theme="light"] .bills-forecast-import:not(.is-applied) :where(svg, span) {
  color: #fff !important;
}

.bills-forecast-import.is-applied {
  color: var(--text-main, #f4f4f2);
  background: color-mix(in srgb, var(--surface-strong, #171717) 88%, #198754 12%);
  border-color: color-mix(in srgb, #198754 48%, var(--line, transparent));
  box-shadow: none;
  opacity: 1;
}

.bill-forecast-badge {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #198754;
  font-size: 10px;
  font-weight: 760;
}

.bill-forecast-badge svg { width: 12px; height: 12px; }

/* O controle de tema vira duas notas sobrepostas; a nota da frente indica o tema. */
.theme-toggle.theme-notes-button {
  position: relative !important;
  width: 52px !important;
  min-width: 52px !important;
  height: 42px !important;
  padding: 0 !important;
  overflow: visible !important;
  isolation: isolate;
  color: transparent !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.theme-toggle.theme-notes-button > svg { display: none !important; }

.theme-toggle.theme-notes-button::before,
.theme-toggle.theme-notes-button::after {
  content: "$" !important;
  position: absolute !important;
  top: 9px !important;
  left: 7px !important;
  right: auto !important;
  bottom: auto !important;
  width: 34px !important;
  height: 22px !important;
  border: 1.5px solid !important;
  border-radius: 5px !important;
  display: grid !important;
  place-items: center !important;
  font: 800 12px/1 Georgia, serif !important;
  opacity: 1 !important;
  box-sizing: border-box !important;
  transform-origin: center !important;
  transition: transform 180ms ease, filter 180ms ease, z-index 0s !important;
}

.theme-toggle.theme-notes-button::before {
  color: #111 !important;
  border-color: #171717 !important;
  background: radial-gradient(circle at center, transparent 0 5px, rgba(0, 0, 0, .14) 5.5px 6px, transparent 6.5px), linear-gradient(125deg, rgba(0, 0, 0, .04), transparent 35% 65%, rgba(0, 0, 0, .06)), #fff !important;
  box-shadow: 0 3px 7px rgba(0, 0, 0, .22) !important;
}

.theme-toggle.theme-notes-button::after {
  color: #47ef9b !important;
  border-color: #35d989 !important;
  background: radial-gradient(circle at center, transparent 0 5px, rgba(71, 239, 155, .4) 5.5px 6px, transparent 6.5px), linear-gradient(125deg, rgba(71, 239, 155, .11), transparent 35% 65%, rgba(71, 239, 155, .08)), #090b0a !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .38) !important;
}

html[data-theme="light"] .theme-toggle.theme-notes-button::before {
  z-index: 3 !important;
  transform: translate(-1px, 3px) rotate(-8deg) !important;
}

html[data-theme="light"] .theme-toggle.theme-notes-button::after {
  z-index: 2 !important;
  transform: translate(10px, -2px) rotate(8deg) !important;
  filter: saturate(.82) brightness(.82);
}

html[data-theme="dark"] .theme-toggle.theme-notes-button::before {
  z-index: 2 !important;
  transform: translate(-1px, -2px) rotate(-8deg) !important;
  filter: brightness(.72);
}

html[data-theme="dark"] .theme-toggle.theme-notes-button::after {
  z-index: 3 !important;
  transform: translate(10px, 3px) rotate(8deg) !important;
}

.theme-toggle.theme-notes-button:is(:hover, :focus-visible)::before,
.theme-toggle.theme-notes-button:is(:hover, :focus-visible)::after {
  filter: brightness(1.08) saturate(1.06);
}

@media (max-width: 819px) {
  /* O painel ocupa o viewport desde o teto; não herda alinhamento inferior nem folga do iOS. */
  .modal-backdrop {
    display: block !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .modal-sheet,
  .modal-sheet-wide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    transform: none !important;
    animation: none !important;
    padding-top: max(8px, env(safe-area-inset-top)) !important;
    scroll-padding-top: max(82px, calc(58px + env(safe-area-inset-top))) !important;
  }

  .modal-sheet > header,
  .modal-sheet-wide > header {
    top: -8px !important;
    margin-top: 0 !important;
    padding-top: max(14px, env(safe-area-inset-top)) !important;
  }

  .monthly-bills-page .page-title-row { align-items: stretch !important; }
  .bills-forecast-import { width: 100%; min-height: 52px; }

  .forecast-account-row.is-expanded {
    border-color: rgba(215, 185, 95, .34) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
  }

  .forecast-account-row.is-expanded .forecast-account-summary {
    min-height: 94px;
    padding: 17px 16px !important;
  }

  .forecast-account-details {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    padding: 18px 16px 17px !important;
  }

  .forecast-account-details .forecast-action,
  .forecast-account-details .forecast-base-amount,
  .forecast-account-details .forecast-quantity,
  .forecast-account-details .forecast-extra,
  .forecast-account-details .forecast-account-total {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .forecast-account-details > label { gap: 7px !important; }

  .forecast-account-details > label > span,
  .forecast-account-total > span {
    font-size: 12px !important;
    font-weight: 650 !important;
    letter-spacing: .01em;
  }

  .forecast-account-details select,
  .forecast-account-details input,
  .forecast-account-details .money-input {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    font-size: 16px !important;
    border-radius: 14px !important;
  }

  .forecast-account-details .money-input {
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    padding: 0 14px !important;
  }

  .forecast-account-details .money-input input {
    min-height: 50px !important;
    padding-inline: 8px 4px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .forecast-account-details .forecast-account-total {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: center !important;
    justify-items: start !important;
    gap: 4px !important;
    padding-top: 15px !important;
    border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  }

  .forecast-account-details .forecast-account-total > strong {
    grid-column: 1;
    max-width: 100% !important;
    overflow-wrap: anywhere;
    font-size: 21px !important;
  }

  .forecast-account-details .forecast-settle-button {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100% !important;
    min-height: 48px !important;
    margin-top: 8px !important;
    padding-inline: 18px !important;
  }

  html[data-theme="light"] .forecast-account-row.is-expanded {
    color: #f7f7f4 !important;
    background: linear-gradient(145deg, #222, #0b0b0c 72%) !important;
  }

  html[data-theme="light"] .forecast-account-row.is-expanded :where(.forecast-account-copy strong, .forecast-account-copy small, .forecast-account-summary-value span, .forecast-account-summary-value strong, .forecast-account-details > label > span, .forecast-account-total > span, .forecast-account-total > strong) {
    color: #f7f7f4 !important;
  }

  html[data-theme="light"] .forecast-account-row.is-expanded :where(select, input, .money-input) {
    color: #fff !important;
    background-color: #09090a !important;
    border-color: rgba(255, 255, 255, .19) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-stack {
    animation: none !important;
  }
}