/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Custom utilities for safe area */
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom);
}

.pt-safe {
  padding-top: env(safe-area-inset-top);
}

/* Base styles refinement */
body {
  -webkit-tap-highlight-color: transparent;
}

@keyframes swipe-hint {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(10px); }
}
.animate-swipe-hint {
  animation: swipe-hint 1.5s ease-in-out infinite;
}

/* Drag and drop para reordenar lançamentos da fatura */
.sortable-handle {
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.sortable-dragging {
  position: relative;
  z-index: 50;
  opacity: 0.9;
  background-color: var(--color-base-100, #ffffff);
  box-shadow: 0 12px 24px -8px rgb(0 0 0 / 0.3);
}

.sortable-dragging .sortable-handle {
  cursor: grabbing;
}

.sortable-dragging-active {
  user-select: none;
  -webkit-user-select: none;
}

/* Calculadora de seleção de lançamentos (card flutuante) */
[data-controller~="calculator"] [data-calculator-item] {
  cursor: pointer;
}

/* Linhas da tabela (desktop): destaque por fundo + barra lateral. Sem contorno
   por linha, para não duplicar a borda entre itens vizinhos selecionados. */
tr[data-calculator-item].calc-selected {
  background-color: color-mix(in oklab, var(--color-primary, #0ea5e9) 12%, transparent);
}

tr[data-calculator-item].calc-selected > td:first-child {
  box-shadow: inset 3px 0 0 0 var(--color-primary, #0ea5e9);
}

/* Cards (mobile): contorno individual, já que ficam espaçados entre si. */
div[data-calculator-item].calc-selected {
  outline: 2px solid var(--color-primary, #0ea5e9);
  outline-offset: -2px;
}

div[data-calculator-item].calc-selected > .card-surface {
  background-color: color-mix(in oklab, var(--color-primary, #0ea5e9) 8%, transparent);
}

/* Total do card colorido conforme o sinal do líquido */
[data-calculator-target="total"][data-sign="negative"] {
  color: var(--color-error, #ef4444);
}

[data-calculator-target="total"][data-sign="positive"] {
  color: var(--color-success, #22c55e);
}