/* Property Manager - Style */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --green: #059669;
  --green-light: #d1fae5;
  --green-dark: #047857;
  --gray-900: #111827;
  --gray-800: #1f2937;
  --gray-700: #374151;
  --gray-600: #4b5563;
  --gray-500: #6b7280;
  --gray-400: #9ca3af;
  --gray-300: #d1d5db;
  --gray-200: #e5e7eb;
  --gray-100: #f3f4f6;
  --gray-50: #f9fafb;
  --white: #ffffff;
  --red: #dc2626;
  --red-light: #fef2f2;
  --yellow: #d97706;
  --yellow-light: #fffbeb;
  --blue: #2563eb;
  --blue-light: #eff6ff;
  --sidebar-w: 260px;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',system-ui,sans-serif; background:var(--gray-100); color:var(--gray-700); line-height:1.5; }
a { text-decoration:none; color:inherit; }

/* Layout */
.layout { display:flex; min-height:100vh; }
.sidebar { width:var(--sidebar-w); background:var(--gray-900); color:var(--white); position:fixed; top:0; left:0; bottom:0; display:flex; flex-direction:column; z-index:100; transition:transform .3s; }
.sidebar-header { padding:1.25rem 1.5rem; border-bottom:1px solid var(--gray-700); display:flex; align-items:center; gap:.75rem; }
.sidebar-header .logo { width:36px; height:36px; background:var(--green); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.sidebar-header h1 { font-size:1rem; font-weight:600; }
.sidebar-header span { font-size:.75rem; color:var(--gray-400); }
.sidebar-nav { flex:1; padding:1rem 0; overflow-y:auto; }
.sidebar-nav a { display:flex; align-items:center; gap:.75rem; padding:.65rem 1.5rem; color:var(--gray-400); font-size:.875rem; font-weight:500; transition:all .15s; }
.sidebar-nav a:hover { color:var(--white); background:var(--gray-800); }
.sidebar-nav a.active { color:var(--white); background:var(--gray-800); border-left:3px solid var(--green); }
.sidebar-nav a i { width:20px; text-align:center; }
.sidebar-nav .nav-section { padding:.5rem 1.5rem; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--gray-500); margin-top:.75rem; }

.main { flex:1; margin-left:var(--sidebar-w); }
.topbar { background:var(--white); border-bottom:1px solid var(--gray-200); padding:.75rem 2rem; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:50; }
.topbar h2 { font-size:1.25rem; font-weight:600; color:var(--gray-900); }
.topbar-right { display:flex; align-items:center; gap:1rem; }
.topbar-right .btn-icon { background:none; border:none; font-size:1.1rem; color:var(--gray-500); cursor:pointer; position:relative; }
.topbar-right .badge { position:absolute; top:-4px; right:-4px; width:16px; height:16px; background:var(--red); border-radius:50%; font-size:.6rem; color:#fff; display:flex; align-items:center; justify-content:center; }
.topbar-right .avatar { width:32px; height:32px; border-radius:50%; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:600; }
.content { padding:1.5rem 2rem; }
.menu-toggle { display:none; background:none; border:none; font-size:1.25rem; color:var(--gray-700); cursor:pointer; }

/* Stats */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.stat-card { background:var(--white); border-radius:12px; padding:1.25rem; border:1px solid var(--gray-200); }
.stat-card .stat-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.stat-card .stat-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1rem; }
.stat-card .stat-icon.green { background:var(--green-light); color:var(--green); }
.stat-card .stat-icon.blue { background:var(--blue-light); color:var(--blue); }
.stat-card .stat-icon.yellow { background:var(--yellow-light); color:var(--yellow); }
.stat-card .stat-icon.red { background:var(--red-light); color:var(--red); }
.stat-card .stat-label { font-size:.75rem; color:var(--gray-500); text-transform:uppercase; letter-spacing:.03em; }
.stat-card .stat-value { font-size:1.75rem; font-weight:700; color:var(--gray-900); }
.stat-card .stat-change { font-size:.75rem; margin-top:.25rem; }
.stat-card .stat-change.up { color:var(--green); }
.stat-card .stat-change.down { color:var(--red); }

/* Cards */
.card { background:var(--white); border-radius:12px; border:1px solid var(--gray-200); }
.card-header { padding:1rem 1.25rem; border-bottom:1px solid var(--gray-200); display:flex; align-items:center; justify-content:space-between; }
.card-header h3 { font-size:.95rem; font-weight:600; color:var(--gray-900); }
.card-body { padding:1.25rem; }

/* Grid layouts */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-bottom:1.5rem; }
.grid-3 { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.5rem; margin-bottom:1.5rem; }

/* Property cards */
.property-card { border-radius:12px; overflow:hidden; transition:box-shadow .2s; }
.property-card:hover { box-shadow:0 4px 12px rgba(0,0,0,.08); }
.property-card .prop-img { height:140px; background:var(--gray-200); display:flex; align-items:center; justify-content:center; color:var(--gray-400); font-size:2rem; position:relative; }
.property-card .prop-img .prop-badge { position:absolute; top:.75rem; right:.75rem; padding:.2rem .6rem; border-radius:20px; font-size:.7rem; font-weight:600; }
.prop-badge.active { background:var(--green-light); color:var(--green-dark); }
.property-card .prop-body { padding:1rem; }
.property-card .prop-body h4 { font-size:.95rem; font-weight:600; color:var(--gray-900); margin-bottom:.25rem; }
.property-card .prop-body p { font-size:.8rem; color:var(--gray-500); }
.property-card .prop-stats { display:flex; gap:1rem; margin-top:.75rem; padding-top:.75rem; border-top:1px solid var(--gray-200); }
.property-card .prop-stat { font-size:.75rem; color:var(--gray-500); }
.property-card .prop-stat strong { color:var(--gray-700); }

