/* MIRIN deep navy palette, shared by desktop and mobile. */
:root{--blue:#2454c6;--muted:#536884;--border:#cbd7e8;color:#172f50;background:#e9eef6}
body{background:#e9eef6}
aside{background:#11243f;border-right:1px solid #263e5e}
.property{background:#1c3557;border-color:#355171}
.shell header{background:#163257;border-color:#26486f;box-shadow:0 3px 14px #122b4b18}
.breadcrumb,.breadcrumb b,.today,.shell header .icon-btn{color:#edf3ff}
.breadcrumb span{color:#a9bfdf}
.shell header .header-avatar{background:#e3ecff;color:#224da0}
.nav-label{color:#9db3d1}
.shell footer{color:#526987}
#app h1,#app h2,#app h3{color:#173e70}
#app p,#modal p{color:#4d6380}
#app small,#modal small{color:#536b89}
#app .dash-flow > .card-head > div > p{color:#c93544}
#app .card{border-color:#c9d6e8;box-shadow:0 5px 16px #17345a08}
#app .card-head{background:#e6eef9;border-bottom:1px solid #c9d8ed}
#app .card-head h2{color:#1c457c}
#app .btn,#modal .btn{border-color:#b8cbe4;color:#244f87;background:#f1f5fc}
#app .btn.primary,#modal .btn.primary{background:#2454c6;color:white;border-color:#2454c6;box-shadow:0 3px 9px #2454c624}
#app .btn.line,#modal .btn.line,.shell header .btn.line{background:#008b58;color:white;border-color:#008b58}
#app .btn.danger,#modal .btn.danger{background:#fce5e2;color:#ad362c;border-color:#e6b5ae}
#app .text-btn,#modal .text-btn{color:#2454b5}
#app .tabs{border-color:#bdcce2}
#app .tab{color:#516883}
#app .tab.active{color:#194eae;border-bottom-color:#2454c6}
#app .filters .btn.active{background:#2454c6;color:white;border-color:#2454c6}
#app .badge,#modal .badge{background:#dce8fc;color:#214e96;font-weight:500}
#app .badge.paid,#modal .badge.paid{background:#ceeade;color:#126340}
#app .badge.overdue,#modal .badge.overdue{background:#f8dcd6;color:#a3322a}
#app .badge.wait,#modal .badge.wait{background:#fae5b9;color:#80530f}
#app .green{color:#087754}#app .red{color:#b7372f}#app .amber{color:#945d11}
#app input:not([type=checkbox]):not([type=radio]),#app select,#app textarea,
#modal input:not([type=checkbox]):not([type=radio]),#modal select,#modal textarea{border-color:#b6c8e1;color:#193b64}
#app input:focus,#app select:focus,#app textarea:focus,#modal input:focus,#modal select:focus,#modal textarea:focus{outline:2px solid #7fa5e3;outline-offset:1px}
#app .stat{border-color:#c3d3e9;border-top:4px solid #2454c6;background:#fff}
#app .stat-top,#app .stat-bottom{color:#4e6788}
#app .stat-value{color:#153c72}
#app .stat:nth-child(1){border-top-color:#087754}
#app .stat:nth-child(3){border-top-color:#ac691d}
#app .stat.profit-stat{border-top-color:#6950a6}
#app .flow-step{border-color:#bdd0ec}
#app .progress,#app .meter-progress .progress{background:#cbdaf0}
#app .progress span,#app .progress div{background:#2454c6}
#app .todo-icon{background:#dce8fa;color:#315e9b}
#app .meter-progress{background:#dfeafb;border-color:#b4cbed;color:#1b437b}
#app .billing-cycle{border-color:#bfd0e8;background:#fff}
#app .cycle-heading strong{color:#173e70}
#app .cycle-icon{background:#2454c6;color:white}
#app .deposit-overview .money-item{border-color:#bfd0e6;background:#eef3fb}
#app .deposit-overview .money-item:first-child{background:#d6eee5;border-color:#9fcfbc}
#app .building-card{border-color:#bccfe8}
#app .building-card.building-total{background:#e0eafb;border-color:#a7bee3}
#app .building-mark{background:#2454c6;color:white}
#app .building-income>strong,#app .building-profit>strong{color:#087754}
#app .employee-card{border-color:#bfcfe5;border-left-color:#2454c6}
#app .employee-wage{background:#dfeafb}
#app .setting-row{border-color:#bfcee4}
#app .settings-actions{background:#dce7f6;border-color:#b9cbe6}
#app .attention{background:#dfe9fa;border-color:#b7ccec;color:#345884}
#modal{background:#fff;color:#193b64}
#modal .modal-head,#modal:has(.room-detail-layout) .modal-head{background:#17375f;border-color:#294e7c;border-radius:12px;padding:16px;margin-bottom:18px}
#modal .modal-head h2,#modal:has(.room-detail-layout) .modal-head h2{color:white}
#modal .modal-head .close,#modal:has(.room-detail-layout) .modal-head .close{background:#ffffff1f;color:white}
#modal:has(#meter-form) .modal-head{background:#17375f;border-color:#294e7c}
#modal:has(#meter-form) .modal-head h2{color:white;min-width:0}
#modal:has(#meter-form) .modal-head .close{background:#edf3ff;color:#17375f;flex:none;width:44px;height:44px;font-size:28px;display:grid;place-items:center}
#modal:has(#meter-form) .modal-head .close:focus-visible{outline:3px solid #91b6ff;outline-offset:3px}
#modal .rd-hero{background:#e1ebfa;border-color:#b1c8e8;border-left-color:#2454c6}
#modal .rd-section h3{background:#dfe9f9;color:#244c83}
#modal .room-section-tabs{background:#cfddef}
#modal .room-section-tabs button{color:#466181}
#modal .room-section-tabs button.active{background:#2454c6;color:white}
#modal .desktop-room-location,#modal .desktop-room-counter{color:#d5e3f7}
#modal .desktop-room-step{background:#294e7b;color:white;border-color:#55779d}
.bulk-preview-total{background:#dce8fb;border-color:#aac3ea}
.bulk-preview-total strong{color:#194caa}
@media(min-width:701px){
 #app .desktop-filter-toolbar{background:#e4edf9;border-color:#b8cce8}
 #app .desktop-filter-toolbar label>span{color:#365982}
 #app .desktop-filter-toolbar input,#app .desktop-filter-toolbar select{background:#fff;border-color:#b2c8e5;color:#1e446f}
 #app .desktop-filter-clear{background:#d1e0f6;color:#204e8e;border-color:#aac3e7}
 #app .desktop-bulk-bar{background:#dbe7fb;border-color:#a9c1e7}
 #app .desktop-list thead th{background:#23466f;color:#f3f7ff;border-color:#325780}
 #app .desktop-list thead .desktop-sort{color:#f3f7ff}
 #app .desktop-sort::after{color:#a9c8f5}
 #app .desktop-list th[aria-sort=ascending] .desktop-sort,#app .desktop-list th[aria-sort=descending] .desktop-sort{color:#b8d5ff}
 #app .desktop-list tbody tr:nth-child(even){background:#f0f4fb}
 #app .desktop-list tbody tr:hover{background:#dfeafb}
 #app .desktop-list .room-no{color:#1e4b88}
 #app .desktop-list .manage-btn{background:#2454c6;color:white;border-color:#2454c6}
 #app #bill-pick-rows>tr.bulk-row-selected,#app .desktop-list tbody tr.desktop-room-selected{background:#dce8fc;box-shadow:inset 4px 0 #2454c6}
 #app .type-table thead th,#app .staff-table thead th,#app .perm-table thead th{background:#23466f;color:white}
}
@media(max-width:600px){
 body{background:#e8eff8}
 .mnav{background:#173254;border-top:1px solid #294b75;box-shadow:0 -4px 16px #14305120}
 .mnav button{color:#c1d1e7}
 .mnav button.active{background:#2a59bb;color:white}
 #app .page-heading h1{color:#163e74}
 #app .tabs:not(.room-tabs),#app .room-tabs.tabs,#app[data-view]>.mobile-segment,#app[data-view=dashboard]>.dash-tabs{background:#d2dff1;border-color:#b4c8e4}
 #app .tabs .tab.active,#app[data-view]>.mobile-segment .tab.active,#app[data-view=dashboard]>.dash-tabs .tab.active{background:#2454c6;color:white;box-shadow:0 3px 8px #254d9520}
 #app .tab.active .count{background:#ffffff2b;color:white}
 #app .mh-title{padding:18px;border-radius:17px;background:linear-gradient(120deg,#16375e,#254f88);box-shadow:0 6px 16px #183c6a1c}
 #app .mh-title h2{color:white}
 #app .mh-title>div>span,#app .mh-period{color:#c7d9f3}
 #app .mh-stats button{background:#e0eafa;border-color:#a9bfdf;color:#264a7c}
 #app .mh-stats button:nth-child(2){background:#14664f;border-color:#14664f;color:white}
 #app .mh-stats button:nth-child(2) strong,#app .mh-stats button:nth-child(2) em{color:white}
 #app .mh-stats button:nth-child(3){background:#f3dfc4;border-color:#dcb989;color:#794911}
 #app .mh-stats button:nth-child(3) strong,#app .mh-stats button:nth-child(3) em{color:#845014}
 #app .mh-menu button{color:#214a80;font-weight:500}
 #app .mh-menu button>span{background:#d3e2f9;color:#214e98;border-color:#a6bee2;box-shadow:0 3px 8px #2149760b}
 #app .mh-tasks .card-head{background:#dce8f8}
 #app .stats.stats-5 .stat:nth-child(1){background:#0f715f}
 #app .stats.stats-5 .stat:nth-child(2){background:#2454b7}
 #app .stats.stats-5 .stat:nth-child(3){background:#ae6926}
 #app .stats.stats-5 .stat.profit-stat{background:#624c9f}
 #app .stats.stats-5 .stat:not(:nth-child(4)) .stat-value{color:white}
 #app .stats.stats-5 .stat:nth-child(4){background:#cfddf1;color:#244875}
 #app table.room-directory.stack tbody tr{background:linear-gradient(115deg,#fff 35%,#e2ebfa);border-color:#b0c6e8;border-left-color:#2454c6}
 #app table.room-directory.stack .room-no{background:#ccddf8;color:#1e4b99}
 #app table.room-directory.stack tr.room-mobile-vacant{background:linear-gradient(115deg,#fff 35%,#dbefe6);border-color:#a3d2bc;border-left-color:#15845a}
 #app table.room-directory.stack tr.room-mobile-vacant .room-no{background:#c7e8d6;color:#116941}
 #app table.room-directory.stack tr.room-mobile-booking{border-left-color:#b97c1e;background:linear-gradient(115deg,#fff 35%,#f7e8c8)}
 #app table.room-directory.stack tr.room-mobile-repair{border-left-color:#bd5040;background:linear-gradient(115deg,#fff 35%,#f6ddd7)}
 #app table.stack .btn.primary,#app table.room-directory.stack .manage-btn{background:#2454c6;color:white;border-color:#2454c6}
 #app table.room-directory.stack tr.room-mobile-vacant .manage-btn{background:#15845a;border-color:#15845a}
 #app .mobile-row-toggle{background:#dce7f8;color:#31588e}
 #app .mobile-detail-line>span:first-child{color:#506d8f}
 #app .mobile-fold-toggle{background:#e7eef9;color:#214974}
 #app[data-view=settings] .card-head,#app[data-view=users] .card-head,#app[data-view=leaves] .card-head{background:#d9e5f6}
 #app[data-view=settings] .setting-row,#app[data-view=settings] table.stack tbody tr.tt-row{background:linear-gradient(120deg,#fff 40%,#e1ebfa);border-color:#b4c8e6;border-left-color:#2454c6}
 #app[data-view=settings] [data-pane=util] .setting-row{background:linear-gradient(120deg,#fff 40%,#dcefe9);border-color:#abd1c5;border-left-color:#1c866d}
 #app[data-view=settings] .tt-name{background:#dce8fa;border-color:#b7cceb;color:#1f4b87}
 #app[data-view=meters] .meter-room-card{--meter-pale:#d8e8fb;--meter-ink:#24528a}
 #modal:has(.room-detail-layout) .modal-head{border-radius:0;margin:0}
}