/* Kronos UX-1 — tokens e componentes globais.
   A camada é carregada depois dos estilos legados para permitir migração incremental. */
:root {
  /* Cores */
  --k-color-bg: var(--bg, #f4f6f9);
  --k-color-surface: var(--panel, #ffffff);
  --k-color-surface-muted: var(--panel-2, #f8fafc);
  --k-color-border: var(--line, #d8dee8);
  --k-color-text: var(--text, #162033);
  --k-color-text-muted: var(--muted, #667085);
  --k-color-primary: var(--navy, #1a365d);
  --k-color-primary-hover: var(--navy-mid, #2e4a8a);
  --k-color-accent: var(--gold, #c89b3c);
  --k-color-success: #16794b;
  --k-color-warning: #a95f08;
  --k-color-danger: var(--danger, #b42318);
  --k-color-info: #2e4a8a;

  /* Tipografia */
  --k-font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --k-font-title: "Montserrat", var(--k-font-family);
  --k-font-size-xs: 0.75rem;
  --k-font-size-sm: 0.875rem;
  --k-font-size-md: 1rem;
  --k-font-size-lg: 1.125rem;
  --k-font-size-xl: 1.375rem;
  --k-font-size-2xl: 1.875rem;
  --k-font-weight-normal: 400;
  --k-font-weight-medium: 500;
  --k-font-weight-semibold: 600;
  --k-font-weight-bold: 700;
  --k-line-height-tight: 1.2;
  --k-line-height-normal: 1.55;

  /* Espaçamento */
  --k-space-1: 0.25rem;
  --k-space-2: 0.5rem;
  --k-space-3: 0.75rem;
  --k-space-4: 1rem;
  --k-space-5: 1.5rem;
  --k-space-6: 2rem;
  --k-space-7: 3rem;
  --k-space-8: 4rem;

  /* Bordas e elevação */
  --k-radius-sm: 0.5rem;
  --k-radius-md: 0.75rem;
  --k-radius-lg: 1.125rem;
  --k-radius-pill: 999px;
  --k-shadow-sm: 0 1px 3px rgba(20, 32, 51, 0.08);
  --k-shadow-md: 0 8px 24px rgba(20, 32, 51, 0.12);
  --k-shadow-lg: 0 20px 48px rgba(20, 32, 51, 0.2);

  /* Layout */
  --k-content-max-width: 1200px;
  --k-header-height: 78px;
  --k-nav-height: 52px;
  --k-mobile-bottom-nav-height: 72px;
}

html {
  scroll-padding-top: calc(var(--k-header-height) + var(--k-nav-height) + var(--k-space-4));
}

body {
  font-family: var(--k-font-family);
  color: var(--k-color-text);
  background: var(--k-color-bg);
}

:where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--k-color-accent) 72%, white);
  outline-offset: 3px;
}

/* Layout */
.k-app-shell {
  width: min(100%, var(--k-content-max-width));
}

.k-page {
  min-width: 0;
}

.k-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-space-4);
}

.k-page-title,
.k-card-title {
  margin: 0;
  font-family: var(--k-font-title);
  font-weight: var(--k-font-weight-bold);
  line-height: var(--k-line-height-tight);
  color: var(--k-color-primary);
}

.k-page-title { font-size: var(--k-font-size-2xl); }
.k-card-title { font-size: var(--k-font-size-lg); }

.k-page-subtitle,
.k-field-help {
  color: var(--k-color-text-muted);
  font-size: var(--k-font-size-sm);
  line-height: var(--k-line-height-normal);
}

.k-page-actions,
.k-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--k-space-3);
}

.k-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--k-space-4);
}

.k-stack {
  display: flex;
  flex-direction: column;
  gap: var(--k-space-4);
}

/* Card */
.k-card {
  border: 1px solid var(--k-color-border);
  border-radius: var(--k-radius-lg);
  background: var(--k-color-surface);
  box-shadow: var(--k-shadow-sm);
}

.k-card-header,
.k-card-body,
.k-card-footer {
  padding: var(--k-space-4) var(--k-space-5);
}

.k-card-header,
.k-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-space-3);
}

.k-card-header { border-bottom: 1px solid var(--k-color-border); }
.k-card-footer { border-top: 1px solid var(--k-color-border); }

/* Botões */
.k-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: var(--k-space-2);
  padding: var(--k-space-2) var(--k-space-4);
  border: 1px solid transparent;
  border-radius: var(--k-radius-md);
  font: inherit;
  font-weight: var(--k-font-weight-semibold);
  line-height: 1;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.k-button--primary {
  color: #fff;
  background: var(--k-color-primary);
}

.k-button--secondary {
  color: var(--k-color-primary);
  background: var(--k-color-surface);
  border-color: var(--k-color-border);
}

.k-button--ghost {
  color: var(--k-color-primary);
  background: transparent;
}

.k-button--danger {
  color: #fff;
  background: var(--k-color-danger);
}

