:root{--navy:#091223;--navy2:#111c32;--bg:#f4f6fa;--line:#e7eaf0;--text:#182033;--muted:#7c8496;--blue:#315efb}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,"Segoe UI",Tahoma,"Noto Sans",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}.app-shell{display:flex;min-height:100vh}.sidebar{width:248px;background:linear-gradient(180deg,#081122,#101b30);color:#fff;position:fixed;inset:0 auto 0 0;padding:22px 16px;display:flex;flex-direction:column}.sidebar-brand{display:flex;align-items:center;gap:11px;padding:4px 8px 26px}.brand-mini,.brand-mark{display:grid;place-items:center;background:#315efb;color:#fff;font-weight:800;border-radius:12px}.brand-mini{width:40px;height:40px}.sidebar-brand strong{font-size:12px;display:block;letter-spacing:.5px}.sidebar-brand small{font-size:9px;color:#8e98ad;letter-spacing:1.3px}.sidebar nav{display:grid;gap:6px}.sidebar a{color:#aeb7c9;text-decoration:none;padding:12px 13px;border-radius:10px;display:flex;gap:13px;align-items:center;font-size:14px}.sidebar a.active,.sidebar a:hover{background:#1b2a49;color:#fff}.sidebar-bottom{margin-top:auto;border-top:1px solid #263149;padding-top:12px}.main-area{margin-left:248px;width:calc(100% - 248px);padding:0 30px 40px}.topbar{height:92px;display:flex;align-items:center;justify-content:space-between}.eyebrow{font-size:9px;letter-spacing:2px;color:#8a92a4}.topbar h2{font-size:25px;margin:3px 0;font-weight:750}.top-actions{display:flex;align-items:center;gap:20px}.today{font-size:12px;color:var(--muted)}.notify{color:#315efb}.user-chip{display:flex;align-items:center;gap:9px}.user-chip small{display:block;color:var(--muted);font-size:10px}.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#e9edff;color:#315efb;font-weight:800}.stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:18px}.stat-card,.panel{background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:0 6px 22px rgba(20,30,50,.035)}.stat-card{padding:18px}.stat-card span{font-size:9px;letter-spacing:1.1px;color:#8c94a5;font-weight:700}.stat-card strong{display:block;font-size:24px;margin:7px 0}.stat-card small{font-size:10px;color:#4e9b75}.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px}.panel{padding:20px}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.panel-head h3,.panel h3{font-size:16px;margin:0 0 4px}.panel-head p,.panel>p{margin:0;color:var(--muted);font-size:11px}.room-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.room-card{color:var(--text);text-decoration:none;border:1px solid var(--line);border-radius:14px;padding:14px;min-height:175px;position:relative;transition:.18s;background:#fff}.room-card:hover{transform:translateY(-2px);box-shadow:0 12px 25px rgba(20,30,50,.08)}.room-card.occupied{border-top:3px solid #31a46b}.room-card.vacant{border-top:3px solid #315efb}.room-card.repair{border-top:3px solid #e39b35}.room-top{display:flex;justify-content:space-between;align-items:center}.room-top b{font-size:17px}.room-top span{font-size:8px;font-weight:800;color:#7d8698}.room-icon{margin:12px 0 7px;font-size:20px}.room-name{font-size:11px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room-price{font-size:13px;font-weight:800;margin-top:7px}.room-price small{font-size:9px;color:var(--muted);font-weight:400}.room-foot{position:absolute;bottom:12px;left:14px;right:14px;border-top:1px solid #eef0f4;padding-top:8px;display:flex;justify-content:space-between;font-size:9px;color:var(--muted)}.side-stack{display:grid;gap:18px}.finance-row{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line);font-size:11px}.finance-row strong{font-size:13px}.danger,.text-danger{color:#d84c59!important}.progress-wrap{padding-top:16px}.progress{height:6px;background:#edf0f5}.progress div{height:100%;background:#315efb;border-radius:5px}.progress-wrap small{font-size:9px;color:var(--muted)}.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.quick-actions a{padding:12px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--text);font-size:10px;background:#fafbfe}.quick-actions a:hover{border-color:#315efb;color:#315efb}.badge-status{display:inline-block;border-radius:999px;padding:5px 9px;font-size:9px;font-weight:800}.badge-status.occupied{background:#e6f6ee;color:#238355}.badge-status.vacant{background:#eaf0ff;color:#315efb}.badge-status.repair{background:#fff2dc;color:#a96b14}.badge-status.paid{background:#e6f6ee;color:#238355}.badge-status.unpaid{background:#fff0f1;color:#c34855}.table{font-size:12px}.table thead th{font-size:9px;text-transform:uppercase;color:#8c94a5;letter-spacing:.6px;border-bottom-color:var(--line)}.table td{border-bottom-color:#eef0f4}.detail-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:18px}.detail-head h1{font-size:34px;margin:5px 0 10px}.back{font-size:11px;color:var(--muted);text-decoration:none}.big-price{font-size:22px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.detail-grid .wide{grid-column:1/-1}.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:18px}.info-grid small,.info-grid b{display:block}.info-grid small{color:var(--muted);font-size:10px}.info-grid b{font-size:13px;margin-top:3px}.tenant-profile{display:flex;gap:12px;align-items:center}.avatar.large{width:52px;height:52px;font-size:18px}.tenant-profile h4{margin:0;font-size:15px}.tenant-profile p{margin:3px 0;color:var(--muted);font-size:10px}.empty{text-align:center;color:var(--muted);padding:25px;font-size:12px}.form-panel{max-width:950px}.form-panel label{display:block;font-size:10px;font-weight:700;margin-bottom:5px;color:#596174}.payment-summary{display:flex;gap:28px;padding:15px;background:#f7f8fb;border-radius:12px;margin-bottom:18px;font-size:12px}.report-bars{display:grid;gap:15px;margin-top:22px}.report-bars span{font-size:11px}.bar{height:9px;background:#edf0f5;border-radius:9px;overflow:hidden;margin-top:6px}.bar i{display:block;height:100%;background:#315efb;border-radius:9px}.bar i.bar-danger{background:#d84c59}.login-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at top right,#253d73,#0a1222 58%)}.login-card{width:390px;background:#fff;border-radius:22px;padding:36px;box-shadow:0 25px 70px rgba(0,0,0,.25)}.brand-mark{width:54px;height:54px;margin-bottom:16px}.login-card h1{font-size:19px}.login-card p{color:var(--muted);font-size:12px}.login-card label{font-size:11px;font-weight:700}.login-card input{padding:11px}.login-note{text-align:center;margin-top:18px;color:var(--muted);font-size:10px}
@media(max-width:1100px){.stats-grid{grid-template-columns:repeat(3,1fr)}.room-grid{grid-template-columns:repeat(3,1fr)}.content-grid{grid-template-columns:1fr}}@media(max-width:800px){.sidebar{width:70px}.sidebar-brand div,.sidebar a span{display:none}.sidebar a{justify-content:center}.main-area{margin-left:70px;width:calc(100% - 70px);padding:0 14px 30px}.stats-grid{grid-template-columns:repeat(2,1fr)}.room-grid{grid-template-columns:repeat(2,1fr)}.detail-grid{grid-template-columns:1fr}.detail-grid .wide{grid-column:auto}.top-actions .today,.top-actions .user-chip div:not(.avatar){display:none}}

.page-toolbar{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:16px}.toolbar-left,.toolbar-right{display:flex;gap:8px;align-items:center}.searchbox{min-width:250px}.filterbar{background:#fff;border:1px solid var(--line);padding:13px;border-radius:14px;margin-bottom:16px}.filterbar label{font-size:9px;color:var(--muted);font-weight:700;display:block;margin-bottom:4px}.room-card .edit-dot{position:absolute;right:10px;bottom:10px;font-size:10px;color:#9aa1af}.action-menu{display:flex;gap:5px}.invoice-paper{max-width:850px;margin:auto;background:#fff;border:1px solid #e4e7ed;border-radius:4px;padding:42px;box-shadow:0 8px 30px rgba(20,30,50,.06)}.invoice-head{display:flex;justify-content:space-between;border-bottom:2px solid #182033;padding-bottom:18px;margin-bottom:20px}.invoice-head h1{font-size:23px;margin:0}.invoice-no{text-align:right;color:var(--muted);font-size:11px}.invoice-total{font-size:22px;font-weight:800}.invoice-meta{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-bottom:25px}.invoice-meta small{display:block;color:var(--muted);font-size:9px;text-transform:uppercase}.invoice-meta b{font-size:12px}.print-only{display:none}.edit-modal .modal-body label{font-size:10px;font-weight:700;margin-bottom:4px}.notice-box{background:#f6f8ff;border:1px solid #e3e8ff;padding:12px;border-radius:10px;font-size:11px}.kbd{border:1px solid #d9dce4;background:#f7f8fa;padding:2px 5px;border-radius:4px;font-size:9px}@media print{body{background:#fff}.sidebar,.topbar,.no-print,.alert{display:none!important}.main-area{margin:0;width:100%;padding:0}.invoice-paper{box-shadow:none;border:0;padding:20px}.print-only{display:block}}
/* V2.3 professional desktop dashboard */
:root{--nav:#0b1930;--blue:#1769ff;--line:#e7eaf0;--soft:#f6f8fb}.dashboard-toolbar{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:18px}.dashboard-toolbar h3{font-weight:750}.v23-stats{grid-template-columns:repeat(5,minmax(0,1fr))}.stat-card{position:relative;overflow:hidden}.stat-card:after{content:'';position:absolute;width:70px;height:70px;border-radius:50%;right:-28px;top:-28px;background:rgba(23,105,255,.07)}.stat-card strong{font-size:25px}.stat-card small{white-space:nowrap}.stat-blue{border-top:3px solid #1769ff}.stat-green{border-top:3px solid #10a56a}.stat-cyan{border-top:3px solid #159fc5}.stat-orange{border-top:3px solid #f39a1f}.stat-purple{border-top:3px solid #7958d8}.dashboard-grid-v23{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(320px,.8fr);gap:16px}.v23-room-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.v23-room-card{padding:0;position:relative;overflow:hidden;min-height:190px}.room-main-link{display:block;padding:13px 13px 8px;color:inherit;text-decoration:none}.v23-room-card .room-icon{height:34px;font-size:22px}.v23-room-card .room-price{font-size:14px}.v23-room-card .room-contact{font-size:9px;color:#788196;margin:3px 0 7px}.room-actions{display:flex;border-top:1px solid var(--line);background:#fbfcfe}.room-actions a{flex:1;text-align:center;padding:7px 0;text-decoration:none;color:#677083;font-size:12px;border-right:1px solid var(--line)}.room-actions a:last-child{border-right:0}.room-actions a:hover{background:#eef4ff;color:var(--blue)}.room-toolbar{display:flex;gap:7px;margin:-4px 0 12px}.room-filter{font-size:10px;padding:6px 9px;border:1px solid var(--line);border-radius:8px;text-decoration:none;color:#6e7789;background:#fff}.room-filter b{margin-left:4px}.room-filter.active{color:#172033;border-color:#cbd2df}.room-filter.occupied{color:#07915e}.room-filter.vacant{color:#1769ff}.room-filter.repair{color:#e58b0c}.room-legend{display:flex;gap:18px;margin-top:12px;font-size:9px;color:#70798a}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px}.dot.occupied{background:#10a56a}.dot.vacant{background:#1769ff}.dot.repair{background:#f39a1f}.side-stack-v23{display:flex;flex-direction:column;gap:16px}.finance-big{font-size:27px;font-weight:800;color:#1769ff;margin:2px 0}.finance-sub{font-size:10px;font-weight:700}.finance-sub span{font-weight:400;color:#7b8495}.finance-sub.up{color:#10a56a}.finance-sub.down{color:#dc3545}.mini-chart{height:150px;display:flex;align-items:flex-end;gap:7px;margin-top:15px;border-bottom:1px solid var(--line);padding:0 4px}.chart-col{height:100%;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;position:relative}.chart-value{font-size:7px;color:#8790a1;white-space:nowrap;opacity:0;position:absolute;top:0}.chart-track{height:118px;width:100%;display:flex;align-items:flex-end;justify-content:center}.chart-track i{display:block;width:65%;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#3e83ff,#1769ff);min-height:4px}.chart-col:hover .chart-value{opacity:1}.chart-col small{font-size:7px;color:#7d8698;margin-top:5px}.finance-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}.finance-summary div{background:#f7f9fc;padding:8px;border-radius:8px}.finance-summary small{display:block;font-size:8px;color:#7e8798}.finance-summary b{font-size:10px}.quick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.quick-grid a{display:flex;align-items:center;gap:9px;border:1px solid var(--line);padding:10px;border-radius:9px;text-decoration:none;color:#253047;background:#fff}.quick-grid a:hover{border-color:#b9cdfc;background:#f7faff}.quick-grid b{width:28px;height:28px;display:grid;place-items:center;border-radius:7px;background:#eef4ff;color:#1769ff}.quick-grid span{font-size:10px;font-weight:650}.bottom-grid-v23{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;margin-top:16px}.table-v23{font-size:10px;margin-bottom:0}.table-v23 th{font-size:8px;text-transform:uppercase;color:#8a92a2;background:#fafbfc}.table-v23 td,.table-v23 th{padding:10px 8px}.alert-count{min-width:22px;height:22px;border-radius:50%;background:#fff0f0;color:#d53b3b;display:grid;place-items:center;font-size:9px;font-weight:800}.task-list>a{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);text-decoration:none;color:#283247}.task-list>a:last-child{border-bottom:0}.task-icon{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-weight:800}.task-icon.orange{background:#fff5e5;color:#df8c10}.task-icon.blue{background:#edf4ff;color:#1769ff}.task-list b{font-size:10px;display:block}.task-list small{font-size:8px;color:#8991a1}.empty-state{padding:20px;text-align:center;color:#6f7888;font-size:10px}.global-search{width:300px}.top-actions{flex-wrap:wrap}@media(max-width:1200px){.v23-stats{grid-template-columns:repeat(3,1fr)}.v23-room-grid{grid-template-columns:repeat(3,1fr)}.dashboard-grid-v23,.bottom-grid-v23{grid-template-columns:1fr}.global-search{width:220px}}@media(max-width:768px){.dashboard-toolbar{align-items:stretch;flex-direction:column}.v23-stats{grid-template-columns:repeat(2,1fr)}.v23-room-grid{grid-template-columns:repeat(2,1fr)}.global-search{display:none}.topbar{gap:8px}.today{display:none}}@media(max-width:480px){.v23-stats{grid-template-columns:1fr}.v23-room-grid{grid-template-columns:1fr}.quick-grid{grid-template-columns:1fr}.room-toolbar{overflow:auto;white-space:nowrap}.dashboard-toolbar .toolbar-right{flex-wrap:wrap}}

/* V2.4 deep management */
.global-search input{border-radius:9px}.panel.form-panel{box-shadow:0 8px 25px rgba(20,30,50,.04)}.payment-summary>div{display:flex;flex-direction:column;gap:3px}.payment-summary strong{font-size:13px}.table td .small{font-size:9px}.badge-status.expired{background:#fff0f1;color:#c34855}.badge-status.active{background:#e6f6ee;color:#238355}.badge-status.terminated{background:#eef0f4;color:#687185}.detail-grid .panel{min-height:100%}
/* V2.4 deep management */
.badge-status.expired{background:#fff0f1;color:#c34855}.badge-status.active{background:#e6f6ee;color:#238355}.badge-status.terminated{background:#eef0f4;color:#687185}.payment-summary>div{display:flex;flex-direction:column;gap:3px}.payment-summary strong{font-size:13px}.global-search input{border-radius:9px}.panel.form-panel{box-shadow:0 8px 25px rgba(20,30,50,.04)}
/* ===== V2.4 MOCKUP MATCH ===== */
:root{--v24-navy:#061a35;--v24-blue:#1769ff;--v24-line:#e7ebf2;--v24-muted:#7b8495}
.v24-shell{background:#f5f7fb}.v24-sidebar{width:240px;background:linear-gradient(180deg,#061d3b,#03142b);color:#fff;box-shadow:8px 0 30px rgba(2,17,39,.08)}.v24-brand{height:78px;padding:14px 14px;display:flex;gap:10px;align-items:center;border-bottom:1px solid rgba(255,255,255,.07)}.brand-logo{width:42px;height:42px;border:3px solid #ff9d00;border-radius:12px;color:#ff9d00;display:grid;place-items:center;font-size:25px}.v24-brand strong{display:block;font-size:14px;letter-spacing:.2px}.v24-brand small{display:block;font-size:8px;color:#c9d3e4;margin-top:3px}.v24-brand small b{background:#1769ff;padding:3px 6px;border-radius:4px;margin-left:3px}.v24-nav{padding:12px 8px}.v24-nav a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;color:#d5deed;text-decoration:none;margin:2px 0;position:relative}.v24-nav a.active{background:#1260d8;color:#fff;box-shadow:0 5px 15px rgba(18,96,216,.25)}.v24-nav .nav-ico{width:25px;text-align:center;font-size:17px}.v24-nav b{display:block;font-size:11px;font-weight:650}.v24-nav small{display:block;font-size:8px;color:#93a5c1;margin-top:1px}.v24-nav a.active small{color:#dbe8ff}.v24-nav em{font-style:normal;background:#e83e43;color:#fff;border-radius:99px;font-size:8px;padding:2px 6px;margin-left:auto}.sidebar-contact{margin:10px 12px 12px;padding:13px;border:1px solid rgba(255,255,255,.12);border-radius:10px;color:#dce5f4}.sidebar-contact b,.sidebar-contact small{display:block}.sidebar-contact b{font-size:11px;margin-bottom:6px}.sidebar-contact small{font-size:8px;line-height:1.65}.v24-main{min-width:0}.v24-topbar{height:72px;background:#fff;border-bottom:1px solid var(--v24-line);padding:0 22px;display:flex;align-items:center;justify-content:space-between}.top-title{display:flex;align-items:center;gap:14px}.top-title h2{font-size:19px;margin:0;font-weight:750;color:#0c1830}.mobile-menu{display:none;border:0;background:none;font-size:20px}.v24-topbar .eyebrow{font-size:7px;color:#9aa3b2;letter-spacing:1.2px}.top-actions{display:flex;align-items:center;gap:14px}.global-search{height:38px;width:405px;border:1px solid #dfe4ed;border-radius:8px;display:flex;align-items:center;gap:7px;padding:0 10px;background:#fff}.global-search>span{font-size:18px;color:#7f899b}.global-search input{border:0;outline:0;flex:1;font-size:11px}.global-search kbd{font-size:8px;background:#f4f6f9;border:1px solid #e0e4ea;border-radius:4px;padding:2px 5px}.top-month{border:1px solid #e1e5ec;border-radius:8px;padding:9px 11px;font-size:10px;color:#455066}.top-bell{position:relative;font-size:20px;color:#677186}.top-bell i{position:absolute;right:-5px;top:-5px;background:#e83e43;color:#fff;font-size:7px;border-radius:50%;width:15px;height:15px;display:grid;place-items:center;font-style:normal}.user-chip{display:flex;gap:8px;align-items:center}.user-chip b{display:block;font-size:10px}.user-chip small{display:block;font-size:8px;color:#8b94a5}.avatar{width:34px;height:34px;border-radius:50%;background:#e9eef7;color:#24334c;display:grid;place-items:center;font-weight:800}.v24-page-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:15px}.v24-page-head h3{font-size:18px;font-weight:780;margin:0}.v24-page-head p{margin:3px 0 0;font-size:10px;color:var(--v24-muted)}.v24-head-actions{display:flex;gap:8px}.v24-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:14px}.v24-kpi{background:#fff;border:1px solid var(--v24-line);border-radius:10px;padding:14px 12px;display:flex;gap:10px;min-height:105px;box-shadow:0 4px 15px rgba(20,35,60,.025)}.kpi-icon{width:39px;height:39px;border-radius:9px;display:grid;place-items:center;font-size:20px;background:#edf4ff;color:#1769ff}.v24-kpi.green .kpi-icon{background:#e8f8ef;color:#10a56a}.v24-kpi.blue2 .kpi-icon{background:#eaf3ff;color:#1769ff}.v24-kpi.orange .kpi-icon{background:#fff3df;color:#f09a16}.v24-kpi.purple .kpi-icon{background:#f1ebff;color:#7856d6}.v24-kpi.teal .kpi-icon{background:#e6f9f7;color:#0aa59a}.v24-kpi small{font-size:7px;color:#70798a;font-weight:750;display:block}.v24-kpi strong{display:inline-block;font-size:24px;line-height:1.15;color:#111d34;margin-top:4px}.v24-kpi em{font-style:normal;font-size:8px;color:#718096;margin-left:5px}.v24-kpi a{display:block;color:#1769ff;font-size:8px;text-decoration:none;margin-top:5px}.v24-main-grid{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(350px,.82fr);gap:14px}.panel{border:1px solid var(--v24-line);box-shadow:0 5px 18px rgba(20,35,60,.025)}.v24-rooms{background:#fff}.v24-rooms>.panel-head,.v24-right .panel-head,.v24-bottom-grid .panel-head{padding:13px 15px 10px}.v24-rooms .panel-head h3,.v24-right .panel-head h3,.v24-bottom-grid .panel-head h3{font-size:11px;font-weight:800;margin:0;letter-spacing:.15px}.v24-view-tools{display:flex;gap:5px}.v24-view-tools button{border:1px solid #dce2eb;background:#fff;border-radius:6px;font-size:12px;padding:4px 8px}.v24-view-tools button.active{background:#eef4ff;color:#1769ff}.v24-tabs{display:flex;gap:6px;padding:0 15px 10px}.v24-tabs a{font-size:8px;padding:6px 9px;border:1px solid #e2e6ed;border-radius:6px;text-decoration:none;color:#586276}.v24-tabs a.active{background:#1769ff;color:#fff;border-color:#1769ff}.v24-tabs .green{color:#07915e}.v24-tabs .blue{color:#1769ff}.v24-tabs .orange{color:#df8b10}.v24-room-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:0 15px 11px}.v24-room-card{border:1px solid #e5e9f0;border-radius:8px;min-height:190px;overflow:hidden;background:#fff;position:relative}.v24-room-card.occupied{border-top:3px solid #10a56a}.v24-room-card.vacant{border-top:3px solid #1769ff}.v24-room-card.repair{border-top:3px solid #f39a1f}.v24-room-head{display:flex;justify-content:space-between;align-items:center;padding:8px 9px 3px}.v24-room-head b{font-size:13px;color:#087b54}.v24-room-card.vacant .v24-room-head b{color:#1769ff}.v24-room-card.repair .v24-room-head b{color:#e08a0c}.v24-room-head span{font-size:7px;font-weight:800;padding:4px 6px;border-radius:5px;background:#e7f8ee;color:#07915e}.v24-room-card.vacant .v24-room-head span{background:#eaf2ff;color:#1769ff}.v24-room-card.repair .v24-room-head span{background:#fff3e1;color:#e08a0c}.v24-tenant{padding:20px 9px 5px;min-height:82px}.v24-tenant b{display:block;font-size:9px}.v24-tenant small{display:block;color:#7b8495;font-size:7px;margin-top:7px}.v24-empty-room{height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#1769ff;font-size:26px;gap:3px}.v24-empty-room strong{font-size:8px;color:#687489;font-weight:500}.repair-icon{color:#f39a1f}.v24-rent{padding:0 9px 7px;color:#1769ff;font-weight:800;font-size:11px}.v24-rent small{font-weight:400;font-size:7px;color:#7d8697}.v24-card-actions{display:flex;border-top:1px solid #edf0f4;position:absolute;bottom:0;left:0;right:0}.v24-card-actions a{flex:1;text-align:center;text-decoration:none;color:#5f697d;font-size:11px;padding:6px;border-right:1px solid #edf0f4}.v24-card-actions a:last-child{border-right:0}.v24-legend{padding:0 15px 12px;display:flex;gap:18px;font-size:8px;color:#737d8f}.dot{width:7px;height:7px;display:inline-block;border-radius:50%;margin-right:4px}.dot.green{background:#10a56a}.dot.blue{background:#1769ff}.dot.orange{background:#f39a1f}.v24-right{display:flex;flex-direction:column;gap:14px}.revenue-panel{background:#fff}.revenue-number{font-size:23px;font-weight:850;color:#1769ff;padding:0 15px}.growth{font-size:8px;font-weight:800;padding:2px 15px}.growth.up{color:#10a56a}.growth.down{color:#dc3545}.growth span{color:#7b8495;font-weight:400}.v24-line-chart{height:145px;margin:5px 15px 0;display:flex;border-bottom:1px solid #e7ebf2}.chart-y{width:32px;display:flex;flex-direction:column;justify-content:space-between;padding:4px 0 20px;font-size:7px;color:#9aa2b1}.chart-bars{flex:1;display:flex;align-items:flex-end;justify-content:space-around;gap:8px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 28px,#eef1f5 29px);position:relative}.bar-wrap{height:100%;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}.bar{width:62%;background:linear-gradient(180deg,#4b8cff,#1769ff);border-radius:6px 6px 0 0;min-height:4px}.bar-wrap small{font-size:7px;color:#8992a2;margin:5px 0}.revenue-summary{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #edf0f4;margin-top:0}.revenue-summary div{padding:10px 12px;border-right:1px solid #edf0f4}.revenue-summary div:last-child{border-right:0}.revenue-summary small{display:block;font-size:7px;color:#818a9a}.revenue-summary b{display:block;font-size:10px;margin-top:4px}.revenue-summary .success{color:#07915e}.revenue-summary .danger,.danger-text{color:#e43f43}.recent-panel{background:#fff}.v24-table{margin:0;font-size:8px}.v24-table th{font-size:7px;text-transform:uppercase;color:#8b94a4;background:#fafbfd;border-bottom:1px solid #edf0f4}.v24-table td,.v24-table th{padding:9px 9px;vertical-align:middle}.v24-status{font-size:7px;padding:4px 6px;border-radius:5px;font-weight:800}.v24-status.paid{background:#e7f8ee;color:#07915e}.v24-status.unpaid{background:#fff0f0;color:#e24343}.v24-bottom-grid{display:grid;grid-template-columns:1.1fr 1.2fr 1.15fr;gap:14px;margin-top:14px}.v24-tasks a{display:flex;gap:8px;align-items:center;padding:9px 14px;border-bottom:1px solid #edf0f4;text-decoration:none;color:#263149}.v24-tasks a:last-child{border-bottom:0}.task{width:25px;height:25px;border-radius:7px;display:grid;place-items:center;font-style:normal;font-weight:800}.task.orange{background:#fff3df;color:#e08a0c}.task.blue{background:#eaf2ff;color:#1769ff}.v24-tasks span{flex:1}.v24-tasks b{display:block;font-size:8px}.v24-tasks small{display:block;font-size:7px;color:#8a93a3;margin-top:3px}.v24-tasks em{font-size:7px;color:#e43f43;font-style:normal}.v24-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:0 12px 12px}.v24-quick a{border:1px solid #e3e7ee;border-radius:8px;text-decoration:none;text-align:center;padding:9px 3px;color:#29344a}.v24-quick b{display:block;font-size:20px;color:#1769ff}.v24-quick span{font-size:7px;font-weight:700;line-height:1.3;display:block}.v24-footer{font-size:8px;color:#8a93a3;padding:15px 0 5px}.v24-footer span{float:right}.alert-count{display:none}@media(max-width:1450px){.v24-kpis{grid-template-columns:repeat(3,1fr)}.v24-room-grid{grid-template-columns:repeat(4,1fr)}.v24-main-grid{grid-template-columns:1fr}.v24-bottom-grid{grid-template-columns:1fr 1fr}.v24-right{display:grid;grid-template-columns:1fr 1fr}}@media(max-width:1000px){.v24-sidebar{width:190px}.v24-room-grid{grid-template-columns:repeat(3,1fr)}.v24-bottom-grid,.v24-right{grid-template-columns:1fr}.global-search{width:270px}.top-month{display:none}}@media(max-width:760px){.v24-sidebar{display:none}.v24-kpis{grid-template-columns:repeat(2,1fr)}.v24-room-grid{grid-template-columns:repeat(2,1fr)}.v24-bottom-grid{grid-template-columns:1fr}.mobile-menu{display:block}.global-search{display:none}.v24-topbar{padding:0 12px}.v24-page-head{flex-direction:column;align-items:stretch;gap:10px}}@media(max-width:500px){.v24-kpis{grid-template-columns:1fr}.v24-room-grid{grid-template-columns:1fr}.v24-quick{grid-template-columns:repeat(2,1fr)}.user-chip div:not(.avatar){display:none}}
/* ===== V2.5 Modern Rental Dashboard ===== */
:root{--kv-blue:#1677ff;--kv-navy:#102a43;--surface:#ffffff;--canvas:#f4f7fb;--ink:#172b4d;--sub:#6b778c;--stroke:#e7edf5;--green:#16a36a;--amber:#f59e0b;--danger:#e5484d}
body{background:var(--canvas);color:var(--ink);font-size:14px}.v24-shell{background:radial-gradient(circle at 80% 0,rgba(22,119,255,.05),transparent 27%),var(--canvas)}
.v24-sidebar{width:264px;padding:14px 10px;background:linear-gradient(180deg,#102a43 0%,#0b2137 52%,#081b2e 100%);box-shadow:14px 0 35px rgba(13,35,60,.09)}
.v24-brand{height:78px;border:0;padding:10px 12px;margin-bottom:8px}.brand-logo{width:44px;height:44px;border:0;border-radius:13px;background:linear-gradient(135deg,#2b8cff,#1266e8);color:#fff;box-shadow:0 10px 24px rgba(22,119,255,.28)}.brand-logo svg{width:23px}.v24-brand strong{font-size:13px;letter-spacing:.4px}.v24-brand small{font-size:9px;color:#9db0c5}.v24-brand small b{background:rgba(255,255,255,.14);color:#cfe4ff}
.v24-nav{padding:4px}.v24-nav a{min-height:50px;margin:4px 0;padding:8px 11px;border-radius:11px;gap:11px;transition:.2s ease}.v24-nav a:hover{background:rgba(255,255,255,.07);transform:translateX(2px)}.v24-nav a.active{background:linear-gradient(90deg,#1d7cf2,#1769d8);box-shadow:0 9px 20px rgba(7,81,185,.3)}.v24-nav .nav-ico{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:rgba(255,255,255,.06);font-size:0}.v24-nav .nav-ico svg{width:17px;height:17px;stroke-width:2}.v24-nav a.active .nav-ico{background:rgba(255,255,255,.17)}.v24-nav b{font-size:11px}.v24-nav small{font-size:8px;letter-spacing:.1px}.sidebar-contact{margin:12px 8px;padding:13px 14px;background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.08);border-radius:13px}.sidebar-bottom{border-color:rgba(255,255,255,.08);padding:12px 8px}
.v24-main{margin-left:264px;width:calc(100% - 264px);padding:0 28px 36px}.v24-topbar{height:76px;margin:0 -28px 0;padding:0 28px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);position:sticky;top:0;z-index:20}.top-title h2{font-size:20px;letter-spacing:-.35px}.global-search{width:min(420px,31vw);height:40px;border-radius:10px;background:#f7f9fc;border-color:transparent;transition:.2s}.global-search:focus-within{background:#fff;border-color:#a9cdfd;box-shadow:0 0 0 4px rgba(22,119,255,.09)}.top-month{background:#f7f9fc;border:0;border-radius:10px}.top-bell{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:#f4f7fb}.user-chip{padding-left:7px}.avatar{background:linear-gradient(135deg,#dceaff,#f1f6ff);color:#1769ff}
.v24-page-head{padding:24px 0 18px}.v24-page-head h3{font-size:23px;letter-spacing:-.45px}.v24-page-head p{font-size:12px}.v24-head-actions .form-control{border-radius:9px;border-color:var(--stroke)}.btn{border-radius:9px;font-weight:650}.btn-primary{background:#1677ff;border-color:#1677ff;box-shadow:0 7px 14px rgba(22,119,255,.17)}
.v24-kpis{gap:14px;margin-bottom:16px}.v24-kpi{position:relative;border:0;border-radius:15px;padding:16px 14px;min-height:120px;box-shadow:0 8px 25px rgba(31,55,90,.055);overflow:hidden;transition:transform .2s,box-shadow .2s}.v24-kpi:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(31,55,90,.09)}.v24-kpi:after{content:"";position:absolute;width:72px;height:72px;border-radius:50%;right:-24px;top:-28px;background:currentColor;opacity:.045}.kpi-icon{width:43px;height:43px;border-radius:13px}.v24-kpi strong{font-size:27px}.v24-kpi small{font-size:8px}.v24-kpi a{font-size:9px;font-weight:700;margin-top:7px}
.panel{border:0;border-radius:15px;box-shadow:0 8px 25px rgba(31,55,90,.055);overflow:hidden}.v24-main-grid{gap:16px}.v24-right{gap:16px}.v24-bottom-grid{gap:16px;margin-top:16px}.v24-rooms>.panel-head,.v24-right .panel-head,.v24-bottom-grid .panel-head{padding:17px 18px 12px}.v24-rooms .panel-head h3,.v24-right .panel-head h3,.v24-bottom-grid .panel-head h3{font-size:12px}.v24-tabs{padding:0 18px 13px;gap:8px}.v24-tabs a{padding:7px 11px;border-radius:8px;font-size:9px;background:#fafcff;border-color:#edf1f6}.v24-room-grid{padding:0 18px 14px;gap:11px}.v24-room-card{border-color:#e8eef5;border-radius:12px;min-height:196px;box-shadow:0 2px 5px rgba(40,60,90,.015);transition:.2s}.v24-room-card:hover{transform:translateY(-3px);box-shadow:0 12px 25px rgba(31,55,90,.1);border-color:#cfe1fb}.v24-room-head{padding:10px 11px 4px}.v24-room-head b{font-size:14px}.v24-tenant{padding:20px 11px 7px}.v24-rent{padding:0 11px 8px}.v24-card-actions a{padding:8px}.v24-legend{padding:0 18px 15px;font-size:9px}
.revenue-number{padding:0 18px;font-size:27px;letter-spacing:-.4px}.growth{padding:3px 18px}.v24-line-chart{margin:7px 18px 0;height:155px}.revenue-summary div{padding:12px 14px}.v24-table{font-size:10px}.v24-table td,.v24-table th{padding:11px 12px}.v24-table th{background:#f8fafd;font-size:8px}.v24-status{border-radius:999px;padding:5px 8px}.v24-quick{gap:9px;padding:0 15px 15px}.v24-quick a{border-radius:11px;padding:12px 4px;background:#fbfcfe;transition:.18s}.v24-quick a:hover{background:#f1f6ff;border-color:#b9d5fb;transform:translateY(-2px)}.v24-quick b{font-size:22px}.v24-tasks a{padding:11px 15px}.v24-footer{font-size:9px;padding-top:20px}
@media(max-width:1450px){.v24-kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1000px){.v24-sidebar{width:220px}.v24-main{margin-left:220px;width:calc(100% - 220px)}.global-search{width:220px}}
@media(max-width:760px){.v24-sidebar{display:none}.v24-main{margin-left:0;width:100%;padding:0 14px 24px}.v24-topbar{margin:0 -14px;padding:0 14px}.v24-page-head{padding-top:18px}.mobile-menu{display:block}.v24-kpis{grid-template-columns:repeat(2,1fr);gap:10px}.v24-kpi{min-height:108px}.v24-kpi strong{font-size:24px}.v24-room-grid{grid-template-columns:repeat(2,1fr);padding:0 12px 12px}.v24-tabs{overflow:auto;padding-left:12px}.v24-rooms>.panel-head,.v24-right .panel-head,.v24-bottom-grid .panel-head{padding-left:12px;padding-right:12px}.global-search{display:none}}
/* ===== V2.6 SaaS Redesign ===== */
:root{--brand:#2563eb;--brand2:#4f46e5;--sidebar:#0f172a;--sidebar-soft:#17233b;--bg2:#f6f8fc;--card:#fff;--text2:#111827;--muted2:#64748b;--border2:#e8edf5;--success:#10b981;--warning:#f59e0b;--danger2:#ef4444}
html{scroll-behavior:smooth}body{background:var(--bg2);color:var(--text2)}
.v24-sidebar{width:272px;padding:18px 12px;background:linear-gradient(180deg,#0b1220,#111c31 58%,#0b1220);border-right:1px solid rgba(255,255,255,.06)}
.v24-brand{height:72px;padding:8px 10px;margin:0 0 12px}.brand-logo{width:46px;height:46px;border-radius:15px;background:linear-gradient(135deg,#3b82f6,#4f46e5);box-shadow:0 12px 30px rgba(37,99,235,.32)}.v24-brand strong{font-size:13px;letter-spacing:.7px}.v24-brand small{font-size:9px;letter-spacing:.4px}
.v24-nav{overflow-y:auto;padding:2px;scrollbar-width:none}.v24-nav a{min-height:48px;margin:3px 0;border-radius:12px;padding:8px 10px;color:#aab7ca}.v24-nav a:before{content:'';position:absolute;left:-3px;width:3px;height:22px;border-radius:0 4px 4px 0;background:transparent}.v24-nav a{position:relative}.v24-nav a.active{background:linear-gradient(90deg,rgba(37,99,235,.98),rgba(79,70,229,.9));box-shadow:0 10px 24px rgba(37,99,235,.2)}.v24-nav a.active:before{background:#93c5fd}.v24-nav a:hover{background:rgba(255,255,255,.075)}.v24-nav .nav-ico{width:30px;height:30px;border-radius:10px}.v24-nav b{font-size:11px}.v24-nav small{font-size:8px;color:#71829a}.v24-nav a.active small{color:#dbeafe}.sidebar-contact{display:none}.sidebar-bottom{margin:10px 5px 0;padding:14px 9px;border:0;background:rgba(255,255,255,.045);border-radius:12px}.sidebar-bottom a{font-size:12px!important}
.v24-main{margin-left:272px;width:calc(100% - 272px);padding:0 32px 40px}.v24-topbar{height:78px;margin:0 -32px;padding:0 32px;border-bottom:1px solid rgba(226,232,240,.8);box-shadow:0 4px 20px rgba(15,23,42,.025)}.eyebrow{font-size:8px;font-weight:800;color:#94a3b8}.top-title h2{font-size:21px;font-weight:800}.top-actions{gap:12px}.global-search{width:min(430px,34vw);height:42px;border:1px solid transparent;border-radius:12px;background:#f1f5f9;padding:0 12px}.global-search input{font-size:12px}.global-search kbd{background:#fff;border:1px solid #e2e8f0;color:#94a3b8}.top-month,.top-bell{height:40px;border:1px solid #e7edf5;background:#fff;border-radius:11px}.top-bell{font-size:0}.top-bell:before{content:'🔔';font-size:14px}.top-bell i{top:-5px;right:-4px}.user-chip{padding:5px 8px;border-left:1px solid #edf1f5}.avatar{width:38px;height:38px;background:linear-gradient(135deg,#dbeafe,#ede9fe);color:#3730a3}
.v24-page-head{padding:28px 0 20px}.v24-page-head h3{font-size:25px;font-weight:800}.v24-page-head p{font-size:12px;color:var(--muted2)}.btn{font-size:12px;padding:8px 14px;border-radius:10px}.btn-primary{background:linear-gradient(135deg,#2563eb,#4f46e5);border:0}.btn-outline-dark{border-color:#dbe3ee;color:#475569}.form-control,.form-select{border-color:#e1e7ef;border-radius:10px;font-size:12px}.form-control:focus,.form-select:focus{border-color:#93c5fd;box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.v24-kpis{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}.v24-kpi{border:1px solid var(--border2);background:linear-gradient(145deg,#fff,#fbfdff);border-radius:18px;min-height:142px;padding:18px 15px}.v24-kpi:before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:currentColor;opacity:.7}.v24-kpi strong{font-size:29px;font-weight:800}.v24-kpi small{font-size:8px;letter-spacing:.8px}.v24-kpi em{font-size:9px}.kpi-icon{width:46px;height:46px;border-radius:15px;font-size:0}.kpi-icon:after{font-size:19px}.v24-kpi.blue .kpi-icon:after{content:'▦'}.v24-kpi.green .kpi-icon:after{content:'♙'}.v24-kpi.blue2 .kpi-icon:after{content:'⌂'}.v24-kpi.orange .kpi-icon:after{content:'⚙'}.v24-kpi.purple .kpi-icon:after{content:'♟'}.v24-kpi.teal .kpi-icon:after{content:'▤'}.v24-kpi a{font-size:9px;color:currentColor;opacity:.8}
.panel{border:1px solid var(--border2);border-radius:18px;box-shadow:0 10px 30px rgba(15,23,42,.045);background:var(--card)}.v24-rooms>.panel-head,.v24-right .panel-head,.v24-bottom-grid .panel-head{padding:20px 22px 14px}.panel-head h3,.v24-rooms .panel-head h3,.v24-right .panel-head h3,.v24-bottom-grid .panel-head h3{font-size:12px;font-weight:800;letter-spacing:.3px}.v24-tabs{padding:0 22px 16px}.v24-tabs a{border-radius:999px;padding:8px 12px;font-size:9px}.v24-tabs a.active{background:#eaf1ff;color:#2563eb;border-color:#dbeafe}.v24-room-grid{padding:0 22px 18px;gap:13px}.v24-room-card{border-radius:15px;border:1px solid #e7edf5;min-height:204px;background:linear-gradient(180deg,#fff,#fcfdff)}.v24-room-card:before{height:4px}.v24-room-card:hover{border-color:#a5c9ff;box-shadow:0 16px 30px rgba(37,99,235,.1);transform:translateY(-4px)}.v24-room-head{padding:13px 14px 6px}.v24-room-head b{font-size:15px}.v24-tenant{padding:22px 14px 8px}.v24-empty-room{padding:25px 14px 8px}.v24-rent{padding:0 14px 9px;font-size:13px}.v24-card-actions{padding:0 7px}.v24-card-actions a{padding:9px;color:#64748b}.v24-card-actions a:hover{background:#eef4ff;color:#2563eb;border-radius:8px}.v24-legend{padding:0 22px 18px}
.revenue-number{font-size:31px;font-weight:850;padding:0 22px}.growth{padding:4px 22px}.v24-line-chart{margin:10px 22px 0}.revenue-summary{background:#fafcff}.revenue-summary div{padding:14px 15px}.recent-panel .panel-head a,.v24-bottom-grid .panel-head a{font-size:10px;color:#2563eb;text-decoration:none;font-weight:700}.v24-table{font-size:10px}.v24-table th{background:#f8fafc;color:#94a3b8}.v24-table tr:hover td{background:#fbfdff}.v24-table td,.v24-table th{padding:12px 13px}.v24-status{padding:5px 9px}
.v24-bottom-grid{grid-template-columns:1.1fr 1.25fr 1.1fr}.v24-tasks a{padding:12px 16px}.v24-tasks a:hover{background:#f8fbff}.task{width:30px;height:30px;border-radius:10px}.v24-quick{padding:0 16px 16px}.v24-quick a{border-radius:13px;padding:14px 5px}.v24-quick b{font-size:23px}.v24-footer{border-top:1px solid #e8edf5;margin-top:20px;padding-top:18px}
/* Global pages */
.page-toolbar,.dashboard-toolbar{background:transparent}.filterbar{border:1px solid var(--border2);border-radius:16px;padding:14px;box-shadow:0 8px 22px rgba(15,23,42,.035)}.searchbox{border-radius:10px!important}.table-responsive{border-radius:14px}.table{--bs-table-bg:transparent}.table td{padding:13px 11px}.table tbody tr{transition:.15s}.table tbody tr:hover{background:#f8fbff}.badge-status{padding:6px 10px;font-size:9px}.form-panel{padding:24px!important}.detail-head h1{font-weight:850}.invoice-paper{border-radius:16px}.notice-box{border-radius:12px;background:#f7faff}.alert{border-radius:12px;border:0}.login-page{background:radial-gradient(circle at 12% 15%,rgba(59,130,246,.28),transparent 28%),radial-gradient(circle at 88% 85%,rgba(79,70,229,.24),transparent 30%),#08111f}.login-card{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.8);border-radius:24px;padding:40px;box-shadow:0 30px 90px rgba(0,0,0,.32)}.login-card:before{content:'';position:absolute;width:180px;height:180px;right:-80px;top:-80px;background:radial-gradient(circle,#dbeafe,transparent 68%)}.brand-mark{width:58px;height:58px;border-radius:18px;background:linear-gradient(135deg,#2563eb,#4f46e5)}.login-card h1{font-weight:850;letter-spacing:.4px}.login-card input{height:46px;border-radius:11px}.login-card .btn{height:46px}
@media(max-width:1550px){.v24-kpis{grid-template-columns:repeat(3,1fr)}.v24-bottom-grid{grid-template-columns:1fr 1fr}.quick-panel{grid-column:1/-1}.v24-quick{grid-template-columns:repeat(6,1fr)}}
@media(max-width:1100px){.v24-sidebar{width:230px}.v24-main{margin-left:230px;width:calc(100% - 230px);padding:0 20px 30px}.v24-topbar{margin:0 -20px;padding:0 20px}.global-search{width:250px}.v24-bottom-grid{grid-template-columns:1fr}.quick-panel{grid-column:auto}.v24-quick{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.v24-sidebar{display:flex;transform:translateX(-105%);transition:transform .25s;z-index:100}.v24-sidebar.mobile-open{transform:translateX(0);box-shadow:20px 0 60px rgba(0,0,0,.3)}.v24-main{margin-left:0;width:100%;padding:0 14px 28px}.v24-topbar{margin:0 -14px;padding:0 14px}.mobile-menu{display:grid;place-items:center;width:38px;height:38px;border:1px solid #e5eaf1;border-radius:10px;background:#fff}.v24-kpis{grid-template-columns:repeat(2,1fr)}.v24-room-grid{grid-template-columns:repeat(2,1fr)}.v24-quick{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.v24-page-head h3{font-size:21px}.v24-kpi{min-height:122px;padding:14px}.v24-kpi strong{font-size:25px}.v24-room-grid{grid-template-columns:1fr}.v24-head-actions{width:100%}.v24-head-actions form{flex:1}.v24-head-actions .form-control{width:100%}.user-chip{border:0;padding:0}.v24-topbar{height:68px}.login-card{width:min(92vw,390px);padding:30px 24px}}


/* ===== V3.0 PRODUCT DESIGN SYSTEM ===== */
:root{--brand:#2563eb;--brand2:#4f46e5;--ink:#172033;--surface:#fff;--surface2:#f8fafc;--border:#e7edf5;--shadow:0 10px 30px rgba(15,23,42,.07);--radius:18px}
body{background:linear-gradient(180deg,#f7f9fc 0,#f4f7fb 100%)}
.v24-sidebar{width:268px;padding:18px 14px;background:linear-gradient(180deg,#07172f 0%,#0b1d38 58%,#071426 100%);box-shadow:18px 0 45px rgba(7,23,47,.12)}
.v24-main{margin-left:268px;width:calc(100% - 268px);padding:0 32px 48px}
.v24-brand{padding:12px 12px 25px}.brand-logo{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#4f8cff,#4f46e5);display:grid;place-items:center;box-shadow:0 10px 20px rgba(37,99,235,.35)}
.v24-nav{gap:4px!important}.v24-nav a{position:relative;padding:11px 12px!important;border-radius:13px!important;transition:.2s ease}.v24-nav a b{font-size:13px}.v24-nav a small{font-size:10px}.v24-nav a.active{background:linear-gradient(90deg,rgba(37,99,235,.26),rgba(79,70,229,.15))!important;box-shadow:inset 3px 0 #60a5fa}.v24-nav a:hover{transform:translateX(2px);background:rgba(255,255,255,.055)}
.v24-topbar{height:84px;position:sticky;top:0;z-index:20;background:rgba(247,249,252,.88);backdrop-filter:blur(14px);border-bottom:1px solid rgba(231,237,245,.7)}
.topbar h2{font-size:22px}.global-search{width:360px!important;background:#fff;border:1px solid var(--border);box-shadow:0 5px 20px rgba(15,23,42,.04);border-radius:13px;padding:0 10px}.theme-toggle{border:1px solid var(--border);background:#fff;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#64748b}.top-bell{background:#fff;border:1px solid var(--border);border-radius:12px;width:38px;height:38px;display:grid;place-items:center}.user-chip{padding:5px 10px 5px 5px;background:#fff;border:1px solid var(--border);border-radius:14px}
.panel,.stat-card{border:1px solid var(--border);box-shadow:var(--shadow);border-radius:var(--radius)}.panel{background:rgba(255,255,255,.94)}
.btn{border-radius:11px;font-weight:650}.btn-sm{padding:.48rem .78rem}.btn-primary{background:linear-gradient(135deg,#2563eb,#4f46e5);border:0;box-shadow:0 8px 18px rgba(37,99,235,.2)}
.form-control,.form-select{border-color:var(--border);border-radius:11px;min-height:38px}.form-control:focus,.form-select:focus{border-color:#93c5fd;box-shadow:0 0 0 4px rgba(59,130,246,.1)}
.page-toolbar,.filterbar{background:#fff;border:1px solid var(--border);border-radius:15px;padding:14px 16px;box-shadow:0 8px 25px rgba(15,23,42,.04);margin-bottom:14px}.filterbar label{font-size:11px;font-weight:700;color:#64748b;margin-bottom:5px}
.table{margin-bottom:0}.table>tbody>tr{transition:.15s}.table>tbody>tr:hover{background:#f8fbff}.table td,.table th{padding:.9rem .8rem}.table thead th{background:#f8fafc}.modal-content{border:0;border-radius:20px;box-shadow:0 25px 70px rgba(15,23,42,.22)}.modal-header,.modal-footer{border-color:var(--border)}
.v24-kpi{border-radius:18px;box-shadow:var(--shadow);transition:.2s}.v24-kpi:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(15,23,42,.1)}.v24-room-card{border-radius:16px;box-shadow:none;transition:.2s}.v24-room-card:hover{transform:translateY(-3px);box-shadow:0 16px 30px rgba(15,23,42,.1)}
.v24-status,.badge-status{border-radius:999px}.v24-quick a{border-radius:14px;transition:.2s}.v24-quick a:hover{transform:translateY(-2px);border-color:#93c5fd;background:#f8fbff}.v24-footer{color:#94a3b8}
/* V3 room card view */
.room-v3-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:16px}.room-v3-card{display:block;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--border);border-radius:18px;padding:17px;box-shadow:0 8px 24px rgba(15,23,42,.045);transition:.2s;position:relative;overflow:hidden}.room-v3-card:hover{color:var(--ink);transform:translateY(-4px);box-shadow:0 18px 40px rgba(15,23,42,.11)}.room-v3-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#60a5fa}.room-v3-card.occupied:before{background:#22c55e}.room-v3-card.repair:before{background:#f59e0b}.room-v3-card .room-num{font-size:22px;font-weight:800}.room-v3-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.room-v3-tenant{height:46px;color:#64748b;font-size:12px}.room-v3-price{padding-top:12px;border-top:1px solid var(--border);font-size:17px;font-weight:800}.room-v3-price small{font-weight:500;color:#94a3b8;font-size:10px}
/* dark mode */
body.dark-mode{--bg:#0b1220;--text:#e5edf8;--ink:#e5edf8;--surface:#111a2b;--surface2:#0d1525;--border:#243146;background:#0b1220;color:#e5edf8}.dark-mode .v24-main,.dark-mode .main-area,.dark-mode .v24-topbar{background:#0b1220}.dark-mode .panel,.dark-mode .page-toolbar,.dark-mode .filterbar,.dark-mode .room-v3-card,.dark-mode .global-search,.dark-mode .top-bell,.dark-mode .user-chip,.dark-mode .theme-toggle{background:#111a2b;border-color:#243146;color:#e5edf8}.dark-mode .table{color:#dbe7f6}.dark-mode .table thead th,.dark-mode .table>tbody>tr:hover{background:#162238;color:#dbe7f6}.dark-mode .form-control,.dark-mode .form-select{background:#0d1525;color:#e5edf8;border-color:#334155}.dark-mode .modal-content{background:#111a2b;color:#e5edf8}.dark-mode .modal-header,.dark-mode .modal-footer,.dark-mode .room-v3-price{border-color:#243146}.dark-mode .text-muted,.dark-mode .panel p{color:#94a3b8!important}
@media(max-width:1100px){.v24-sidebar{width:248px}.v24-main{margin-left:248px;width:calc(100% - 248px);padding:0 20px 36px}.global-search{width:250px!important}.v24-kpis{grid-template-columns:repeat(3,1fr)!important}.v24-main-grid{grid-template-columns:1fr!important}}
@media(max-width:768px){.v24-sidebar{transform:translateX(-105%);transition:.25s;z-index:100}.v24-sidebar.mobile-open{transform:translateX(0)}.v24-main{margin-left:0;width:100%;padding:0 14px 28px}.v24-topbar{height:70px}.global-search,.top-month{display:none!important}.v24-kpis{grid-template-columns:repeat(2,1fr)!important}.v24-page-head{display:block!important}.v24-head-actions{margin-top:12px}.room-v3-grid{grid-template-columns:1fr 1fr}.user-chip>div:last-child{display:none}.content-grid,.v24-bottom-grid{grid-template-columns:1fr!important}}

/* V3.1 Vietnamese text clarity */
.vi-text,.table td,.table th,.form-control,.form-select,.badge-status,.room-v3-tenant,.user-chip,.sidebar,.topbar{font-family:Arial,"Segoe UI",Tahoma,"Noto Sans",sans-serif;}
.table td b,.room-v3-tenant,.vi-text{letter-spacing:0;line-height:1.5;}
/* ===== V3.1.8 / V3.1.9 MOCKUP IMPLEMENTATION ===== */
.version-chip{display:inline-flex;align-items:center;padding:6px 10px;border-radius:8px;background:#eaf2ff;color:#1769ff;font-size:10px;font-weight:800}.contract-v319-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:12px 0 16px}.contract-v319-head h1{font-size:25px;font-weight:850;margin:4px 0 7px}.contract-title-row{display:flex;align-items:center;gap:12px}.contract-actions{display:flex;gap:8px;flex-wrap:wrap}.contract-summary-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.72fr);gap:14px}.contract-main-card{padding:0;overflow:hidden}.contract-meta-top{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-bottom:1px solid var(--border)}.contract-meta-top>div{padding:15px;border-right:1px solid var(--border)}.contract-meta-top>div:last-child{border-right:0}.contract-meta-top small{display:block;color:#94a3b8;font-size:8px;font-weight:800;letter-spacing:.7px}.contract-meta-top b{display:block;font-size:13px;margin-top:5px}.contract-tabs{display:flex;gap:2px;padding:0 15px;border-bottom:1px solid var(--border);overflow:auto}.contract-tabs a{white-space:nowrap;padding:12px 11px;text-decoration:none;color:#64748b;font-size:10px;font-weight:700;border-bottom:2px solid transparent}.contract-tabs a.active,.contract-tabs a:hover{color:#1769ff;border-bottom-color:#1769ff}.contract-info-section{padding:18px}.contract-info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.contract-info-grid>div{padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:#fbfcfe}.contract-info-grid .wide{grid-column:1/-1}.contract-info-grid span{display:block;color:#94a3b8;font-size:9px;font-weight:700}.contract-info-grid strong{display:block;margin-top:4px;font-size:13px}.contract-info-grid strong small{display:inline;color:#94a3b8;font-weight:500}.contract-side-card{padding:17px}.side-action-list{display:grid;gap:7px;margin-top:16px}.side-action-list a{display:block;padding:9px 11px;border-radius:9px;text-decoration:none;font-size:10px;font-weight:750;text-align:center}.side-action-list .primary{background:#eef4ff;color:#1769ff}.side-action-list .success{background:#eaf8f0;color:#087b54}.side-action-list .purple{background:#f1ecff;color:#7048c7}.side-action-list .orange{background:#fff4e1;color:#c97908}.side-action-list .teal{background:#e8fbf8;color:#078f87}.contract-lower-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.v319-panel{padding:0;overflow:hidden}.v319-panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 15px;border-bottom:1px solid var(--border)}.v319-panel-head>div:first-child{display:flex;gap:9px;align-items:center}.v319-panel-head h3{font-size:12px;font-weight:800;margin:0}.v319-panel-head p{font-size:8px;color:#94a3b8;margin:3px 0 0}.section-number{width:26px;height:26px;display:grid;place-items:center;border-radius:7px;background:#eaf2ff;color:#1769ff;font-size:9px;font-weight:850}.section-number.green{background:#e8f8ef;color:#078b58}.section-number.orange{background:#fff2df;color:#d17c0b}.section-number.teal{background:#e8fbf8;color:#078f87}.section-number.purple{background:#f1ecff;color:#7048c7}.section-number.red{background:#fff0f0;color:#d83d48}.v319-table{font-size:9px}.v319-table td,.v319-table th{padding:9px 11px}.v319-table thead th{font-size:7px;letter-spacing:.4px;color:#8b94a4;text-transform:uppercase;background:#f8fafc}.handover-mini{padding:12px 15px;display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border)}.handover-mini>div:first-child{display:grid;gap:4px}.handover-mini b{font-size:10px}.handover-mini span{font-size:8px;color:#64748b}.handover-stats{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.handover-stats span{padding:5px 7px;border-radius:7px;background:#f7f9fc;color:#475569;font-size:8px}.handover-note{padding:9px 15px;background:#fbfcfe;font-size:8px;color:#64748b}.file-list{padding:7px 15px 10px}.file-row{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid #eef2f6}.file-row:last-child{border-bottom:0}.file-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:#eef4ff;color:#1769ff}.file-row div{flex:1}.file-row b,.file-row small{display:block}.file-row b{font-size:9px}.file-row small{font-size:7px;color:#94a3b8;margin-top:2px}.file-row>a{font-size:14px;color:#1769ff;text-decoration:none}.asset-status{display:inline-block;background:#e8f8ef;color:#087b54;border-radius:999px;padding:4px 7px;font-size:7px;font-weight:800}.icon-btn{border:0;background:transparent;padding:3px}.invoice-link-panel{overflow:hidden}.activity-list{padding:5px 15px}.activity-row{display:flex;align-items:flex-start;gap:9px;padding:9px 0;border-bottom:1px solid var(--border)}.activity-row:last-child{border-bottom:0}.activity-dot{width:8px;height:8px;margin-top:4px;border-radius:50%;background:#1769ff;box-shadow:0 0 0 4px #eaf2ff}.activity-row div{flex:1}.activity-row b,.activity-row span{display:block}.activity-row b{font-size:8px}.activity-row span{font-size:8px;color:#64748b;margin-top:2px}.activity-row time{font-size:7px;color:#94a3b8;white-space:nowrap}.settings-shell{max-width:1500px;margin:0 auto}.settings-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:12px 0 14px}.settings-hero h1{font-size:24px;font-weight:850;margin:3px 0}.settings-hero p{font-size:10px;color:#7b8495;margin:0}.settings-tabs{display:flex;gap:4px;background:#fff;border:1px solid var(--border);padding:5px;border-radius:13px;margin-bottom:14px;box-shadow:var(--shadow);overflow:auto}.settings-tabs a{white-space:nowrap;text-decoration:none;padding:9px 13px;border-radius:9px;color:#64748b;font-size:10px;font-weight:750}.settings-tabs a.active,.settings-tabs a:hover{background:#eef4ff;color:#1769ff}.settings-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:14px}.settings-card{padding:0;overflow:hidden}.settings-card>.row,.settings-card>.rate-current,.settings-card>.history-mini,.settings-card>.notice-box{margin-left:15px;margin-right:15px}.settings-card>.row{margin-bottom:16px}.settings-card label{font-size:9px;font-weight:750;color:#596174}.settings-badge{background:#eef4ff;color:#1769ff;border-radius:999px;padding:6px 9px;font-size:8px;font-weight:800}.rate-current{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:12px}.rate-current>div{background:#f8fafc;border:1px solid var(--border);border-radius:11px;padding:11px}.rate-current span{display:block;font-size:8px;color:#94a3b8}.rate-current strong{display:block;font-size:16px;margin-top:3px}.rate-current small{font-size:8px;color:#94a3b8}.history-mini{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-bottom:15px}.history-mini>div{border:1px dashed #dce3ed;border-radius:10px;padding:9px}.history-mini b{display:block;font-size:8px;margin-bottom:4px}.history-mini span{display:block;font-size:7px;color:#64748b;padding:3px 0}.settings-save{grid-column:1/-1;display:flex;justify-content:flex-end}.services-card{margin-top:14px}.services-card .v319-panel-head{padding-top:15px;padding-bottom:15px}
@media(max-width:1050px){.contract-summary-grid,.settings-grid{grid-template-columns:1fr}.contract-lower-grid{grid-template-columns:1fr}.settings-save{grid-column:auto}.contract-meta-top{grid-template-columns:repeat(2,1fr)}.contract-meta-top>div:nth-child(2){border-right:0}.contract-meta-top>div:nth-child(-n+2){border-bottom:1px solid var(--border)}}
@media(max-width:650px){.contract-v319-head,.settings-hero{display:block}.contract-actions{margin-top:12px}.contract-info-grid,.rate-current,.history-mini{grid-template-columns:1fr}.contract-info-grid .wide{grid-column:auto}.contract-meta-top{grid-template-columns:1fr}.contract-meta-top>div{border-right:0;border-bottom:1px solid var(--border)}.contract-meta-top>div:last-child{border-bottom:0}.v319-panel-head{align-items:flex-start}.handover-mini{display:block}.handover-stats{margin-top:8px}.settings-tabs{margin-left:-2px;margin-right:-2px}}

/* ===== V3.1.13 INVOICE DETAIL TABLE ===== */
.invoice-detail-panel{grid-column:1/-1}.invoice-detail-table-wrap{border:1px solid var(--line);border-radius:12px;overflow:auto}.invoice-detail-table{margin:0;min-width:720px}.invoice-detail-table thead th{background:#f7f9fc;border-bottom:1px solid #dfe5ee!important;color:#596174;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.45px;white-space:nowrap}.invoice-detail-table tbody td{border-bottom:1px solid #edf0f4;vertical-align:middle}.invoice-detail-table tbody tr:hover{background:#f8fbff}.invoice-detail-table tfoot th,.invoice-detail-table tfoot td{border-top:1px solid #dfe5ee!important;border-bottom:0;background:#fbfcfe;padding-top:11px;padding-bottom:11px}.invoice-detail-table tfoot tr:first-child th,.invoice-detail-table tfoot tr:first-child td{font-size:12px}.invoice-note{max-width:850px;margin:16px auto 0;padding:10px 12px;border:1px dashed #d8deea;border-radius:10px;color:#64748b;font-size:10px;background:#fafbfd}.invoice-paper .invoice-detail-table{min-width:0}.invoice-paper .invoice-detail-table th,.invoice-paper .invoice-detail-table td{padding:9px 8px}.invoice-paper .invoice-detail-table thead th{font-size:8px}.invoice-paper .invoice-detail-table tbody td{font-size:10px}.invoice-paper .invoice-detail-table tfoot td,.invoice-paper .invoice-detail-table tfoot th{font-size:10px}@media print{.invoice-note{border:0;padding:0;background:#fff;font-size:8px}}

/* V3.1.14 - hóa đơn dạng bảng ô rõ ràng */
.invoice-detail-table-wrap{border:1px solid #cfd5df;border-radius:8px;overflow:auto}
.invoice-detail-table{border-collapse:collapse!important}
.invoice-detail-table th,.invoice-detail-table td{border:1px solid #d6dbe4!important}
.invoice-detail-table thead th{background:#f4f6f9!important}
.invoice-detail-table tfoot th,.invoice-detail-table tfoot td{border:1px solid #cfd5df!important}