:root{
  --nav:#123f5d;
  --nav-deep:#0b314a;
  --nav2:#235f8f;
  --bg:#f3f6fa;
  --card:#ffffff;
  --line:#d7e2ec;
  --text:#10243a;
  --muted:#667085;
  --green:#15803d;
  --red:#b91c1c;
  --amber:#b45309;
}
*{box-sizing:border-box}
html{min-height:100%}
body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
a{text-decoration:none;color:inherit}
label{display:block;margin-bottom:6px;font-size:13px;color:#24455f}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid #c9d7e5;border-radius:7px;font-size:14px;background:#fff}
textarea{min-height:74px}
input:focus,select:focus,textarea:focus{outline:2px solid #d8ecff;border-color:#5ca2d5}
.btn{display:inline-block;border:0;border-radius:7px;background:var(--nav2);color:#fff;padding:10px 16px;font-size:14px;cursor:pointer}
.btn:hover{background:var(--nav)}
.btn.gray{background:#667085}.btn.red{background:#b91c1c}.btn.green{background:#15803d}.btn.small{padding:6px 9px;font-size:12px}
.notice{background:#eef6ff;color:#0c4771;border-radius:8px;padding:12px;margin:12px 0}
.success{background:#dcfce7;color:#166534;border-radius:8px;padding:12px;margin:12px 0}
.error{background:#fee2e2;color:#991b1b;border-radius:8px;padding:12px;margin:12px 0}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#7390a0,#b7cbd5);padding:20px}
.login-card{width:420px;max-width:96%;background:#fff;border-radius:16px;padding:28px;box-shadow:0 20px 60px rgba(0,0,0,.18)}
.login-card.wide{width:760px}
.login-title{text-align:center;font-weight:900;color:#073a5a;font-size:26px;line-height:1.25;letter-spacing:.5px}
.login-subtitle{text-align:center;font-weight:700;color:#073a5a;font-size:22px;margin:8px 0 20px}

/* Update 06: production-safe professional sidebar. No SVG/external icon library is used. */
.app{display:flex;min-height:100vh}
.sidebar{
  width:252px;
  background:linear-gradient(180deg,#123f5d 0%,#0e3854 52%,#0b314a 100%);
  color:#fff;
  position:fixed;
  top:0;bottom:0;left:0;
  overflow-y:auto;overflow-x:hidden;
  padding:16px 12px 14px;
  border-right:1px solid rgba(255,255,255,.08);
  box-shadow:8px 0 24px rgba(19,50,73,.08);
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.18) transparent;
  z-index:20;
}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px}
.brand{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:70px;
  padding:4px 7px 15px;
  border-bottom:1px solid rgba(255,255,255,.13);
}
.brand-mark{
  width:39px;height:39px;min-width:39px;
  display:inline-flex;
  align-items:center;justify-content:center;
  border:1px solid rgba(225,183,103,.62);
  border-radius:10px;
  background:linear-gradient(145deg,rgba(229,188,111,.18),rgba(255,255,255,.035));
  color:#e7bd73;
  font-size:20px;
  font-weight:800;
  font-family:Georgia,"Times New Roman",serif;
  line-height:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.brand-copy{min-width:0;display:block}
.brand-copy strong{display:block;color:#fff;font-size:13px;line-height:1.24;font-weight:800;letter-spacing:.35px}
.brand-copy small{display:block;margin-top:5px;color:#b8ccda;font-size:10.5px;font-weight:600;letter-spacing:.1px;white-space:nowrap}
.nav{margin-top:12px;display:flex;flex-direction:column;min-height:calc(100vh - 113px)}
.nav-standalone,.nav-group-title{
  width:100%;min-height:44px;
  display:flex;align-items:center;gap:10px;
  border:0;outline:0;
  border-radius:8px;
  padding:7px 9px;
  margin:2px 0;
  background:transparent;
  color:#dbe8f1;
  font-family:Arial,Helvetica,sans-serif;
  font-size:13.5px;
  line-height:1.25;
  font-weight:650;
  text-align:left;
  cursor:pointer;
  transition:background .16s ease,color .16s ease,box-shadow .16s ease;
}
.nav-standalone:hover,.nav-group-title:hover{background:rgba(255,255,255,.075);color:#fff}
.nav-standalone.active{
  background:rgba(46,124,177,.34);
  color:#fff;
  box-shadow:inset 3px 0 0 #66b5e9,inset 0 0 0 1px rgba(133,194,234,.08);
}
.nav-group-title.active-group{color:#fff;background:rgba(255,255,255,.045)}
.nav-icon{
  width:29px;height:29px;min-width:29px;
  display:inline-flex!important;
  align-items:center!important;justify-content:center!important;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
  border-radius:8px;
  background:rgba(255,255,255,.06);
  color:#dbe9f3;
  font-size:15px!important;
  font-weight:700!important;
  line-height:1!important;
  font-family:Arial,Helvetica,sans-serif!important;
}
.nav-icon.dashboard,.nav-icon.property{color:#79c2f2}
.nav-icon.finance{color:#7bd595}
.nav-icon.reports{color:#baa6f5}
.nav-icon.documents{color:#e8c46f}
.nav-icon.admin{color:#b1b9ff}
.nav-icon.logout{color:#f3a1a1}
.nav-label{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chev{margin-left:auto;color:#95afc0;font-size:20px;font-weight:400;line-height:1;transform-origin:center;transition:transform .16s ease,color .16s ease}
.nav-group.open .chev{transform:rotate(90deg);color:#e4eff6}
.nav-group{margin:1px 0}
.nav-group-items{display:none;margin:1px 0 5px 43px;padding:3px 0 3px 10px;border-left:1px solid rgba(162,194,215,.22)}
.nav-group.open .nav-group-items{display:block}
.nav-group-items a{
  position:relative;
  display:block;
  margin:1px 0;
  padding:7px 9px;
  border-radius:7px;
  color:#bfd2df;
  font-size:12px;
  font-weight:600;
  line-height:1.25;
  transition:background .14s ease,color .14s ease;
}
.nav-group-items a:hover{background:rgba(255,255,255,.065);color:#fff}
.nav-group-items a.active{background:rgba(64,145,199,.18);color:#fff}
.nav-group-items a.active:before{content:"";position:absolute;left:-13px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:#69b8ec;box-shadow:0 0 0 3px rgba(105,184,236,.11)}
.nav-separator{height:1px;background:rgba(255,255,255,.12);margin:13px 6px 8px;margin-top:auto}
.nav-logout{color:#dbe7ef}
.nav-logout:hover{background:rgba(185,28,28,.13);color:#fff}

.main{margin-left:252px;width:calc(100% - 252px);min-width:0}
.topbar{height:62px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 24px;font-weight:700}
.topbar .user{font-weight:400;color:#536273}
.content{padding:24px}
h1{margin:0 0 18px;color:var(--nav);font-size:32px}
h2{margin:0 0 14px;color:var(--nav)}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:20px;box-shadow:0 3px 12px rgba(16,32,48,.04)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.grid.three{grid-template-columns:repeat(3,1fr)}
.field{margin-bottom:12px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;border-left:5px solid var(--nav2)}
.kpi .label{color:var(--muted);font-size:13px}
.kpi .value{font-size:25px;font-weight:900;margin-top:8px}
table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
th{background:#1f5b86;color:#fff;text-align:left;padding:10px;font-size:13px}
td{border-top:1px solid #e5edf4;padding:10px;font-size:13px;vertical-align:top}
tr:hover td{background:#f8fbff}
.actions a{margin-right:9px;color:#1f5b86;font-weight:700}
.badge{display:inline-block;border-radius:999px;padding:4px 8px;font-size:12px;font-weight:700}
.badge.active,.badge.occupied{background:#dcfce7;color:#166534}
.badge.vacant{background:#e0f2fe;color:#075985}
.badge.inactive{background:#e5e7eb;color:#374151}
.whatsapp-action{display:inline-flex!important;align-items:center;gap:5px;padding:5px 8px!important;border-radius:7px!important;background:#eaf8ef!important;color:#18753c!important;border:1px solid #bfe7cd!important;font-size:12px!important;font-weight:750!important;line-height:1.2;white-space:nowrap;margin:2px 5px 2px 0!important}
.whatsapp-action:before{content:"WA";display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;background:#25a95b;color:#fff;font-size:8px;font-weight:900;letter-spacing:-.2px}
.whatsapp-action:hover{background:#dcf4e5!important;color:#0f6531!important}
.whatsapp-action.disabled{opacity:.48;cursor:not-allowed;background:#f1f4f6!important;color:#697681!important;border-color:#d8e0e6!important}
.whatsapp-action.disabled:before{background:#9aa6af}
.footer-note{font-size:12px;color:#667085;margin-top:24px}
/* V37-U15: mobile/tablet responsive layer. Desktop rules above remain unchanged. */
.mobile-menu-toggle{display:none;border:0;background:#eef5fa;color:var(--nav);width:38px;height:38px;border-radius:9px;font-size:22px;line-height:1;cursor:pointer;align-items:center;justify-content:center}
.mobile-nav-backdrop{display:none}
@media(max-width:900px){
  html,body{max-width:100%;overflow-x:hidden}
  body.mobile-nav-open{overflow:hidden}
  .app{display:block;min-height:100vh}
  .sidebar{position:fixed;top:0;bottom:0;left:0;width:min(86vw,320px);height:100vh;min-height:100vh;overflow-y:auto;overflow-x:hidden;padding:14px 12px;transform:translateX(-105%);transition:transform .22s ease;box-shadow:12px 0 30px rgba(8,35,52,.25);z-index:1002}
  .app.mobile-nav-open .sidebar{transform:translateX(0)}
  .mobile-nav-backdrop{position:fixed;inset:0;border:0;background:rgba(5,25,39,.48);z-index:1001;cursor:pointer}
  .app.mobile-nav-open .mobile-nav-backdrop{display:block}
  .mobile-menu-toggle{display:inline-flex;flex:0 0 auto}
  .brand{max-width:none}
  .nav{min-height:calc(100vh - 102px)}
  .nav-separator{margin-top:auto}
  .main{margin-left:0;width:100%;min-width:0}
  .topbar{height:auto;min-height:58px;padding:9px 12px;gap:8px;flex-wrap:wrap;position:sticky;top:0;z-index:900;box-shadow:0 2px 8px rgba(16,32,48,.05)}
  .topbar-brand{max-width:100%;min-width:0;flex:1 1 240px}
  .topbar-app-name{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
  .topbar-tools{min-width:0;max-width:100%;justify-content:flex-end}
  .global-search-form{min-width:0;max-width:100%}
  .global-search-form input{min-width:0!important;max-width:none!important;width:min(52vw,320px)}
  .content{padding:14px 12px 22px;min-width:0}
  h1{font-size:25px;line-height:1.2;margin-bottom:14px}
  h2{font-size:20px}
  .card{padding:14px;margin-bottom:14px;min-width:0;border-radius:10px}
  .grid,.grid.two,.grid.three,.grid.four,.kpis{grid-template-columns:1fr!important;gap:9px}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  input,select,textarea{min-width:0;font-size:16px}
  .field{min-width:0}
  table{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;border-radius:8px}
  th,td{padding:9px 8px}
  .actions{white-space:normal;min-width:180px}
  .actions a,.actions button,.actions form{display:inline-block;margin:2px 4px 2px 0!important}
  .filter-panel{min-width:0}
  .notice,.success,.error{overflow-wrap:anywhere}
}
@media(max-width:620px){
  .topbar-tools{width:100%;justify-content:flex-start}
  .global-search-form{width:100%}
  .global-search-form input{width:100%;flex:1}
  .top-pill{padding:6px 9px}
  .topbar .user{font-size:12px}
  .content{padding:12px 9px 20px}
  .card{padding:12px}
  .kpi-grid{grid-template-columns:1fr!important}
  .btn{padding:9px 12px}
}
@media print{
  .sidebar,.topbar,.no-print,.actions,.btn{display:none!important}
  .main{margin:0;width:100%}.content{padding:0;background:#fff}.card{border:0;box-shadow:none}
}

/* V37-U16: global sortable table headers. Desktop/mobile safe, no layout width changes. */
.sortable-table th.sortable-th{cursor:pointer;user-select:none;position:relative;padding-right:24px}
.sortable-table th.sortable-th:after{content:'↕';position:absolute;right:7px;top:50%;transform:translateY(-50%);font-size:11px;opacity:.45;font-weight:400}
.sortable-table th.sortable-th.sort-asc:after{content:'↑';opacity:1;font-weight:700}
.sortable-table th.sortable-th.sort-desc:after{content:'↓';opacity:1;font-weight:700}
.sortable-table th.sortable-th:focus{outline:2px solid rgba(255,255,255,.75);outline-offset:-3px}

/* V37-U17: compact three-dot Actions menu for all rendered table action cells. */
td.actions.actions-compact{white-space:nowrap;min-width:52px;width:52px;text-align:center;vertical-align:middle}
.row-actions-trigger{display:inline-flex;align-items:center;justify-content:center;width:34px;height:32px;border:1px solid #c9d7e5;border-radius:8px;background:#fff;color:#174f76;font-size:24px;line-height:1;font-weight:800;cursor:pointer;padding:0;box-shadow:0 1px 3px rgba(16,32,48,.05)}
.row-actions-trigger:hover,.row-actions-trigger[aria-expanded="true"]{background:#eef6ff;border-color:#8ebbd7;color:#0d4163}
.row-actions-trigger:focus{outline:2px solid #8bc5ed;outline-offset:2px}
.row-actions-popover{display:none;position:fixed;z-index:5000;width:250px;max-width:calc(100vw - 16px);max-height:min(70vh,520px);overflow:auto;background:#fff;border:1px solid #cbd9e5;border-radius:10px;box-shadow:0 14px 38px rgba(16,32,48,.22);padding:7px;text-align:left;white-space:normal}
.row-actions-popover.open{display:block}
.row-actions-popover>a,.row-actions-popover>button,.row-actions-popover>input[type="submit"]{display:flex!important;align-items:center;width:100%;min-height:36px;margin:0!important;padding:8px 10px!important;border:0!important;border-radius:7px!important;background:transparent!important;color:#174f76!important;font-size:13px!important;font-weight:700!important;line-height:1.25!important;text-align:left!important;box-shadow:none!important;cursor:pointer}
.row-actions-popover>form{display:block!important;width:100%!important;margin:0!important;padding:0!important}
.row-actions-popover>form>button,.row-actions-popover>form>input[type="submit"]{display:flex!important;align-items:center;width:100%!important;min-height:36px;margin:0!important;padding:8px 10px!important;border:0!important;border-radius:7px!important;background:transparent!important;color:#174f76!important;font-size:13px!important;font-weight:700!important;line-height:1.25!important;text-align:left!important;box-shadow:none!important;cursor:pointer}
.row-actions-popover>a:hover,.row-actions-popover>button:hover,.row-actions-popover>form>button:hover,.row-actions-popover>form>input[type="submit"]:hover{background:#eef6ff!important;color:#0d4163!important}
.row-actions-popover .whatsapp-action{display:flex!important;width:100%!important;margin:0!important;padding:8px 10px!important;border:0!important;background:transparent!important;color:#18753c!important}
.row-actions-popover .whatsapp-action:hover{background:#eaf8ef!important;color:#0f6531!important}
.row-actions-popover .danger,.row-actions-popover .btn.red,.row-actions-popover form .btn.red{color:#b91c1c!important}
.row-actions-popover .danger:hover,.row-actions-popover .btn.red:hover,.row-actions-popover form .btn.red:hover{background:#fff0f0!important;color:#991b1b!important}
.row-actions-popover .success,.row-actions-popover .btn.green,.row-actions-popover form .btn.green{color:#15803d!important;background:transparent!important;margin:0!important}
.row-actions-popover .success:hover,.row-actions-popover .btn.green:hover,.row-actions-popover form .btn.green:hover{background:#eefbf2!important;color:#166534!important}
@media(max-width:900px){td.actions.actions-compact{min-width:48px!important;width:48px!important}.row-actions-popover{width:min(270px,calc(100vw - 16px));max-height:65vh}}
@media print{.row-actions-popover,.row-actions-trigger{display:none!important}}