:root {
  --rt-sidebar-width: 230px;
  --rt-topbar-height: 56px;
  --rt-sidebar-bg: #1f2937;
  --rt-sidebar-fg: #cbd5e1;
  --rt-sidebar-active: #0d6efd;
  --rt-bg: #f4f6f9;
}

html { font-size: 14px; position: relative; min-height: 100%; }
@media (min-width: 768px) { html { font-size: 16px; } }
body { background: var(--rt-bg); margin: 0; }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* ---- Topbar ---- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--rt-topbar-height);
  background: #fff; border-bottom: 1px solid #e5e7eb; z-index: 1030;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.topbar-inner { display: flex; align-items: center; height: 100%; padding: 0 16px; }
.topbar-brand { font-weight: 700; font-size: 1.2rem; color: #0d6efd; text-decoration: none; }
.topbar .nav-link, .topbar .btn-link { color: #374151; }
.topbar .nav { display: flex; align-items: center; gap: .25rem; margin: 0; list-style: none; }

/* ---- App body / sidebar ---- */
.app-body { display: flex; padding-top: var(--rt-topbar-height); }

.sidebar {
  position: fixed; top: var(--rt-topbar-height); bottom: 0; left: 0;
  width: var(--rt-sidebar-width); background: var(--rt-sidebar-bg);
  overflow-y: auto; transition: transform .2s ease, width .2s ease; z-index: 1020;
}
.sidebar-nav { display: flex; flex-direction: column; padding: 12px 8px; gap: 2px; }
.sidebar-link {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px;
  color: var(--rt-sidebar-fg); text-decoration: none; font-size: .95rem; white-space: nowrap;
}
.sidebar-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-link.active { background: var(--rt-sidebar-active); color: #fff; }
.sidebar-icon { width: 20px; text-align: center; }

.content {
  margin-left: var(--rt-sidebar-width); padding: 20px 28px; width: 100%;
  min-height: calc(100vh - var(--rt-topbar-height));
}
.app-anon .content { margin-left: 0; }

/* Collapsed sidebar (desktop): icon-only */
body.sidebar-collapsed .sidebar { width: 64px; }
body.sidebar-collapsed .sidebar .sidebar-text { display: none; }
body.sidebar-collapsed .content { margin-left: 64px; }

/* ---- Mobile ---- */
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .content { margin-left: 0; }
}

/* ---- Cards / KPI ---- */
.kpi-card { border: none; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.kpi-card .kpi-value { font-size: 2rem; font-weight: 700; line-height: 1; }
.kpi-card .kpi-label { color: #6b7280; font-size: .85rem; }

.property-card { border: none; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.08); transition: transform .1s ease; }
.property-card:hover { transform: translateY(-2px); }
.property-card .card-img-top { height: 170px; object-fit: cover; background: #e5e7eb; }

/* ---- Kanban ---- */
.kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; }
.kanban-col { background: #eef1f6; border-radius: 10px; min-width: 240px; flex: 1; padding: 10px; }
.kanban-col h6 { font-size: .8rem; text-transform: uppercase; color: #6b7280; letter-spacing: .04em; }
.kanban-card { background: #fff; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.08); cursor: grab; }
.kanban-card .lead-name { font-weight: 600; }
.kanban-card.dragging { opacity: .5; }