/* ===================== AI Real Estate Deal Analyzer Pro — Theme v2 ===================== */
:root{
  --gold: #D4AF37;
  --ok: #34d399;
  --warn: #fbbf24;
  --bad: #f87171;
  --info: #60a5fa;
}

* { scrollbar-width: thin; scrollbar-color: #33333c #0a0a0d; }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:#0a0a0d; }
::-webkit-scrollbar-thumb{ background:#2a2a32; border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:#3a3a44; }
.no-scrollbar::-webkit-scrollbar{ display:none; }
.no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }

body{ background: #08080a; }

/* ---------- Cards (charcoal, minimal glass — matte, not heavy blur) ---------- */
.card{
  background: #101013;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 20px 22px;
  animation: fadeIn .25s ease both;
}
.card-title{ font-weight: 800; font-size: 15px; color: #f4f4f5; margin-bottom: 14px; display:flex; align-items:center; gap:8px; }
.panel{ animation: slideUp .25s ease both; }

.side-summary, .modal-card{
  background: #121216;
  border: 1px solid rgba(255,255,255,0.09);
}
.modal-card{ box-shadow: 0 20px 60px -12px rgba(0,0,0,0.7); }

.info-box{ border-left: 3px solid var(--info); background: rgba(96,165,250,0.06); font-size: 13px; color: #cbd5e1; }

/* ---------- Nav ---------- */
.navlink{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding: 9px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: #9ca3af; transition: all .15s ease; white-space: nowrap; }
.navlink:hover{ background: rgba(255,255,255,0.05); color:#e5e7eb; }
.navlink.active-nav{ background: rgba(212,175,55,0.12); color: var(--gold); border-left: 3px solid var(--gold); font-weight: 700; padding-left: 9px; }
.navlink:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- Form fields ---------- */
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size: 12px; font-weight:600; color:#9ca3af; letter-spacing:.01em; display:flex; align-items:center; gap:4px; }
input, select, textarea{
  background: #17171b;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 13.5px;
  color: #f4f4f5;
  outline: none;
  transition: all .15s ease;
  width: 100%;
  font-family: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus, input:focus, select:focus, textarea:focus{
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212,175,55,0.14);
}
input[type=range]{ padding: 0; accent-color: var(--gold); background:none; border:none; }
input[type=checkbox]{ width:16px; height:16px; accent-color: var(--gold); }
select{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23D4AF37' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 10px center; padding-right: 32px; }

/* ---------- Buttons ---------- */
.btn-gold, .btn-ghost, .doc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding: 8px 14px; border-radius: 9px; font-size: 13px; font-weight: 700; cursor:pointer; transition: all .15s ease; white-space:nowrap; }
.btn-gold{ background: var(--gold); color: #0a0a0d; }
.btn-gold:hover{ background: #e5c467; }
.btn-ghost, .doc-btn{ background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: #e5e7eb; }
.btn-ghost:hover, .doc-btn:hover{ background: rgba(255,255,255,0.08); border-color: rgba(212,175,55,0.35); color: var(--gold); }

/* ---------- Stats ---------- */
.stat{ background: #141417; border: 1px solid rgba(255,255,255,0.06); border-radius: 11px; padding: 13px 15px; transition: border-color .15s ease; cursor:default; }
.stat:hover{ border-color: rgba(212,175,55,0.3); }
.stat-label{ font-size: 11px; color:#8b8b94; font-weight:600; margin-bottom:4px; }
.stat-value{ font-size: 18px; font-weight: 800; color:#f4f4f5; font-family:'JetBrains Mono', monospace; }
.stat-value.positive, .text-ok{ color: var(--ok) !important; }
.stat-value.negative, .text-bad{ color: var(--bad) !important; }
.stat-value.caution, .text-warn{ color: var(--warn) !important; }
.text-info{ color: var(--info) !important; }

/* ---------- KPI strip ---------- */
.kpi{ background: #101013; border:1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 14px 16px; }
.kpi-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:#7c7c86; font-weight:700; margin-bottom:6px; }
.kpi-value{ font-size:20px; font-weight:900; font-family:'JetBrains Mono', monospace; color:#fff; }

/* ---------- Tables ---------- */
.tbl{ width:100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th{ text-align:left; padding:9px 10px; color:#8b8b94; font-weight:700; font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; border-bottom:1px solid rgba(255,255,255,0.08); white-space:nowrap; position: sticky; top:0; background:#101013; }
.tbl td{ padding:8px 10px; border-bottom:1px solid rgba(255,255,255,0.05); color:#e5e7eb; }
.tbl tr:hover td{ background: rgba(212,175,55,0.04); }
.tbl input, .tbl select{ padding: 5px 8px; font-size:12px; min-width: 60px; }
.tbl input.tbl-num{ width: 70px; }

/* ---------- Status badges ---------- */
.badge-buy{ color: var(--ok); }
.badge-negotiate{ color: var(--warn); }
.badge-pass{ color: var(--bad); }
.pill{ display:inline-flex; align-items:center; gap:4px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight:700; }
.pill-ok{ background: rgba(52,211,153,0.14); color: var(--ok); }
.pill-warn{ background: rgba(251,191,36,0.14); color: var(--warn); }
.pill-bad{ background: rgba(248,113,113,0.14); color: var(--bad); }
.pill-info{ background: rgba(96,165,250,0.14); color: var(--info); }

/* ---------- Report / doc buttons ---------- */
.report-btn{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; background: #131316; border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:16px; text-align:left; font-weight:700; font-size:13px; color:#e5e7eb; transition: all .15s ease; }
.report-btn:hover{ border-color: var(--gold); color: var(--gold); }

/* ---------- Toast / banners ---------- */
.toast{ background: #121216; border:1px solid rgba(212,175,55,0.35); color:#f4f4f5; padding: 12px 16px; border-radius: 10px; font-size: 13px; font-weight:600; box-shadow: 0 10px 30px -8px rgba(0,0,0,0.6); animation: slideUp .2s ease both; }

/* ---------- Checklist ---------- */
.chk{ display:flex; align-items:center; gap:10px; background: #131316; border:1px solid rgba(255,255,255,0.07); border-radius:9px; padding: 9px 11px; font-size:12.5px; cursor:pointer; transition: border-color .15s ease; }
.chk:hover{ border-color: rgba(212,175,55,0.3); }

/* ---------- Tooltips / glossary ---------- */
.glossary-icon{ display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border-radius:50%; background:rgba(212,175,55,0.18); color: var(--gold); font-size:9px; font-weight:800; cursor:help; margin-left:2px; }

/* ---------- Chart boxes ---------- */
.chart-box{ position:relative; height: 260px; }

@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes slideUp{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }

@media (max-width: 1023px){ #sidebar.open{ transform: translateX(0); } }

/* ---------- Print styles ---------- */
.print-only{ display:none; }
@media print{
  body{ background:#fff !important; color:#111 !important; }
  .no-print{ display:none !important; }
  #sidebar, header, .kpi-strip{ display:none !important; }
  main{ max-width:100% !important; padding:0 !important; margin:0 !important; }
  .panel{ display:none !important; }
  .print-only{ display:block !important; color:#111; }
  .print-only h1{ font-size:20px; font-weight:800; margin-bottom:4px; }
  .print-only h2{ font-size:14px; font-weight:800; margin-top:16px; border-bottom:1px solid #ccc; padding-bottom:4px; }
  .print-only table{ width:100%; border-collapse:collapse; font-size:11px; }
  .print-only td, .print-only th{ border:1px solid #ddd; padding:4px 6px; text-align:left; }
  .print-only .pb-avoid{ break-inside: avoid; }
}