:root {
  --bg: #F5F7FB;
  --panel: #FFFFFF;
  --panel-soft: #F8FAFC;
  --border: #E4E8EF;
  --border-strong: #CFD6E1;
  --text: #2B3445;
  --muted: #6B7A90;
  --navy: #1F3A5F;
  --navy-hover: #16304F;
  --brand: #D6334B;
  --brand-soft: #FCEBEE;
  --brand-text: #B8283F;
  --accent: #185FA5;
  --green: #3B6D11;
  --green-bg: #EAF3DE;
  --yellow: #854F0B;
  --yellow-bg: #FAEEDA;
  --red: #A32D2D;
  --red-bg: #FCEBEB;
  --gray: #5F5E5A;
  --gray-bg: #F1EFE8;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-pop: 0 10px 28px rgba(16, 24, 40, 0.12);
}

* { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  direction: ltr;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

h2 { color: var(--navy); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
h3 { color: var(--navy); font-size: 16px; font-weight: 600; margin: 0 0 14px; }

/* ---------- Layout: sidebar + content ---------- */

.layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }

.sidebar {
  background: var(--panel);
  border-right: 1px solid var(--border);
  padding: 20px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.logo { display: flex; align-items: baseline; text-decoration: none; padding: 4px 10px 18px; }
.logo-sharp { font-size: 26px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; line-height: 1; }
.logo-rei { font-size: 26px; font-weight: 700; color: var(--brand); letter-spacing: 0.02em; line-height: 1; }

.side-nav { display: flex; flex-direction: column; gap: 2px; }
.nav-section {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: #8A96A8; padding: 16px 10px 6px;
}
.nav-group, .nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 8px;
  font-size: 14px; color: #4A5568; text-decoration: none;
}
.nav-group { color: var(--navy); font-weight: 600; }
.nav-item.sub { padding-left: 38px; }
.nav-item:hover { background: var(--panel-soft); color: var(--navy); }
.nav-item.active { background: var(--brand-soft); color: var(--brand-text); font-weight: 600; }
.nav-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

main { padding: 28px 32px 48px; max-width: 1480px; width: 100%; }

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--border); padding: 12px 16px; }
  .logo { padding: 4px 4px 8px; }
  .side-nav { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px; }
  .nav-section { display: none; }
  .nav-group { display: none; }
  .nav-item.sub { padding-left: 10px; }
  main { padding: 20px 16px 40px; }
}

/* ---------- Page header ---------- */

.top-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.page-title { margin: 0; }
.page-subtitle { color: var(--muted); font-size: 14px; margin: 2px 0 0; }

/* ---------- KPI cards ---------- */

