:root {
  --brand-navy: #0B2545;
  --brand-navy-dark: #071A33;
  --brand-navy-light: #163E66;
  --brand-orange: #F97316;
  --brand-orange-dark: #EA580C;
  --brand-white: #FFFFFF;
}

* { scrollbar-width: thin; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }

.brand-gradient {
  background: linear-gradient(135deg, var(--brand-navy-dark) 0%, var(--brand-navy) 55%, var(--brand-navy-light) 100%);
}

.sidebar-link {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.55rem 0.9rem; border-radius: 0.5rem;
  color: #e2e8f0; font-size: 0.875rem; font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
  cursor: pointer; white-space: nowrap;
}
.sidebar-link:hover { background: rgba(255,255,255,0.08); color: #fff; }
.sidebar-link.active { background: rgba(255,255,255,0.16); color: #fff; }
.sidebar-link i { width: 1.1rem; text-align: center; }

.stat-card {
  background: #fff; border-radius: 0.85rem; padding: 1.1rem 1.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  border: 1px solid #eef0f3;
}

.badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; }
.badge-green { background: #dcfce7; color: #166534; }
.badge-amber { background: #fef3c7; color: #92400e; }
.badge-red { background: #fee2e2; color: #991b1b; }
.badge-blue { background: #dbeafe; color: #1e40af; }
.badge-gray { background: #f1f5f9; color: #475569; }
.badge-purple { background: #ede9fe; color: #5b21b6; }

.data-table th { position: sticky; top: 0; background: #f8fafc; }
.data-table tbody tr:hover { background: #f8fafc; }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,0.5);
  display: flex; align-items: center; justify-content: center; z-index: 60; padding: 1rem;
}
.modal-box {
  background: #fff; border-radius: 0.9rem; max-width: 640px; width: 100%;
  max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

.tab-btn { padding: 0.45rem 0.9rem; border-radius: 0.5rem; font-size: 0.82rem; font-weight: 600; color: #64748b; cursor: pointer; }
.tab-btn.active { background: #fff7ed; color: var(--brand-orange-dark); }

.btn-brand {
  background: var(--brand-orange); color: #fff;
  transition: background 0.15s ease;
}
.btn-brand:hover { background: var(--brand-orange-dark); }
.text-brand { color: var(--brand-navy); }
.link-brand { color: var(--brand-orange-dark); }

.toast {
  position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 80;
  background: #1e293b; color: #fff; padding: 0.65rem 1.1rem; border-radius: 0.6rem;
  font-size: 0.85rem; box-shadow: 0 8px 24px rgba(0,0,0,0.25); animation: toast-in 0.2s ease;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.fab-search::placeholder { color: #94a3b8; }

.kpi-icon { width: 2.6rem; height: 2.6rem; border-radius: 0.65rem; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; }

/* ===================== Print / "PDF export" support =====================
   Cloudflare Workers can't run a real PDF-generation library, so the established pattern across
   the app (receipts, landlord reports, lease agreements) is: render a clean printable view in
   the DOM, mark it with .print-area, then let the user's browser Print dialog "Save as PDF".
   This block hides everything else on the page when printing, so only the marked content shows
   up on the printed page/PDF instead of the whole app chrome (sidebar, buttons, modal overlay). */
@media print {
  body * { visibility: hidden; }
  .print-area, .print-area * { visibility: visible; }
  .print-area {
    position: absolute; top: 0; left: 0; width: 100%; margin: 0; padding: 1.5rem;
    box-shadow: none !important; border: none !important;
  }
  .no-print { display: none !important; }
  .modal-overlay { position: static; background: none; padding: 0; }
  .modal-box { box-shadow: none; max-width: 100%; max-height: none; overflow: visible; }
}