.k-button:disabled,
.k-button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
  filter: grayscale(0.25);
}

@media (hover: hover) {
  .k-button--primary:hover { background: var(--k-color-primary-hover); }
  .k-button--secondary:hover,
  .k-button--ghost:hover { border-color: var(--k-color-primary); background: var(--k-color-surface-muted); }
  .k-button--danger:hover { filter: brightness(0.9); }
}

/* Badges e alertas */
.k-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--k-space-1);
  width: fit-content;
  padding: 0.3rem 0.65rem;
  border-radius: var(--k-radius-pill);
  font-size: var(--k-font-size-xs);
  font-weight: var(--k-font-weight-bold);
}

.k-badge--success { color: #0b5c37; background: #dff5e9; }
.k-badge--warning { color: #7a4100; background: #fff0d5; }
.k-badge--danger { color: #8a1c13; background: #fee4e2; }
.k-badge--info { color: #1f467b; background: #e8eff9; }

.k-alert {
  padding: var(--k-space-4);
  border: 1px solid var(--k-color-border);
  border-left-width: 4px;
  border-radius: var(--k-radius-md);
  background: var(--k-color-surface);
}

.k-alert--success { border-left-color: var(--k-color-success); }
.k-alert--warning { border-left-color: var(--k-color-warning); }
.k-alert--danger { border-left-color: var(--k-color-danger); }
.k-alert--info { border-left-color: var(--k-color-info); }

/* Formulários */
.k-field {
  display: grid;
  gap: var(--k-space-2);
}

.k-field-label {
  font-size: var(--k-font-size-sm);
  font-weight: var(--k-font-weight-semibold);
  color: var(--k-color-text);
}

.k-input,
.k-select,
.k-textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--k-space-3);
  border: 1px solid var(--k-color-border);
  border-radius: var(--k-radius-md);
  color: var(--k-color-text);
  background: var(--k-color-surface);
}

.k-textarea {
  min-height: 7rem;
  resize: vertical;
}

.k-input:disabled,
.k-select:disabled,
.k-textarea:disabled {
  cursor: not-allowed;
  color: var(--k-color-text-muted);
  background: var(--k-color-surface-muted);
}

/* Estados */
.k-empty-state {
  display: grid;
  place-items: center;
  min-height: 9rem;
  padding: var(--k-space-6);
  border: 1px dashed var(--k-color-border);
  border-radius: var(--k-radius-lg);
  color: var(--k-color-text-muted);
  text-align: center;
  background: var(--k-color-surface-muted);
}

.k-skeleton {
  width: min(100%, 18rem);
  min-height: 1rem;
  border-radius: var(--k-radius-sm);
  background: linear-gradient(90deg, #e9edf3 25%, #f7f9fc 50%, #e9edf3 75%);
  background-size: 200% 100%;
  animation: k-skeleton 1.4s infinite linear;
}

@keyframes k-skeleton {
  to { background-position: -200% 0; }
}

.k-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Navegação principal */
.k-global-header {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: var(--k-header-height);
  background: color-mix(in srgb, var(--k-color-bg) 94%, transparent);
  backdrop-filter: blur(14px);
}

.k-primary-nav {
  position: sticky;
  top: var(--k-header-height);
  z-index: 39;
  min-height: var(--k-nav-height);
  padding: var(--k-space-1);
  border: 1px solid var(--k-color-border);
  border-radius: var(--k-radius-lg);
  background: color-mix(in srgb, var(--k-color-surface) 94%, transparent);
  box-shadow: var(--k-shadow-sm);
  backdrop-filter: blur(14px);
}

.k-primary-nav .app-nav-btn {
  min-height: 44px;
  gap: var(--k-space-2);
  border-radius: var(--k-radius-md);
}

.k-nav-icon {
  display: inline-grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  font-size: 1rem;
}

/* Navegação secundária */
.k-tabs {
  display: flex;
  align-items: center;
  gap: var(--k-space-2);
}

.k-secondary-nav {
  flex-wrap: wrap;
  margin-block: var(--k-space-4);
  padding-bottom: var(--k-space-2);
  border-bottom: 1px solid var(--k-color-border);
}

.k-tab,
.k-secondary-nav .finance-nav-btn {
  min-height: 44px;
  padding: var(--k-space-2) var(--k-space-4);
  border: 1px solid transparent;
  border-radius: var(--k-radius-pill);
  color: var(--k-color-text-muted);
  background: transparent;
  font: inherit;
  font-size: var(--k-font-size-sm);
  font-weight: var(--k-font-weight-semibold);
  white-space: nowrap;
}

.k-tab.active,
.k-tab[aria-current="page"],
.k-secondary-nav .finance-nav-btn.active,
.k-secondary-nav .finance-nav-btn[aria-current="page"] {
  color: #fff;
  border-color: var(--k-color-primary);
  background: var(--k-color-primary);
}

.k-subnav-mobile {
  display: none;
}

/* Modal global — aplicado como piloto ao histórico diário. */
.k-modal {
  max-width: min(92vw, 42rem);
  padding: 0;
  border: 0;
  border-radius: var(--k-radius-lg);
  box-shadow: var(--k-shadow-lg);
}

.k-modal::backdrop {
  background: rgba(10, 21, 38, 0.62);
  backdrop-filter: blur(3px);
}

.k-modal-dialog {
  border: 0;
  border-radius: inherit;
  background: var(--k-color-surface);
}

/* Drawer compartilhado da subnavegação mobile. */
.k-drawer[hidden] { display: none; }

.k-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
}

.k-drawer-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: rgba(10, 21, 38, 0.62);
}

.k-drawer-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  max-height: min(78vh, 40rem);
  padding: var(--k-space-4);
  padding-bottom: calc(var(--k-space-5) + env(safe-area-inset-bottom));
  overflow-y: auto;
  border-radius: var(--k-radius-lg) var(--k-radius-lg) 0 0;
  background: var(--k-color-surface);
  box-shadow: var(--k-shadow-lg);
}

