/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --ink:#15201B;
  --paper:#F7F4EC;
  --paper-raised:#FFFFFF;
  --green:#2F6F4F;
  --green-deep:#1F4D38;
  --rust:#C0612B;
  --rust-soft:#F3E3D6;
  --line:#E8E2D2;
  --success:#1F8A6B;
  --success-soft:#E1F0E8;
  --pending-soft:#F3E3D6;
  --partial-soft:#FBEFD0;
  --partial:#A87A12;
  --muted:#6B6457;
  --danger:#B43B2E;
  --danger-soft:#F6E0DC;

  --font-display:'Fraunces', serif;
  --font-body:'Inter', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --radius:10px;
  --radius-sm:6px;
  --shadow-sm: 0 1px 2px rgba(21,32,27,0.06);
  --shadow-md: 0 4px 16px rgba(21,32,27,0.10);
  --shadow-lg: 0 12px 32px rgba(21,32,27,0.16);

  --sidebar-w: 248px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; margin:0; letter-spacing:-0.01em;}
.mono{font-family:var(--font-mono);}
a{color:inherit;}
button{font-family:var(--font-body); cursor:pointer;}
input,select,textarea{font-family:var(--font-body);}
*:focus-visible{outline:2px solid var(--green); outline-offset:2px; border-radius:4px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-thumb{background:var(--line); border-radius:6px;}
::-webkit-scrollbar-track{background:transparent;}

/* ============================================================
   LOGIN SCREEN
   ============================================================ */
.login-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(900px 600px at 15% -10%, rgba(47,111,79,0.10), transparent 60%),
    radial-gradient(700px 500px at 110% 110%, rgba(192,97,43,0.08), transparent 60%),
    var(--paper);
}
.login-card{
  width:100%;
  max-width:420px;
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow-lg);
  padding:36px 30px;
  animation:rise 0.5s ease both;
}
@keyframes rise{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
.login-mark{
  display:flex; align-items:center; gap:10px; margin-bottom:24px;
}
.login-mark .stamp-mark{
  width:40px; height:40px; border-radius:9px;
  background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:19px;
  transform:rotate(-4deg); flex-shrink:0;
}
.login-mark .wordmark{font-size:20px; line-height:1.25;}
.login-mark .wordmark span{color:var(--green); font-style:italic;}
.login-card h1{font-size:26px; margin-bottom:6px;}
.login-sub{color:var(--muted); font-size:14px; margin-bottom:26px; line-height:1.45;}
.field{margin-bottom:16px;}
.field label{
  display:block; font-size:12.5px; font-weight:600; text-transform:uppercase;
  letter-spacing:0.04em; color:var(--muted); margin-bottom:7px;
}
.field input{
  width:100%; padding:13px 14px; border:1.5px solid var(--line);
  border-radius:var(--radius-sm); font-size:16px; background:var(--paper-raised);
  transition:border-color .15s ease;
}
.field input:focus{border-color:var(--green); outline:none;}

/* Icon + input combined row — icon (and, for the password field, the
   show/hide toggle) live inside the same bordered box as the input, so the
   whole thing reads as one clear field instead of loose parts. */
.input-icon-row{
  display:flex; align-items:center; gap:10px;
  border:1.5px solid var(--line); border-radius:var(--radius-sm);
  background:var(--paper-raised); padding:0 14px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.input-icon-row:focus-within{ border-color:var(--green); box-shadow:0 0 0 3px rgba(47,111,79,0.10); }
.input-icon-row .input-icon{ color:var(--muted); flex-shrink:0; }
.input-icon-row:focus-within .input-icon{ color:var(--green); }
.field .input-icon-row input{
  border:none; padding:13px 0; flex:1; min-width:0; background:transparent; width:auto;
}
.field .input-icon-row input:focus{ outline:none; }

.pw-row{position:relative;}
.pw-toggle{
  background:none; border:none; font-size:11.5px; color:var(--muted); font-weight:700;
  padding:6px 4px; letter-spacing:.04em; flex-shrink:0;
}
.input-icon-row .pw-toggle{ position:static; }
.pw-toggle:hover{ color:var(--ink); }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px; border-radius:var(--radius-sm); border:none;
  font-weight:600; font-size:14px; transition:transform .12s ease, box-shadow .12s ease, background .15s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(0.97);}
.btn-primary{background:var(--green); color:#fff;}
.btn-primary:hover{background:var(--green-deep);}
.btn-primary:disabled{background:#9FB8AB; cursor:not-allowed; transform:none;}
.btn-block{width:100%;}
.btn-lg{ padding:15px 18px; font-size:15.5px; margin-top:6px; box-shadow:var(--shadow-sm); }
.btn-ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-danger-ghost{background:transparent; color:var(--danger); border:1.5px solid var(--danger-soft);}
.btn-danger-ghost:hover{background:var(--danger-soft);}
.btn-sm{padding:6px 11px; font-size:12.5px;}
.btn-icon{padding:8px; border-radius:var(--radius-sm); background:transparent; border:1.5px solid var(--line); color:var(--ink); display:inline-flex;}
.btn-icon:hover{border-color:var(--green); color:var(--green);}
.btn-icon.spinning svg{animation:spin 0.7s linear infinite;}
@keyframes spin{ to{ transform:rotate(360deg); } }

.login-error{
  background:var(--danger-soft); color:var(--danger); border-radius:var(--radius-sm);
  padding:10px 13px; font-size:13px; margin-bottom:16px; display:none; font-weight:500;
}
.login-error.show{display:block; animation:shake .3s ease;}
@keyframes shake{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-4px);} 75%{transform:translateX(4px);} }

.api-base-note{
  margin-top:22px; padding-top:16px; border-top:1px dashed var(--line);
  font-size:11.5px; color:var(--muted); display:flex; justify-content:space-between; gap:8px;
}
.api-base-note code{font-family:var(--font-mono); background:var(--paper); padding:2px 6px; border-radius:4px;}

/* Friendly "call for help" block — replaces the old raw contact/code note */
.login-help{
  margin-top:22px; padding-top:18px; border-top:1px dashed var(--line);
  display:flex; align-items:flex-start; gap:10px;
}
.login-help svg{ color:var(--green); flex-shrink:0; margin-top:2px; }
.login-help-title{ font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:2px; }
.login-help-sub{ font-size:12.5px; color:var(--muted); }
.login-help-sub a{ color:var(--green-deep); font-weight:600; text-decoration:none; }
.login-help-sub a:hover{ text-decoration:underline; }

@media (max-width:420px){
  .login-card{ padding:28px 20px; border-radius:14px; }
  .login-card h1{ font-size:23px; }
}

/* ============================================================
   APP SHELL
   ============================================================ */
.app{ display:none; min-height:100vh; }
.app.show{ display:flex; }

.sidebar{
  width:var(--sidebar-w); flex-shrink:0; background:var(--ink); color:var(--paper);
  display:flex; flex-direction:column; padding:22px 14px; position:fixed; top:0; left:0; bottom:0; overflow-y:auto;
}
.sidebar-mark{ display:flex; align-items:center; gap:10px; padding:0 8px 24px; }
.sidebar-mark .stamp-mark{
  width:32px; height:32px; border-radius:7px; background:var(--green); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:15px;
  transform:rotate(-4deg); flex-shrink:0;
}
.sidebar-mark .wordmark{font-size:17px; color:#fff;}
.sidebar-mark .wordmark span{color:#6FBE99; font-style:italic;}

.nav-group{ margin-bottom:4px; }
.nav-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:#8A9389; padding:14px 12px 6px; font-weight:600;}
.nav-item{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:var(--radius-sm);
  color:#C9CFC5; font-size:14px; font-weight:500; margin-bottom:2px; transition:background .12s ease, color .12s ease;
  border:none; background:none; width:100%; text-align:left;
}
.nav-item svg{ flex-shrink:0; opacity:0.85; }
.nav-item:hover{ background:rgba(255,255,255,0.06); color:#fff; }
.nav-item.active{ background:var(--green); color:#fff; }
.nav-item.active svg{ opacity:1; }
.nav-badge{
  margin-left:auto; background:var(--rust); color:#fff; font-size:10.5px; font-weight:700;
  padding:1px 6px; border-radius:10px; min-width:18px; text-align:center;
}

.sidebar-foot{ margin-top:auto; padding-top:16px; border-top:1px solid rgba(255,255,255,0.08); }
.user-chip{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--radius-sm); }
.user-avatar{
  width:32px; height:32px; border-radius:50%; background:var(--green); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0;
}
.user-meta{ overflow:hidden; }
.user-meta .name{ font-size:13.5px; color:#fff; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-meta .role{ font-size:11px; color:#8A9389; text-transform:capitalize; }
.logout-btn{
  width:100%; margin-top:8px; background:none; border:1.5px solid rgba(255,255,255,0.14); color:#C9CFC5;
  padding:9px; border-radius:var(--radius-sm); font-size:13px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:7px;
}
.logout-btn:hover{ border-color:var(--rust); color:#fff; background:rgba(192,97,43,0.15); }

.main{ flex:1; margin-left:var(--sidebar-w); min-width:0; }
.topbar{
  position:sticky; top:0; z-index:20; background:rgba(247,244,236,0.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); padding:16px 28px; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.topbar h2{ font-size:21px; }
.topbar .crumb{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.topbar-actions{ display:flex; align-items:center; gap:10px; }
.content{ padding:24px 28px 56px; max-width:1320px; }

.menu-toggle{ display:none; background:none; border:none; padding:6px; color:var(--ink); }

/* ============================================================
   GENERIC UI PARTS
   ============================================================ */
.toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.search-input{
  flex:1; min-width:180px; max-width:340px; padding:9px 13px 9px 36px; border:1.5px solid var(--line);
  border-radius:var(--radius-sm); font-size:13.5px; background:var(--paper-raised) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="%236B6457" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>') no-repeat 12px center;
}
.search-input:focus{ border-color:var(--green); outline:none; }
.filter-chips{ display:flex; gap:6px; }
.chip{
  padding:7px 13px; border-radius:999px; border:1.5px solid var(--line); background:var(--paper-raised);
  font-size:12.5px; font-weight:600; color:var(--muted); transition:all .12s ease;
}
.chip:hover{ border-color:var(--green); color:var(--ink); }
.chip.active{ background:var(--ink); color:#fff; border-color:var(--ink); }
.tenant-tag{ font-size:13px; font-weight:600; color:var(--green-deep); }

.card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.card-pad{ padding:18px; }

.stat-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); gap:14px; margin-bottom:20px; }
.stat-card{ padding:16px 18px; }
.stat-card .label{ font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; margin-bottom:8px;}
.stat-card .value{ font-family:var(--font-display); font-size:26px; font-weight:600; }
.stat-card .sub{ font-size:12px; color:var(--muted); margin-top:4px; }
.stat-card.accent-green .value{ color:var(--green-deep); }
.stat-card.accent-rust .value{ color:var(--rust); }
.glance-card{ font-family:inherit; transition:border-color .12s, transform .1s; }
.glance-card:hover{ border-color:var(--green); }
.glance-card:active{ transform:scale(0.98); }

.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper-raised); }
table{ width:100%; border-collapse:collapse; font-size:13.8px; min-width:640px; }
thead th{
  text-align:left; padding:12px 16px; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); font-weight:600; border-bottom:1.5px solid var(--line); white-space:nowrap; background:#FBF9F4;
}
tbody td{ padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:middle; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr{ transition:background .1s ease; }
tbody tr:hover{ background:#FBF9F4; }
td.num, th.num{ text-align:right; font-family:var(--font-mono); }
td .row-actions{ display:flex; gap:6px; justify-content:flex-end; }

.pill{
  display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px;
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
}
.pill-dot{ width:6px; height:6px; border-radius:50%; }
.pill.available{ background:var(--success-soft); color:var(--success); }
.pill.available .pill-dot{ background:var(--success); }
.pill.occupied{ background:#E7E3F4; color:#5B4B9E; }
.pill.occupied .pill-dot{ background:#5B4B9E; }
.pill.active-pill{ background:var(--success-soft); color:var(--success); }
.pill.active-pill .pill-dot{ background:var(--success); }
.pill.inactive-pill{ background:var(--danger-soft); color:var(--danger); }
.pill.inactive-pill .pill-dot{ background:var(--danger); }
.pill.role-admin{ background:#FDEBD8; color:#9A5A12; }
.pill.role-tenant{ background:#E3EEFB; color:#1E5C9A; }

/* stamp badge — signature element for bill/payment status */
.stamp{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:700; font-size:10.5px; letter-spacing:.06em;
  padding:4px 10px; border-radius:4px; border:2px solid currentColor;
  transform:rotate(-3deg); text-transform:uppercase;
}
.stamp.paid{ color:var(--success); }
.stamp.partial{ color:var(--partial); }
.stamp.pending{ color:var(--rust); }

.empty-state{ text-align:center; padding:64px 24px; color:var(--muted); }
.empty-state svg{ opacity:0.4; margin-bottom:14px; }
.empty-state h3{ font-size:16px; color:var(--ink); margin-bottom:6px; }
.empty-state p{ font-size:13.5px; max-width:340px; margin:0 auto; }

.skeleton-row{ height:46px; background:linear-gradient(90deg, #EFEBE0 25%, #F6F3EA 37%, #EFEBE0 63%); background-size:400% 100%; animation:shimmer 1.4s ease infinite; border-bottom:1px solid var(--line); }
@keyframes shimmer{ 0%{background-position:100% 0;} 100%{background-position:0 0;} }

.error-banner{
  background:var(--danger-soft); color:var(--danger); border-radius:var(--radius-sm); padding:13px 16px;
  font-size:13.5px; font-weight:500; margin-bottom:16px; display:flex; align-items:flex-start; gap:10px;
}
.error-banner svg{ flex-shrink:0; margin-top:1px; }
.error-banner button{ margin-left:auto; background:none; border:none; color:var(--danger); font-weight:700; font-size:16px; line-height:1; flex-shrink:0;}

/* Toasts */
.toast-stack{ position:fixed; bottom:20px; right:20px; z-index:1000; display:flex; flex-direction:column; gap:10px; max-width:340px; }
.toast{
  background:var(--ink); color:#fff; padding:13px 16px; border-radius:var(--radius-sm); box-shadow:var(--shadow-lg);
  font-size:13.5px; font-weight:500; display:flex; align-items:center; gap:10px; animation:toast-in .25s ease both;
}
.toast.success{ background:var(--green-deep); }
.toast.error{ background:var(--danger); }
.toast.fade-out{ animation:toast-out .25s ease forwards; }
@keyframes toast-in{ from{opacity:0; transform:translateX(20px);} to{opacity:1; transform:translateX(0);} }
@keyframes toast-out{ from{opacity:1;} to{opacity:0; transform:translateX(20px);} }

/* Modal */
.modal-overlay{
  position:fixed; inset:0; background:rgba(21,32,27,0.45); display:none; align-items:center; justify-content:center;
  z-index:500; padding:20px; backdrop-filter:blur(2px);
}
.modal-overlay.show{ display:flex; animation:fade-in .15s ease; }
@keyframes fade-in{ from{opacity:0;} to{opacity:1;} }
.modal{
  background:var(--paper-raised); border-radius:var(--radius); box-shadow:var(--shadow-lg); width:100%; max-width:560px;
  max-height:90vh; overflow-y:auto; animation:modal-in .2s ease both;
}
@keyframes modal-in{ from{opacity:0; transform:translateY(12px) scale(0.98);} to{opacity:1; transform:translateY(0) scale(1);} }
.modal-head{ padding:20px 22px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.modal-head h3{ font-size:18px; }
.modal-close{ background:none; border:none; color:var(--muted); padding:4px; }
.modal-close:hover{ color:var(--ink); }
.modal-body{ padding:22px; }
.modal-foot{ padding:16px 22px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-grid .full{ grid-column:1 / -1; }
@media (max-width:520px){ .form-grid{ grid-template-columns:1fr; } }
.field select, .field textarea{
  width:100%; padding:11px 13px; border:1.5px solid var(--line); border-radius:var(--radius-sm); font-size:14.5px; background:var(--paper-raised);
}
.field select:disabled{ background:#F4F1E9; color:var(--muted); cursor:not-allowed; }
.field textarea{ resize:vertical; min-height:64px; font-family:var(--font-body); }
.field .hint{ font-size:11.5px; color:var(--muted); margin-top:5px; }
.field-error{ font-size:12px; color:var(--danger); margin-top:5px; font-weight:600; }
.field input.invalid, .field select.invalid{ border-color:var(--danger); }

.confirm-body{ padding:22px; font-size:14.5px; }
.confirm-body strong{ font-weight:700; }

/* ---- Info card used inside modals ---- */
.info-card{
  background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius-sm);
  padding:12px 14px; margin-top:4px; font-size:13px;
}
.info-card .info-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:3px 0; }
.info-card .info-label{ color:var(--muted); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.info-card .info-val{ font-weight:600; font-family:var(--font-mono); font-size:13px; }
.info-card .info-val.good{ color:var(--success); }
.info-card .info-val.warn{ color:var(--rust); }

/* ---- Step / path toggle inside modal ---- */
.path-toggle{
  display:flex; gap:0; border:1.5px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; margin-bottom:18px;
}
.path-btn{
  flex:1; padding:10px 12px; background:var(--paper-raised); border:none; font-size:13.5px; font-weight:600;
  color:var(--muted); cursor:pointer; transition:background .12s, color .12s; border-right:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; gap:7px;
}
.path-btn:last-child{ border-right:none; }
.path-btn.active{ background:var(--ink); color:#fff; }
.path-btn:hover:not(.active){ background:var(--paper); color:var(--ink); }

/* ---- Bill section inside payment modal ---- */
.bill-list{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.bill-row{
  border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:11px 13px;
  cursor:pointer; transition:border-color .12s, background .12s; display:flex; align-items:center; gap:12px;
}
.bill-row:hover{ border-color:var(--green); background:#F2F9F5; }
.bill-row.selected{ border-color:var(--green); background:#E8F4EE; }
.bill-row input[type=radio]{ accent-color:var(--green); width:15px; height:15px; flex-shrink:0; }
.bill-row-info{ flex:1; min-width:0; }
.bill-row-info .btype{ font-weight:700; font-size:13.5px; }
.bill-row-info .bmeta{ font-size:12px; color:var(--muted); margin-top:2px; }
.bill-row-amt{ text-align:right; flex-shrink:0; }
.bill-row-amt .bpending{ font-family:var(--font-mono); font-weight:700; font-size:14px; color:var(--rust); }
.bill-row-amt .bdue{ font-size:11.5px; color:var(--muted); margin-top:2px; }

/* ---- Unoccupied warning ---- */
.warn-box{
  background:var(--rust-soft); border:1.5px solid #E8C4A8; border-radius:var(--radius-sm);
  padding:11px 14px; font-size:13px; color:#7A3A18; display:flex; align-items:flex-start; gap:9px; margin-top:4px;
}
.warn-box svg{ flex-shrink:0; margin-top:1px; }

/* ---- Payment summary before save ---- */
.pay-summary{
  background:var(--success-soft); border:1.5px solid #A8D9C4; border-radius:var(--radius-sm);
  padding:13px 15px; margin-top:6px;
}
.pay-summary .ps-title{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--success); margin-bottom:8px; }
.pay-summary .ps-row{ display:flex; justify-content:space-between; font-size:13px; padding:3px 0; }
.pay-summary .ps-row .ps-key{ color:var(--muted); }
.pay-summary .ps-row .ps-val{ font-weight:600; }
.pay-summary .ps-row.ps-total .ps-val{ font-family:var(--font-mono); font-size:15px; color:var(--green-deep); }

/* Tenant portal (read-only, simplified) */
.tenant-shell{ width:100%; }
.tenant-topbar{
  background:var(--ink); color:#fff; padding:18px 24px; display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:20;
}
.tenant-content{ max-width:760px; margin:0 auto; padding:24px 18px 64px; }
.section-title{ font-size:17px; margin:28px 0 14px; display:flex; align-items:center; justify-content:space-between; }
.tenant-card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin-bottom:10px; box-shadow:var(--shadow-sm); }
.tenant-card .row1{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px;}
.tenant-card .title{ font-weight:600; font-size:14.5px; }
.tenant-card .meta{ font-size:12.5px; color:var(--muted); }
.tenant-card .amt-row{ display:flex; justify-content:space-between; font-size:13px; padding-top:8px; border-top:1px dashed var(--line); margin-top:8px;}
.tenant-card .amt-row .big{ font-family:var(--font-mono); font-weight:700; font-size:15px; }

.spinner{ width:16px; height:16px; border:2.5px solid rgba(255,255,255,0.35); border-top-color:#fff; border-radius:50%; animation:spin 0.7s linear infinite; }
.spinner.dark{ border:2.5px solid rgba(21,32,27,0.2); border-top-color:var(--ink); }

.checkbox-list{ display:flex; flex-direction:column; gap:8px; max-height:220px; overflow-y:auto; border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:10px; }
.checkbox-row{ display:flex; align-items:center; gap:9px; font-size:13.5px; padding:5px 6px; border-radius:5px; }
.checkbox-row:hover{ background:var(--paper); }
.checkbox-row input{ width:16px; height:16px; accent-color:var(--green); }

/* ---- Shop picker list (bulk bill creation) ---- */
.shop-pick-list{ display:flex; flex-direction:column; gap:7px; max-height:280px; overflow-y:auto; padding:2px; }
.shop-pick-row{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border:1.5px solid var(--line);
  border-radius:var(--radius-sm); cursor:pointer; transition:border-color .12s, background .12s;
}
.shop-pick-row:hover{ border-color:var(--green); }
.shop-pick-row.checked-row{ border-color:var(--green); background:#F2F9F5; }
.shop-pick-check{ width:17px; height:17px; accent-color:var(--green); flex-shrink:0; cursor:pointer; }
.shop-pick-info{ flex:1; min-width:0; }
.shop-pick-num{ font-weight:700; font-size:14px; }
.shop-pick-meta{ font-size:11.5px; color:var(--muted); margin-top:2px; }
.shop-pick-amt-wrap{ display:flex; align-items:center; gap:4px; flex-shrink:0; }
.shop-pick-rupee{ font-family:var(--font-mono); color:var(--muted); font-size:13px; }
.shop-pick-amount{
  width:104px; padding:8px 9px; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  font-family:var(--font-mono); font-size:13.5px; text-align:right; background:var(--paper-raised);
}
.shop-pick-amount:focus{ border-color:var(--green); outline:none; }
@media (max-width:480px){
  .shop-pick-row{ flex-wrap:wrap; }
  .shop-pick-amt-wrap{ width:100%; justify-content:flex-end; margin-left:28px; }
}

.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* Responsive */
@media (max-width:900px){
  .sidebar{ transform:translateX(-100%); transition:transform .2s ease; z-index:300; box-shadow:var(--shadow-lg); }
  .sidebar.open{ transform:translateX(0); }
  .main{ margin-left:0; }
  .menu-toggle{ display:flex; }
  .sidebar-scrim{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:290; }
  .sidebar-scrim.show{ display:block; }
  .content{ padding:18px 16px 90px; }
  .topbar{ padding:14px 16px; }
}
@media (max-width:560px){
  .topbar h2{ font-size:18px; }
  .stat-row{ grid-template-columns:repeat(2,1fr); }
  table{ font-size:13px; }
  thead th, tbody td{ padding:10px 12px; }
  .modal-overlay{ padding:0; align-items:flex-end; }
  .modal{ max-width:100%; max-height:92vh; border-radius:var(--radius) var(--radius) 0 0; animation:modal-in-sheet .2s ease both; }
  .modal-head{ padding:16px 16px 14px; }
  .modal-body{ padding:16px; }
  .modal-foot{ padding:12px 16px; padding-bottom:max(12px, env(safe-area-inset-bottom)); flex-wrap:wrap; }
  .modal-foot .btn{ flex:1; }
  .pay-summary, .info-card, .warn-box{ padding:11px 12px; }
}
@keyframes modal-in-sheet{ from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:translateY(0);} }

/* ============================================================
   ENHANCED UI — filters, advanced search, user dashboard
   ============================================================ */
.filter-bar{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; margin-bottom:18px; display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end;
}
.filter-bar .field{ margin:0; min-width:130px; flex:1; }
.filter-bar .field label{ font-size:11px; }
.filter-bar .field input,.filter-bar .field select{ font-size:13px; padding:8px 10px; }
.filter-bar .field.search-full{ flex:2; min-width:200px; }
.filter-count{ font-size:12.5px; color:var(--muted); font-weight:600; margin-left:auto; align-self:center; white-space:nowrap; }
.filter-clear-btn{ padding:8px 13px; font-size:12.5px; font-weight:600; white-space:nowrap; }

.sort-select{ padding:8px 10px; border:1.5px solid var(--line); border-radius:var(--radius-sm); font-size:13px; background:var(--paper-raised); color:var(--ink); }

/* Dashboard complex stats table */
.complex-stat-card{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; box-shadow:var(--shadow-sm); transition:box-shadow .15s;
}
.complex-stat-card:hover{ box-shadow:var(--shadow-md); }
.complex-stat-card .c-name{ font-weight:700; font-size:14.5px; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.complex-stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.complex-stat-item{ text-align:center; }
.complex-stat-item .csi-val{ font-family:var(--font-mono); font-weight:700; font-size:16px; }
.complex-stat-item .csi-label{ font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.complex-stat-item.accent-green .csi-val{ color:var(--green-deep); }
.complex-stat-item.accent-rust .csi-val{ color:var(--rust); }

/* Collapsible sections for tenant portal */
.collapsible-section{ background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:12px; overflow:hidden; }
.collapsible-header{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; cursor:pointer; user-select:none; }
.collapsible-header h3{ font-size:15px; margin:0; }
.collapsible-arrow{ transition:transform .2s; }
.collapsible-header.open .collapsible-arrow{ transform:rotate(180deg); }
.collapsible-body{ display:none; border-top:1px solid var(--line); padding:16px 18px; }
.collapsible-body.open{ display:block; }

/* Tenant portal enhanced stats */
.tp-stat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:16px; }
.tp-stat{ background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; }
.tp-stat .tp-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; margin-bottom:4px; }
.tp-stat .tp-value{ font-family:var(--font-display); font-size:20px; font-weight:600; }
.tp-stat.accent-green .tp-value{ color:var(--green-deep); }
.tp-stat.accent-rust .tp-value{ color:var(--rust); }
.tp-stat.accent-partial .tp-value{ color:var(--partial); }
@media(min-width:500px){ .tp-stat-grid{ grid-template-columns:repeat(4,1fr); } }

/* Monthly summary for tenant portal */
.month-row{
  border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:8px; overflow:hidden;
}
.month-row-head{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px; cursor:pointer; background:var(--paper-raised); }
.month-row-head .m-name{ font-weight:700; font-size:13.5px; }
.month-row-head .m-badges{ display:flex; gap:8px; align-items:center; }
.month-row-body{ display:none; border-top:1px solid var(--line); padding:12px 14px; background:#FAFAF8; }
.month-row-body.open{ display:block; }

/* Bills/Payments year→month drill-down */
.drill-crumb{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); margin-bottom:12px; }
.drill-crumb span{ cursor:pointer; }
.drill-crumb span.active{ color:var(--ink); font-weight:700; cursor:default; }
.drill-crumb .sep{ color:var(--line); cursor:default; }
.drill-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.drill-card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; cursor:pointer; transition:border-color .12s, box-shadow .12s; }
.drill-card:hover{ border-color:var(--green); box-shadow:var(--shadow-sm); }
.drill-card .dc-title{ font-weight:700; font-size:15px; margin-bottom:6px; }
.drill-card .dc-count{ font-size:11.5px; color:var(--muted); margin-bottom:8px; }
.drill-card .dc-amt{ font-family:var(--font-mono); font-weight:700; font-size:15px; }
.drill-card .dc-pending{ font-size:11.5px; color:var(--rust); font-weight:600; margin-top:3px; }
.drill-card .dc-pending.clear{ color:var(--success); }
@media (max-width:480px){ .drill-grid{ grid-template-columns:repeat(2,1fr); gap:8px; } .drill-card{ padding:11px 12px; } }

/* Finance page user card */
.user-finance-card{ background:var(--paper-raised); border:1.5px solid var(--green); border-radius:var(--radius); padding:16px 18px; margin-bottom:16px; }
.user-finance-card .ufc-name{ font-weight:700; font-size:16px; margin-bottom:2px; }
.user-finance-card .ufc-meta{ font-size:12.5px; color:var(--muted); }

/* Deposit section in tenant portal */
.deposit-progress{ margin:12px 0; }
.deposit-bar-wrap{ background:var(--line); border-radius:999px; height:8px; overflow:hidden; margin-top:6px; }
.deposit-bar{ background:var(--green); height:100%; border-radius:999px; transition:width .4s ease; }

/* Records count tag */
.record-count-tag{ background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:3px 10px; font-size:12px; font-weight:600; color:var(--muted); }

/* Empty state compact */
.empty-compact{ text-align:center; padding:28px 16px; color:var(--muted); font-size:13.5px; }

/* Year selector for tenant */
.year-btn-row{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.year-btn{ padding:7px 14px; border-radius:999px; border:1.5px solid var(--line); background:var(--paper-raised); font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; transition:all .12s; }
.year-btn.active{ background:var(--ink); color:#fff; border-color:var(--ink); }
.year-btn:hover:not(.active){ border-color:var(--ink); color:var(--ink); }

/* ---- Sign-in language toggle (Marathi / English) ---- */
.login-lang{
  display:flex; gap:0; margin-bottom:20px;
  border:1.5px solid var(--line); border-radius:var(--radius-sm); overflow:hidden;
}
.login-lang-btn{
  flex:1; min-height:42px; border:none; background:var(--paper-raised);
  font-size:14.5px; font-weight:700; color:var(--muted);
  border-right:1.5px solid var(--line);
}
.login-lang-btn:last-child{ border-right:none; }
.login-lang-btn.active{ background:var(--green); color:#fff; }