/* Tables */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.85rem; }
th { text-align:left; padding:.75rem 1rem; background:var(--gray-50); color:var(--gray-500); font-weight:600; font-size:.75rem; text-transform:uppercase; letter-spacing:.03em; border-bottom:1px solid var(--gray-200); }
td { padding:.75rem 1rem; border-bottom:1px solid var(--gray-100); color:var(--gray-700); }
tr:hover td { background:var(--gray-50); }

/* Badges */
.badge-status { padding:.2rem .6rem; border-radius:20px; font-size:.7rem; font-weight:600; display:inline-block; }
.badge-status.active, .badge-status.paid, .badge-status.completed { background:var(--green-light); color:var(--green-dark); }
.badge-status.pending, .badge-status.in-progress { background:var(--yellow-light); color:var(--yellow); }
.badge-status.overdue, .badge-status.urgent, .badge-status.open { background:var(--red-light); color:var(--red); }
.badge-status.inactive { background:var(--gray-200); color:var(--gray-600); }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.5rem 1rem; border-radius:8px; font-size:.85rem; font-weight:500; border:none; cursor:pointer; transition:all .15s; }
.btn-primary { background:var(--green); color:#fff; }
.btn-primary:hover { background:var(--green-dark); }
.btn-outline { background:transparent; border:1px solid var(--gray-300); color:var(--gray-700); }
.btn-outline:hover { background:var(--gray-50); }
.btn-sm { padding:.35rem .75rem; font-size:.8rem; }
.btn-link { background:none; border:none; color:var(--green); font-size:.8rem; cursor:pointer; font-weight:500; }

/* Alerts list */
.alert-item { display:flex; align-items:flex-start; gap:.75rem; padding:.75rem 0; border-bottom:1px solid var(--gray-100); }
.alert-item:last-child { border:none; }
.alert-dot { width:8px; height:8px; border-radius:50%; margin-top:.4rem; flex-shrink:0; }
.alert-dot.red { background:var(--red); }
.alert-dot.yellow { background:var(--yellow); }
.alert-dot.green { background:var(--green); }
.alert-item .alert-text { font-size:.85rem; color:var(--gray-700); }
.alert-item .alert-meta { font-size:.75rem; color:var(--gray-400); margin-top:.15rem; }

/* Lease list */
.lease-item { display:flex; align-items:center; justify-content:space-between; padding:.6rem 0; border-bottom:1px solid var(--gray-100); }
.lease-item:last-child { border:none; }
.lease-item .tenant-name { font-size:.85rem; font-weight:500; color:var(--gray-900); }
.lease-item .lease-date { font-size:.8rem; color:var(--gray-500); }
.lease-item .days-left { font-size:.75rem; padding:.15rem .5rem; border-radius:12px; }
.days-left.urgent { background:var(--red-light); color:var(--red); }
.days-left.warning { background:var(--yellow-light); color:var(--yellow); }
.days-left.ok { background:var(--green-light); color:var(--green); }

/* Tenant avatar */
.tenant-avatar { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:600; color:#fff; flex-shrink:0; }

/* Financial charts placeholder */
.chart-placeholder { height:200px; background:var(--gray-50); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--gray-400); }
.financial-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.fin-item { text-align:center; padding:1rem; }
.fin-item .fin-label { font-size:.75rem; color:var(--gray-500); margin-bottom:.25rem; }
.fin-item .fin-value { font-size:1.5rem; font-weight:700; }
.fin-item .fin-value.income { color:var(--green); }
.fin-item .fin-value.expense { color:var(--red); }
.fin-item .fin-value.net { color:var(--blue); }

/* Progress bar */
.progress { height:8px; background:var(--gray-200); border-radius:4px; overflow:hidden; }
.progress-bar { height:100%; background:var(--green); border-radius:4px; transition:width .3s; }

/* Filter bar */
.filter-bar { display:flex; align-items:center; gap:.75rem; margin-bottom:1.25rem; flex-wrap:wrap; }
.filter-bar input, .filter-bar select { padding:.45rem .75rem; border:1px solid var(--gray-300); border-radius:8px; font-size:.85rem; font-family:inherit; background:var(--white); }
.filter-bar input { min-width:200px; }

/* Maintenance priority */
.priority-dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.priority-dot.high { background:var(--red); }
.priority-dot.medium { background:var(--yellow); }
.priority-dot.low { background:var(--green); }

/* Responsive */
@media(max-width:768px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .main { margin-left:0; }
  .menu-toggle { display:block; }
  .content { padding:1rem; }
  .topbar { padding:.75rem 1rem; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .grid-2, .grid-3 { grid-template-columns:1fr; }
  .financial-summary { grid-template-columns:1fr; }
}
@media(max-width:480px) {
  .stats-grid { grid-template-columns:1fr; }
}

/* Overlay */
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:99; }
.sidebar-overlay.show { display:block; }

/* Scrollbar */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--gray-300); border-radius:3px; }