/* ============================================================
   Design tokens — Gestão de Imóveis
   Direção: "ficha de imóvel" — papel, tinta, ledger financeiro.
   ============================================================ */

:root {
  --color-ink: #1b2a4a;
  --color-ink-soft: #3d4a68;
  --color-paper: #f6f4ee;
  --color-card: #ffffff;
  --color-border: #e2ddd0;
  --color-muted: #7a7568;
  --color-accent: #2f5d8a;
  --color-accent-dark: #23456b;

  --status-pago-fg: #1f6f54;
  --status-pago-bg: #e4f3ec;
  --status-pendente-fg: #9a6a1f;
  --status-pendente-bg: #faf0de;
  --status-vencido-fg: #a6402f;
  --status-vencido-bg: #fbe7e2;
  --status-cancelado-fg: #6b6a5f;
  --status-cancelado-bg: #edebe3;
  --status-parcialmente_pago-fg: #2f5d8a;
  --status-parcialmente_pago-bg: #e8eef5;

  --font-display: "Lora", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
}

h1, h2, h3, .font-display {
  font-family: var(--font-display);
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.text-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.app-header {
  background: var(--color-card);
  border-bottom: 1px solid var(--color-border);
}

.app-header__brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.breadcrumb {
  font-size: 0.875rem;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.breadcrumb a { color: var(--color-ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-accent); text-decoration: underline; }
.breadcrumb__sep { color: var(--color-border); }
.breadcrumb__current { color: var(--color-ink); font-weight: 500; }

.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
}

.card-list > * + * { border-top: 1px solid var(--color-border); }

.card-row {
  display: block;
  padding: 1rem 1.25rem;
  transition: background-color 0.12s ease;
}
.card-row:hover { background: var(--color-paper); }

.btn {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  padding: 0.55rem 1rem !important;
  border-radius: 0.375rem !important;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  cursor: pointer;
  text-decoration: none !important;
  line-height: 1.2;
}

.btn-primary {
  background: var(--color-ink) !important;
  color: #fff !important;
  border: 1px solid var(--color-ink) !important;
}
.btn-primary:hover {
  background: var(--color-accent-dark) !important;
  border-color: var(--color-accent-dark) !important;
}

.btn-outline {
  background: transparent !important;
  color: var(--color-ink) !important;
  border: 1px solid var(--color-border) !important;
}
.btn-outline:hover {
  border-color: var(--color-ink) !important;
  background: var(--color-paper) !important;
}

.btn-danger {
  background: transparent !important;
  color: var(--status-vencido-fg) !important;
  border: 1px solid transparent !important;
}
.btn-danger:hover { background: var(--status-vencido-bg) !important; }

.link-quiet { color: var(--color-ink-soft); font-size: 0.875rem; text-decoration: none; }
.link-quiet:hover { color: var(--color-accent); text-decoration: underline; }

.nav-dropdown { position: relative; }
.nav-dropdown__trigger { cursor: default; }
.nav-dropdown__trigger::after { content: " ▾"; font-size: 0.7em; }

.nav-dropdown__menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  padding: 0.4rem;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  box-shadow: 0 8px 20px rgba(27, 42, 74, 0.1);
  z-index: 30;
}

.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu {
  display: block;
}

.nav-dropdown__item {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  color: var(--color-ink-soft);
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
}
.nav-dropdown__item:hover { background: var(--color-paper); color: var(--color-accent); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
}
.badge::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: currentColor;
}

.badge-pago { color: var(--status-pago-fg); background: var(--status-pago-bg); }
.badge-pendente { color: var(--status-pendente-fg); background: var(--status-pendente-bg); }
.badge-vencido { color: var(--status-vencido-fg); background: var(--status-vencido-bg); }
.badge-cancelado { color: var(--status-cancelado-fg); background: var(--status-cancelado-bg); }
.badge-parcialmente_pago { color: var(--status-parcialmente_pago-fg); background: var(--status-parcialmente_pago-bg); }

.stub {
  position: relative;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  overflow: visible;
}
.stub + .stub { margin-top: 0.75rem; }

.stub__perf { border-top: 1px dashed var(--color-border); position: relative; }
.stub__perf::before, .stub__perf::after {
  content: "";
  position: absolute;
  top: -0.4rem;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 999px;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
}
.stub__perf::before { left: -0.4rem; }
.stub__perf::after { right: -0.4rem; }

.field label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  margin-bottom: 0.3rem;
}
.field-checkbox label {
  display: inline;
  margin-bottom: 0;
}
.field input[type="checkbox"] {
  width: auto;
  border: none;
  padding: 0;
  background: none;
}
.field input, .field select, .field textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  padding: 0.55rem 0.75rem;
  font-family: var(--font-body);
  background: var(--color-card);
  color: var(--color-ink);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(47, 93, 138, 0.15);
}

.field-hint { font-size: 0.75rem; color: var(--color-muted); margin-top: 0.3rem; }

.field-error-box {
  background: var(--status-vencido-bg);
  color: var(--status-vencido-fg);
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}

.empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--color-muted); }
.empty-state__title {
  font-family: var(--font-display);
  color: var(--color-ink);
  font-size: 1.125rem;
  margin-bottom: 0.35rem;
}

a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}