/*
  Acabamento visual inspirado no TickTick/Todoist.
  Escopo seguro: fonte, ícones, transições, hover, foco, superfícies e botões.
  Não altera dados, Supabase, tabela financeira, rotas ou regras de negócio.
*/

:root {
  --tt-ease: cubic-bezier(0.2, 0, 0, 1);
  --tt-border: rgba(15, 23, 42, 0.075);
  --tt-border-strong: rgba(15, 23, 42, 0.12);
  --tt-hover: rgba(15, 23, 42, 0.045);
  --tt-hover-dark: rgba(148, 163, 184, 0.10);
  --tt-shadow: 0 1px 2px rgba(15, 23, 42, 0.035), 0 10px 26px -22px rgba(15, 23, 42, 0.45);
  --tt-shadow-hover: 0 2px 4px rgba(15, 23, 42, 0.055), 0 16px 34px -24px rgba(15, 23, 42, 0.50);
}

html,
body,
#root {
  font-family: Inter, "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  letter-spacing: -0.015em;
}

h1, h2, h3, h4, h5, h6,
.ui-page-title-text,
.ui-text-title {
  letter-spacing: -0.025em !important;
  font-weight: 780 !important;
}

/* Ícones TickTick-like: finos, consistentes e menos pesados. */
svg.lucide,
.lucide {
  stroke-width: 1.55 !important;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
  opacity: 0.88;
  transition: color 140ms var(--tt-ease), opacity 140ms var(--tt-ease), transform 140ms var(--tt-ease), stroke-width 140ms var(--tt-ease);
}

button:hover svg.lucide,
a:hover svg.lucide,
[role="button"]:hover svg.lucide {
  opacity: 1;
  stroke-width: 1.75 !important;
}

button:active svg.lucide,
a:active svg.lucide,
[role="button"]:active svg.lucide {
  transform: scale(0.94);
}

/* Superfícies mais limpas, menos sombra pesada. */
.ui-surface,
.ui-shell,
.ui-page-header-block,
.glass,
.glass-nav {
  border-color: var(--tt-border) !important;
  box-shadow: var(--tt-shadow) !important;
}

.ui-surface:hover,
.ui-page-header-block:hover {
  box-shadow: var(--tt-shadow-hover) !important;
}

/* Controles com cara de app de tarefas: planos, discretos, rápidos. */
button,
a,
[role="button"],
.ui-control,
.ui-btn-primary,
.ui-btn-danger,
.ui-icon-btn,
.ui-compact-filter,
.ui-chip-toggle,
.ui-pill,
.ui-segment-btn,
select,
input,
textarea {
  transition-property: background-color, border-color, color, box-shadow, opacity, transform, filter;
  transition-duration: 140ms;
  transition-timing-function: var(--tt-ease);
}

button:active,
a:active,
[role="button"]:active,
.ui-control:active,
.ui-btn-primary:active,
.ui-btn-danger:active,
.ui-icon-btn:active,
.ui-compact-filter:active,
.ui-chip-toggle:active,
.ui-pill:active,
.ui-segment-btn:active {
  transform: translateY(1px) scale(0.982);
}

.ui-control,
.ui-compact-filter,
.ui-chip-toggle,
.ui-pill-muted,
.ui-segment-control {
  background-color: rgba(248, 250, 252, 0.88) !important;
  border-color: var(--tt-border) !important;
  box-shadow: none !important;
}

.dark .ui-control,
.dark .ui-compact-filter,
.dark .ui-chip-toggle,
.dark .ui-pill-muted,
.dark .ui-segment-control {
  background-color: rgba(15, 23, 42, 0.72) !important;
  border-color: rgba(148, 163, 184, 0.14) !important;
}

.ui-control:hover,
.ui-control-hover:hover,
.ui-compact-filter:hover,
.ui-chip-toggle:hover,
.ui-pill-muted:hover,
.ui-segment-btn:hover {
  background-color: var(--tt-hover) !important;
  border-color: var(--tt-border-strong) !important;
  color: rgb(30, 41, 59) !important;
}

.dark .ui-control:hover,
.dark .ui-control-hover:hover,
.dark .ui-compact-filter:hover,
.dark .ui-chip-toggle:hover,
.dark .ui-pill-muted:hover,
.dark .ui-segment-btn:hover {
  background-color: var(--tt-hover-dark) !important;
  border-color: rgba(148, 163, 184, 0.24) !important;
  color: rgb(226, 232, 240) !important;
}

/* Primário: menos “botão neon”, mais produto. */
.ui-btn-primary {
  background-color: rgb(79, 70, 229) !important;
  box-shadow: 0 1px 2px rgba(79, 70, 229, 0.12), 0 10px 22px -16px rgba(79, 70, 229, 0.85) !important;
  font-weight: 720 !important;
}

.ui-btn-primary:hover {
  background-color: rgb(67, 56, 202) !important;
  filter: saturate(0.98) brightness(1.02);
}

/* Segmentos e chips no estilo TickTick. */
.ui-segment-active,
.ui-pill-active {
  background-color: white !important;
  color: rgb(79, 70, 229) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.075) !important;
}

.dark .ui-segment-active,
.dark .ui-pill-active {
  background-color: rgba(51, 65, 85, 0.82) !important;
  color: rgb(165, 180, 252) !important;
}

/* Inputs mais leves e precisos. */
input,
select,
textarea {
  border-color: rgba(148, 163, 184, 0.22) !important;
}

input:hover,
select:hover,
textarea:hover {
  border-color: rgba(148, 163, 184, 0.42) !important;
}

input:focus,
select:focus,
textarea:focus,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.ui-focus-ring:focus-visible,
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.20), 0 0 0 4px rgba(99, 102, 241, 0.08) !important;
}

/* Navegação inferior mais app-like. */
nav a,
.sm\:hidden.fixed.bottom-0 a {
  border-radius: 12px;
}

.sm\:hidden.fixed.bottom-0 a:hover {
  background-color: rgba(15, 23, 42, 0.04);
}

.dark .sm\:hidden.fixed.bottom-0 a:hover {
  background-color: rgba(148, 163, 184, 0.10);
}

/* Modais: mais fluidos e suaves. */
.ui-modal-sheet,
.anim-modal {
  will-change: transform, opacity;
}

@media (max-width: 640px) {
  .anim-modal { animation: ttSlideUp 260ms var(--tt-ease) both !important; }
}
@media (min-width: 641px) {
  .anim-modal { animation: ttZoomIn 180ms var(--tt-ease) both !important; }
}

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

@keyframes ttZoomIn {
  from { opacity: 0; transform: translateY(4px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Mantém acessibilidade. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}