.k-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-space-4);
  margin-bottom: var(--k-space-4);
}

.k-drawer-header h2 {
  margin: var(--k-space-1) 0 0;
  font-family: var(--k-font-title);
  color: var(--k-color-primary);
}

.k-drawer-list {
  display: grid;
  gap: var(--k-space-2);
}

.k-drawer-option {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  padding: var(--k-space-3) var(--k-space-4);
  border: 1px solid var(--k-color-border);
  border-radius: var(--k-radius-md);
  color: var(--k-color-text);
  background: var(--k-color-surface);
  text-align: left;
  font: inherit;
  font-weight: var(--k-font-weight-medium);
}

.k-drawer-option[aria-current="page"]::after {
  content: "Atual";
  color: var(--k-color-primary);
  font-size: var(--k-font-size-xs);
  font-weight: var(--k-font-weight-bold);
}

/* Ponte visual: um card financeiro piloto e estados vazios já existentes. */
.fin-card.k-card {
  border-color: var(--k-color-border);
  box-shadow: var(--k-shadow-sm);
}

.fin-empty-state.k-empty-state {
  color: var(--k-color-text-muted);
}

#dailyHistoryCard.k-section-revealed {
  display: block !important;
}

.k-drawer-open {
  overflow: hidden;
}

@media (max-width: 1024px) {
  .k-secondary-nav {
    gap: var(--k-space-1);
  }

  .k-tab,
  .k-secondary-nav .finance-nav-btn {
    padding-inline: var(--k-space-3);
    font-size: var(--k-font-size-xs);
  }
}

@media (max-width: 767px) {
  html {
    scroll-padding-top: var(--k-space-4);
  }

  body {
    padding-bottom: calc(var(--k-mobile-bottom-nav-height) + env(safe-area-inset-bottom));
  }

  .k-app-shell {
    padding-bottom: var(--k-space-5);
  }

  .k-global-header {
    position: relative;
    min-height: auto;
    backdrop-filter: none;
  }

  .k-primary-nav {
    position: fixed;
    inset: auto 0 0;
    z-index: 80;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    min-height: var(--k-mobile-bottom-nav-height);
    margin: 0;
    padding: var(--k-space-2) max(var(--k-space-2), env(safe-area-inset-right))
      calc(var(--k-space-2) + env(safe-area-inset-bottom))
      max(var(--k-space-2), env(safe-area-inset-left));
    border-width: 1px 0 0;
    border-radius: 0;
    box-shadow: 0 -8px 24px rgba(20, 32, 51, 0.12);
  }

  .k-primary-nav .app-nav-btn {
    display: flex;
    min-width: 0;
    min-height: 52px;
    flex-direction: column;
    justify-content: center;
    gap: 0.2rem;
    padding: var(--k-space-1);
    font-size: var(--k-font-size-xs);
  }

  .k-nav-icon {
    font-size: 1.15rem;
  }

  .k-secondary-nav {
    display: none;
  }

  .k-subnav-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--k-space-3);
    margin: var(--k-space-3) 0 var(--k-space-4);
    padding: var(--k-space-3) var(--k-space-4);
    border: 1px solid var(--k-color-border);
    border-radius: var(--k-radius-lg);
    background: var(--k-color-surface);
    box-shadow: var(--k-shadow-sm);
  }

  .k-subnav-mobile span {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
  }

  .k-subnav-mobile small {
    color: var(--k-color-text-muted);
    font-size: var(--k-font-size-xs);
  }

  .k-subnav-mobile strong {
    overflow: hidden;
    color: var(--k-color-primary);
    font-family: var(--k-font-title);
    font-size: var(--k-font-size-md);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .k-page-header,
  .k-card-header,
  .k-card-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .k-page-actions,
  .k-page-actions .k-button {
    width: 100%;
  }

  .k-modal {
    width: calc(100vw - var(--k-space-4));
    max-height: calc(100dvh - var(--k-space-4));
  }
}

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