/* ===== RentMS Stylesheet ===== */
:root{
  --bg:#f4f5f7;
  --panel:#ffffff;
  --ink:#1a1d23;
  --ink-2:#5b6472;
  --ink-3:#8b95a3;
  --line:#e4e7ec;
  --brand:#1e4620;
  --brand-2:#2f6b33;
  --green:#0f7b3f;
  --green-bg:#e4f5ea;
  --red:#c0392b;
  --red-bg:#fdeaea;
  --orange:#b06f00;
  --orange-bg:#fdf1dd;
  --blue:#1d5fa8;
  --blue-bg:#e6f0fb;
  --grey:#5b6472;
  --grey-bg:#eceff3;
  --radius:10px;
  --shadow:0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.05);
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg); color:var(--ink);
  font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

/* ---------- LAYOUT ---------- */
.layout{display:flex;min-height:100vh}

.sidebar{
  width:248px;flex-shrink:0;background:#12261a;color:#c9d5cc;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.brand{
  display:flex;align-items:center;gap:10px;
  padding:22px 20px;font-size:17px;font-weight:700;color:#fff;
  letter-spacing:-.02em;border-bottom:1px solid rgba(255,255,255,.07);
}
.brand-dot{width:10px;height:10px;border-radius:3px;background:#57c07d;display:inline-block}

.nav{display:flex;flex-direction:column;padding:14px 12px;gap:2px;flex:1}
.nav a{
  display:flex;align-items:center;gap:11px;
  padding:10px 12px;border-radius:8px;
  font-size:13.5px;font-weight:500;color:#a8b8ad;
  transition:.12s;
}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav a.active{background:#1f4a2c;color:#fff;font-weight:600}
.nav .ico{font-size:13px;width:16px;text-align:center;opacity:.8}

.sidebar-foot{padding:14px 12px;border-top:1px solid rgba(255,255,255,.07)}
.who{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding:0 4px}
.avatar{
  width:34px;height:34px;border-radius:8px;background:#2f6b33;color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:14px;flex-shrink:0;
}
.who-name{font-size:13px;font-weight:600;color:#fff}
.who-role{font-size:11px;color:#7e8f84}

.main{flex:1;min-width:0;display:flex;flex-direction:column}

.topbar{
  height:60px;background:#fff;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;padding:0 24px;
  position:sticky;top:0;z-index:20;
}
.page-title{font-size:16px;font-weight:650;letter-spacing:-.01em;flex:1}
.topbar-right{font-size:13px;color:var(--ink-3)}
.hamburger{display:none;background:none;border:0;font-size:19px;cursor:pointer;color:var(--ink-2)}

.content{padding:24px;flex:1;max-width:1400px;width:100%}

/* ---------- CARDS ---------- */
.card{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:18px;
}
.card-head{
  padding:15px 18px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.card-head h2{font-size:14.5px;font-weight:650;letter-spacing:-.01em}
.card-head .sub{font-size:12.5px;color:var(--ink-3);font-weight:400;margin-top:2px}
.card-body{padding:18px}
.card-body.tight{padding:0}

/* ---------- STAT TILES ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:18px}
.stat{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.stat::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grey)}
.stat.g::before{background:var(--green)}
.stat.r::before{background:var(--red)}
.stat.o::before{background:var(--orange)}
.stat.b::before{background:var(--blue)}
.stat-label{font-size:11.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.stat-value{font-size:24px;font-weight:700;margin-top:6px;letter-spacing:-.02em}
.stat-sub{font-size:12px;color:var(--ink-3);margin-top:3px}

/* ---------- TABLE ---------- */
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
thead th{
  text-align:left;padding:11px 16px;font-size:11.5px;font-weight:650;
  color:var(--ink-3);text-transform:uppercase;letter-spacing:.045em;
  background:#fafbfc;border-bottom:1px solid var(--line);white-space:nowrap;
}
tbody td{padding:12px 16px;border-bottom:1px solid #f0f2f5;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#fafbfc}
td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.t-main{font-weight:600;color:var(--ink)}
.t-sub{font-size:12px;color:var(--ink-3);margin-top:1px}
.empty{padding:44px 20px;text-align:center;color:var(--ink-3)}
.empty-ico{font-size:30px;opacity:.35;margin-bottom:8px}

/* ---------- BADGES ---------- */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:20px;font-size:11.5px;font-weight:650;
  white-space:nowrap;line-height:1.6;
}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-green {background:var(--green-bg); color:var(--green)}
.badge-red   {background:var(--red-bg);   color:var(--red)}
.badge-orange{background:var(--orange-bg);color:var(--orange)}
.badge-blue  {background:var(--blue-bg);  color:var(--blue)}
.badge-grey  {background:var(--grey-bg);  color:var(--grey)}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 15px;border-radius:8px;border:1px solid transparent;
  font-size:13px;font-weight:600;cursor:pointer;transition:.12s;
  font-family:inherit;white-space:nowrap;
}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-2)}
.btn-outline{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-outline:hover{background:#f7f8fa;border-color:#cfd5dd}
.btn-ghost{background:rgba(255,255,255,.08);color:#c9d5cc;border-color:rgba(255,255,255,.12)}
.btn-ghost:hover{background:rgba(255,255,255,.14);color:#fff}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{filter:brightness(1.08)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{filter:brightness(1.08)}
.btn-sm{padding:5px 11px;font-size:12px;border-radius:7px}
.btn-block{width:100%}
.btn-icon{padding:6px 9px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.actions{display:flex;gap:6px;flex-wrap:wrap}

/* ---------- FORMS ---------- */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.field{display:flex;flex-direction:column;gap:5px}
.field.full{grid-column:1/-1}
label{font-size:12.5px;font-weight:600;color:var(--ink-2)}
input[type=text],input[type=number],input[type=date],input[type=email],
input[type=password],input[type=tel],input[type=file],select,textarea{
  padding:9px 11px;border:1px solid var(--line);border-radius:8px;
  font-size:13.5px;font-family:inherit;background:#fff;color:var(--ink);width:100%;
  transition:.12s;
}
input:focus,select:focus,textarea:focus{
  outline:0;border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(47,107,51,.1);
}
textarea{resize:vertical;min-height:70px}
.form-foot{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--line)}
.hint{font-size:11.5px;color:var(--ink-3)}

/* ---------- ALERTS ---------- */
.alert{
  padding:11px 15px;border-radius:8px;margin-bottom:14px;
  font-size:13.5px;font-weight:500;border:1px solid;
}
.alert-success{background:var(--green-bg);color:var(--green);border-color:#bfe3cd}
.alert-error{background:var(--red-bg);color:var(--red);border-color:#f2c5c1}
.alert-info{background:var(--blue-bg);color:var(--blue);border-color:#c4dcf5}

/* ---------- MODAL ---------- */
.modal-backdrop{
  display:none;position:fixed;inset:0;background:rgba(16,24,40,.5);
  z-index:100;padding:24px;overflow-y:auto;
  backdrop-filter:blur(2px);
}
.modal-backdrop.open{display:flex;align-items:flex-start;justify-content:center}
.modal{
  background:#fff;border-radius:12px;width:100%;max-width:620px;
  box-shadow:0 20px 50px rgba(16,24,40,.2);margin:auto;
}
.modal-head{
  padding:16px 20px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
}
.modal-head h3{font-size:15px;font-weight:650}
.modal-body{padding:20px}
.x{background:none;border:0;font-size:20px;cursor:pointer;color:var(--ink-3);line-height:1;padding:0 4px}
.x:hover{color:var(--ink)}

/* ---------- PROPERTY TREE ---------- */
.bld{margin-bottom:14px;border:1px solid var(--line);border-radius:var(--radius);
     background:#fff;overflow:hidden;box-shadow:var(--shadow)}
.bld-head{
  padding:14px 18px;background:#fafbfc;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.bld-name{font-size:14.5px;font-weight:650}
.bld-addr{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.flr{border-bottom:1px solid #f0f2f5}
.flr:last-child{border-bottom:0}
.flr-head{
  padding:10px 18px;background:#fdfdfe;display:flex;align-items:center;
  justify-content:space-between;gap:10px;
}
.flr-name{font-size:12.5px;font-weight:650;color:var(--ink-2);
  text-transform:uppercase;letter-spacing:.04em}
.units{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  gap:10px;padding:14px 18px}
.unit{
  border:1px solid var(--line);border-radius:9px;padding:12px;background:#fff;
  transition:.12s;
}
.unit:hover{border-color:#cfd5dd;box-shadow:0 2px 8px rgba(16,24,40,.06)}
.unit.vacant{border-left:3px solid var(--blue)}
.unit.occupied{border-left:3px solid var(--green)}
.unit.maintenance{border-left:3px solid var(--orange)}
.unit-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.unit-no{font-size:15px;font-weight:700;letter-spacing:-.01em}
.unit-type{font-size:11.5px;color:var(--ink-3);margin-top:1px}
.unit-rent{font-size:13px;font-weight:650;margin-top:8px}
.unit-tenant{font-size:12px;color:var(--ink-2);margin-top:5px;
  padding-top:7px;border-top:1px dashed var(--line)}
.unit-acts{display:flex;gap:5px;margin-top:9px}
.rooms-in{margin-top:9px;padding-top:9px;border-top:1px dashed var(--line);
  display:flex;flex-direction:column;gap:5px}
.room-row{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:12px}

/* ---------- CHART ---------- */
.bars{display:flex;align-items:flex-end;gap:12px;height:170px;padding:10px 4px 0}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%}
.bar-fill{width:100%;max-width:44px;background:linear-gradient(180deg,#2f6b33,#1e4620);
  border-radius:5px 5px 0 0;margin-top:auto;min-height:3px;position:relative;transition:.3s}
.bar-fill:hover{filter:brightness(1.15)}
.bar-val{position:absolute;top:-19px;left:50%;transform:translateX(-50%);
  font-size:11px;font-weight:650;white-space:nowrap;color:var(--ink-2)}
.bar-lbl{font-size:11px;color:var(--ink-3);font-weight:500}

/* ---------- MISC ---------- */
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.toolbar .spacer{flex:1}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  padding:6px 13px;border-radius:20px;border:1px solid var(--line);background:#fff;
  font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:.12s;
}
.chip:hover{border-color:#cfd5dd}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.grid-2{display:grid;grid-template-columns:1.6fr 1fr;gap:18px}
.kv{display:grid;grid-template-columns:150px 1fr;gap:9px 14px;font-size:13.5px}
.kv dt{color:var(--ink-3);font-weight:500}
.kv dd{font-weight:600}
.docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.doc{border:1px solid var(--line);border-radius:9px;padding:11px;text-align:center;background:#fff}
.doc-ico{font-size:24px;opacity:.5;margin-bottom:5px}
.doc-name{font-size:12px;font-weight:600;word-break:break-word;line-height:1.35}
.doc-meta{font-size:11px;color:var(--ink-3);margin-top:3px}
.sec-title{font-size:12.5px;font-weight:650;color:var(--ink-2);text-transform:uppercase;
  letter-spacing:.05em;margin:20px 0 10px}
.sec-title:first-child{margin-top:0}

/* ---------- LOGIN ---------- */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;
  background:linear-gradient(140deg,#12261a,#1e4620 55%,#2f6b33)}
.login-card{
  background:#fff;border-radius:14px;padding:34px;width:100%;max-width:390px;
  box-shadow:0 20px 55px rgba(0,0,0,.28);
}
.login-brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:750;
  margin-bottom:5px;letter-spacing:-.02em}
.login-sub{font-size:13.5px;color:var(--ink-3);margin-bottom:24px}
.demo-box{
  margin-top:18px;padding:11px 13px;background:var(--blue-bg);border-radius:8px;
  font-size:12.5px;color:var(--blue);line-height:1.65;border:1px solid #c4dcf5;
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:960px){
  .grid-2{grid-template-columns:1fr}
}
@media(max-width:768px){
  .sidebar{position:fixed;left:-248px;z-index:50;transition:.22s;box-shadow:0 0 40px rgba(0,0,0,.3)}
  .sidebar.open{left:0}
  .hamburger{display:block}
  .content{padding:16px}
  .kv{grid-template-columns:1fr;gap:3px 0}
  .kv dt{margin-top:8px}
  .stat-value{font-size:21px}
}

/* ---------- PRINT ---------- */
@media print{
  .sidebar,.topbar,.toolbar,.actions,.btn,.modal-backdrop{display:none!important}
  .content{padding:0;max-width:none}
  .card{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
  body{background:#fff}
}