.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kpi {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px; box-shadow: var(--shadow); display: flex; gap: 12px; align-items: center;
}
.kpi-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.kpi-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kpi-icon.blue { background: #E6F1FB; color: #185FA5; }
.kpi-icon.purple { background: #EEEDFE; color: #534AB7; }
.kpi-icon.teal { background: #E1F5EE; color: #0F6E56; }
.kpi-icon.coral { background: #FAECE7; color: #993C1D; }
.kpi .label { font-size: 12px; color: var(--muted); }
.kpi .value { font-size: 22px; font-weight: 700; color: var(--navy); line-height: 1.2; }

/* ---------- Tables ---------- */

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

th, td {
  padding: 11px 12px;
  text-align: left;
  border-bottom: 1px solid #EEF1F5;
  font-size: 14px;
}

th {
  color: var(--muted);
  background: var(--panel-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
thead tr:first-child th:first-child { border-top-left-radius: 12px; }
thead tr:first-child th:last-child { border-top-right-radius: 12px; }
tbody tr:last-child td { border-bottom: none; }

th.hidden-col, td.hidden-col { display: none; }

/* No overflow set here on purpose - overflow-x:auto on this wrapper breaks
   position:sticky (it makes the browser treat this box as its own scroll
   container, confining "sticky" to it instead of the page). If the table
   needs horizontal scroll, the whole page scrolls sideways instead. */
#zip-table thead th, .sticky-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel-soft);
  box-shadow: 0 1px 0 var(--border);
}
#zip-table tfoot td, .sticky-table tfoot td {
  font-weight: 600;
  color: var(--navy);
  border-top: 1px solid var(--border-strong);
  border-bottom: none;
  background: #F1F4F9;
}
tr.hidden-row { display: none; }

tbody tr:hover td { background: #F8FAFD; }

a.zip-link { color: var(--accent); text-decoration: none; font-weight: 600; }
a.zip-link:hover { text-decoration: underline; }

/* ---------- Dropdown panels ---------- */

.columns-toggle { position: relative; display: inline-block; }
.columns-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  z-index: 10;
  min-width: 210px;
  box-shadow: var(--shadow-pop);
}
.columns-panel.open { display: block; }
.columns-panel label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 4px 0;
  cursor: pointer;
}

/* ---------- Badges ---------- */

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}
.badge-not_tried { background: var(--gray-bg); color: var(--gray); }
.badge-active { background: var(--green-bg); color: var(--green); }
.badge-watchlist { background: var(--yellow-bg); color: var(--yellow); }
.badge-blacklist { background: var(--red-bg); color: var(--red); }

.badge-tier-Great { background: #E1F5EE; color: #085041; }
.badge-tier-Good { background: var(--green-bg); color: var(--green); }
.badge-tier-OK { background: var(--yellow-bg); color: var(--yellow); }
.badge-tier-Not-Good { background: #FAECE7; color: #993C1D; }
.badge-tier-Bad { background: var(--red-bg); color: var(--red); }
.badge-tier-Not-enough-data { background: var(--gray-bg); color: var(--gray); }

/* ---------- Forms and buttons ---------- */

.filters { display: flex; gap: 10px; margin-bottom: 16px; align-items: center; }

select, input[type=text], input[type=number], input[type=date], input[type=month], input[type=file], textarea {
  background: var(--panel);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 14px;
  font-family: inherit;
}
select:focus, input:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(24, 95, 165, 0.15);
}

button, .btn {
  background: var(--navy);
  color: #FFFFFF;
  border: 1px solid var(--navy);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background 0.15s, border-color 0.15s;
}
button:hover, .btn:hover { background: var(--navy-hover); border-color: var(--navy-hover); }
button.secondary, .btn.secondary { background: var(--panel); border: 1px solid var(--border-strong); color: var(--text); }
button.secondary:hover, .btn.secondary:hover { background: var(--panel-soft); border-color: #B7C0CE; }
button.danger, .btn.danger { background: var(--panel); border: 1px solid #F0B8B8; color: var(--red); }
button.danger:hover, .btn.danger:hover { background: var(--red-bg); border-color: var(--red); }

/* ---------- Cards and stats ---------- */

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.card table { box-shadow: none; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } }

.stat { text-align: center; }
.stat .value { font-size: 22px; font-weight: 700; color: var(--navy); }
.stat .label { font-size: 12px; color: var(--muted); }
.stat-row { display: flex; justify-content: space-around; gap: 10px; }

.form-row { margin-bottom: 12px; display: flex; flex-direction: column; gap: 4px; }
.form-row label { font-size: 13px; color: var(--muted); font-weight: 500; }

.muted { color: var(--muted); }
.pill-list { display: flex; gap: 6px; flex-wrap: wrap; }

.section-toggle { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; padding: 0 4px 0 0; }
.section-toggle:hover { background: none; color: var(--navy); }

/* ---------- Editable rows (Rentals) ---------- */

tr.editing .row-view { display: none; }
.row-edit { display: none; }
tr.editing .row-edit { display: inline-block; }
.row-edit-block { display: none; }
tr.editing .row-edit-block { display: block; }
.row-edit-actions { display: none; gap: 6px; }
tr.editing .row-edit-actions { display: inline-flex; }
.month-actions, .reno-actions-cell { white-space: nowrap; }

.note-btn {
  background: var(--panel); border: 1px solid var(--border-strong); color: var(--muted);
  border-radius: 5px; width: 20px; height: 20px; min-width: 20px;
  font-size: 13px; line-height: 1; cursor: pointer; padding: 0; flex-shrink: 0;
}
.note-btn:hover { background: var(--panel-soft); border-color: var(--accent); color: var(--accent); }
.note-input { width: 130px; font-size: 11px; padding: 4px 6px; margin-top: 4px; resize: vertical; font-family: inherit; }

/* ---------- Summary tiles (Rentals) ---------- */

.summary-grid { display: flex; flex-direction: column; gap: 12px; }
.summary-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 700px) { .summary-row { grid-template-columns: 1fr; } }
.summary-tile {
  background: var(--panel-soft); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 10px; text-align: center; transition: border-color 0.15s, background 0.15s;
}
.summary-tile:hover { border-color: var(--border-strong); background: var(--panel); }
.summary-tile .value { font-size: 20px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.summary-tile .label { font-size: 11px; color: var(--muted); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.summary-tile.accent { border-color: #B5D4F4; background: #EEF5FC; }
.summary-tile.accent .value { font-size: 24px; }

.profit-up { color: #1E7B34; }
.profit-down { color: #B42318; }
td.profit-up, td.profit-down { font-weight: 600; }

.summary-tile:has(.value.profit-up) { background: #EAF6EC; border-color: #A8D5B0; }
.summary-tile:has(.value.profit-down) { background: #FDECEC; border-color: #F2B8B8; }
.summary-tile:has(.value.profit-up) .label { color: #2F6B3B; }
.summary-tile:has(.value.profit-down) .label { color: #9A3A33; }

/* ---------- Finance ---------- */

button.small, .btn.small { padding: 5px 10px; font-size: 12px; }

table tfoot td { font-weight: 600; color: var(--navy); background: #F1F4F9; border-top: 1px solid var(--border-strong); border-bottom: none; }

.ch-sms { background: #EEEDFE; color: #3C3489; }
.ch-cold_call { background: #E6F1FB; color: #0C447C; }
.ch-facebook { background: #E1F5EE; color: #085041; }
.ch-shared { background: var(--gray-bg); color: var(--gray); }
.ch-general { background: var(--yellow-bg); color: var(--yellow); }

.deal-under_contract { background: var(--yellow-bg); color: var(--yellow); }
.deal-closed { background: var(--green-bg); color: var(--green); }
.deal-kept { background: #E6F1FB; color: #0C447C; }
.deal-cancelled { background: var(--gray-bg); color: var(--gray); }

.side-notes { display: flex; gap: 12px; flex-wrap: wrap; margin: -6px 0 20px; }
.side-note { background: var(--panel); border: 1px dashed var(--border-strong); border-radius: 10px; padding: 8px 14px; font-size: 13px; }
.side-note strong { color: var(--navy); margin-left: 6px; }

.funnel { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.funnel-step { background: var(--panel-soft); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; text-align: center; flex: 1; min-width: 110px; }
.funnel-step .value { font-size: 22px; font-weight: 700; color: var(--navy); }
.funnel-step .label { font-size: 12px; color: var(--muted); }
.funnel-arrow { font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap; }

.leads-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; align-items: end; }
.leads-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); font-weight: 500; }
.leads-form button { grid-column: 1 / -1; justify-self: start; }

.expense-table td { vertical-align: middle; }
.expense-table tr.add-row td { background: var(--panel-soft); }

/* ---------- Login and account ---------- */

.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 16px; }
.login-card { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-pop); padding: 36px 32px; width: 100%; max-width: 380px; text-align: center; }
.google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--border-strong); border-radius: 10px; padding: 11px 16px; color: var(--text); text-decoration: none; font-weight: 600; background: var(--panel); }
.google-btn:hover { background: var(--panel-soft); border-color: #B7C0CE; }
.google-btn svg { width: 20px; height: 20px; }
.login-error { background: var(--red-bg); color: var(--red); border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 16px; text-align: left; }

.sidebar { display: flex; flex-direction: column; }
.sidebar-user { margin-top: auto; padding: 14px 10px 0; border-top: 1px solid var(--border); }
.sidebar-user-email { font-size: 13px; color: var(--muted); margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.act-create { background: var(--green-bg); color: var(--green); }
.act-update { background: #E6F1FB; color: #0C447C; }
.act-delete { background: var(--red-bg); color: var(--red); }
.act-sign_in { background: var(--gray-bg); color: var(--gray); }
.activity-details { font-size: 13px; max-width: 520px; }
.activity-details summary { cursor: pointer; }

.form-row-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.compact-select { padding: 4px 8px; font-size: 13px; }
.file-upload-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.file-count { font-size: 12px; color: var(--muted); white-space: nowrap; }
.clip-icon { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; margin-right: 2px; }