/* Shared, quiet surfaces and a single navy accent for desktop and mobile. */
:root{--ui-page:#f5f6f8;--ui-surface:#fff;--ui-subtle:#f8f9fb;--ui-line:#e2e6ec;--ui-ink:#253247;--ui-muted:#5e6b7d;--ui-accent:#24446a;--ui-selected:#edf2f8;--ui-shadow:0 2px 8px #25324705;--blue:var(--ui-accent);--text:var(--ui-ink);--muted:var(--ui-muted);--border:var(--ui-line)}
html[data-theme=dark]{--ui-page:#151d29;--ui-surface:#202b3a;--ui-subtle:#263242;--ui-line:#3a485b;--ui-ink:#e6edf6;--ui-muted:#b2bfd0;--ui-accent:#a8c4eb;--ui-selected:#304461;--ui-shadow:none;color-scheme:dark}
body,body .shell{background:var(--ui-page)!important;color:var(--ui-ink)}
body{line-height:1.6}
#app{background:transparent;color:var(--ui-ink)}
#app :is(h1,h2,h3,h4){color:var(--ui-ink)!important;letter-spacing:0}
#app h1{font-size:27px;font-weight:700;line-height:1.4}
#app :is(.page-heading p,.hint,.muted,.desktop-filter-result,.desktop-table-bar span,.rph-floor-head>span,.rp-menu-label,.tenant-stat>span){color:var(--ui-muted)!important}
#app .page-heading{margin-bottom:24px;align-items:center}
#app .page-heading p{margin-top:5px;font-size:14px}
#app :is(.card,.stat,.tenant-stat,.room-plan-stat,.bp-stat,.rph-stat,.rp-side){background:var(--ui-surface)!important;border:1px solid var(--ui-line)!important;border-radius:12px;box-shadow:var(--ui-shadow)!important}
#app :is(.card-head,.desktop-table-bar,.rph-floor-head,.tenant-list-heading){background:var(--ui-surface)!important;border-bottom:1px solid var(--ui-line);padding:16px 20px}
#app .card-head h2{font-size:18px;font-weight:650}
#app .card-head p{font-size:13px;color:var(--ui-muted)}
#app :is(.stat,.tenant-stat,.bp-stat){border-top-width:1px!important}
#app :is(.stat-value,.tenant-stat strong,.bp-stat strong,.rph-stat strong){color:var(--ui-ink);font-variant-numeric:tabular-nums}
#app :is(.filters,.desktop-filter-toolbar,.billing-cycle,.period-inline,.rph-search){background:var(--ui-surface)!important;border-color:var(--ui-line)!important;box-shadow:none!important}
#app .desktop-filter-toolbar{padding:16px 18px;border-radius:12px;margin-bottom:16px}
#app :is(.desktop-filter-field>span,.desktop-filter-search>span,.field>label){font-size:13px;color:var(--ui-muted)!important;font-weight:500}
#app :is(input:not([type=checkbox]):not([type=radio]),select,textarea),#modal :is(input:not([type=checkbox]):not([type=radio]),select,textarea){background-color:var(--ui-surface)!important;color:var(--ui-ink)!important;border-color:var(--ui-line)!important;border-radius:8px;font-size:15px;min-height:42px;box-shadow:none}
input::placeholder,textarea::placeholder{color:var(--ui-muted);opacity:.85}
#app :is(input,select,textarea):focus,#modal :is(input,select,textarea):focus{outline:2px solid #8da7c7;outline-offset:2px}
#app .btn,#modal .btn{background:var(--ui-surface);color:var(--ui-accent);border-color:var(--ui-line);border-radius:8px;box-shadow:none;font-weight:600}
#app .btn.primary,#modal .btn.primary{background:#24446a!important;border-color:#24446a!important;color:#fff!important;box-shadow:none!important}
#app .btn.line,#modal .btn.line{background:#15704e;color:#fff;border-color:#15704e}
#app .btn.danger,#modal .btn.danger{background:#fff1f2;color:#a13d49;border-color:#efd6da}
#app .btn:disabled,#modal .btn:disabled{opacity:.48}
#app .text-btn{color:var(--ui-accent)}
#app :is(.tabs,.view-toggle){background:transparent!important;border-color:var(--ui-line)!important;box-shadow:none}
#app .tabs{gap:4px;padding:0;border-radius:0;border-bottom:1px solid var(--ui-line);margin-bottom:20px}
#app .tabs .tab{background:transparent!important;color:var(--ui-muted)!important;border:0;border-bottom:2px solid transparent!important;border-radius:0!important;padding:12px 16px;font-weight:500}
#app .tabs .tab.active{background:transparent!important;color:var(--ui-accent)!important;border-bottom-color:var(--ui-accent)!important;font-weight:700;box-shadow:none!important}
#app .view-toggle button{background:var(--ui-surface);border-color:var(--ui-line);color:var(--ui-muted)}
#app .view-toggle button.active{background:var(--ui-selected)!important;color:var(--ui-accent)!important;border-color:var(--ui-accent)!important}
#app .count.gray{background:var(--ui-selected);color:var(--ui-muted)!important}
#app :is(.desktop-list,.room-table,.rp-table,.compact-table) thead,#app table thead th{background:var(--ui-subtle)!important;color:var(--ui-muted)!important;border-bottom:1px solid var(--ui-line)!important;box-shadow:none}
#app thead .desktop-sort{color:var(--ui-muted)!important;font-size:13px;font-weight:600}
#app table tbody td{color:var(--ui-ink);border-bottom-color:var(--ui-line);font-size:15px;vertical-align:middle}
#app table tbody tr{background:var(--ui-surface)}
#app table tbody tr:nth-child(even){background:var(--ui-subtle)}
#app table tbody tr:hover{background:var(--ui-selected)}
#app table :is(th,td){padding-top:14px;padding-bottom:14px}
#app :is(.room-no,.tenant-room-number){color:var(--ui-accent);font-weight:700}
#app .manage-btn{background:var(--ui-selected);color:var(--ui-accent);border:1px solid var(--ui-line);box-shadow:none}
#app :is(.rp-menu-group,.di-acc,.tenant-building,.rd-extra){background:var(--ui-subtle);border-color:var(--ui-line)}
#app .rp-menu-btn{background:var(--ui-surface);color:var(--ui-ink);border-color:var(--ui-line);box-shadow:none}
#app .rp-menu-btn.active{background:var(--ui-selected);color:var(--ui-accent);border-color:var(--ui-accent);box-shadow:none}
#app .tenant-stat.is-active,#app .tenant-stat.active{background:var(--ui-selected)!important;border-color:var(--ui-accent)!important;box-shadow:none!important}
#app .tenant-toolbar{border-color:var(--ui-line)}
#app .tenant-view{background:var(--ui-selected);color:var(--ui-accent);border-color:var(--ui-line)}
/* Room tiles use labelled states rather than large blocks of saturated colour. */
#app .rph-q{flex:1;max-width:560px}
#app .rph-q-box{border-color:var(--ui-line);background:var(--ui-surface)}
#app .rph-search{padding:14px 18px}
#app .rph-stat{padding:14px 18px}
#app .rph-stat strong{font-size:24px;font-weight:700}
#app .rph-stat.is-active{background:var(--ui-selected)!important;border-color:var(--ui-accent)!important;box-shadow:none!important}
#app .rph-stat i{width:38px;height:38px;font-size:18px}
#app .rph-stat.c-green i{background:#e7f3ed;color:#287257}
#app .rph-stat.c-amber i{background:#fcf1df;color:#936320}
#app .rph-stat.c-red i{background:#fae9ec;color:#a24a58}
#app .rph-stat.c-blue i{background:#edf2f8;color:#345880}
#app .rph-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;padding:16px 18px}
#app .rph-room{min-width:0;gap:0;text-align:left}
#app .rph-box{aspect-ratio:auto;min-height:105px;align-items:flex-start;justify-content:flex-start;padding:12px;gap:5px;border:1px solid var(--ui-line);background:var(--ui-surface);color:var(--ui-ink);box-shadow:none}
#app .rph-box.has-person.st-occupied{background:var(--ui-surface);color:var(--ui-ink);border-color:var(--ui-line)}
#app .rph-box.st-vacant{background:#f3f8f5;color:#2b6652;border-color:#cee1d7}
#app .rph-box.st-booking{background:#fffbf3;color:#815b22;border-color:#eadcc1}
#app .rph-box.st-repair{background:var(--ui-subtle);color:var(--ui-muted);border-color:var(--ui-line)}
#app .rph-box.has-person.st-overdue{background:#fff7f8;color:#963d4b;border-color:#eccdd3}
#app .rph-tile-top{display:flex;align-items:center;justify-content:space-between;width:100%;gap:6px}
#app .rph-box .rph-no{font-size:21px;font-weight:750;color:inherit;line-height:1.2}
#app .rph-box .person-ic{width:22px;height:25px;color:#71869d}
#app .rph-room-state{font-size:12px;display:flex;align-items:center;gap:5px;color:inherit}
#app .rph-room-state:before{content:'';width:5px;height:5px;background:currentColor;border-radius:50%}
#app .rph-box :is(small,.rph-room-type){font-size:12px!important;color:var(--ui-muted)!important;font-weight:400;line-height:1.4;white-space:normal;overflow-wrap:anywhere}
#app .rph-box .rph-room-note{font-weight:600;color:inherit!important}
#app .rph-room:hover .rph-box{transform:none;border-color:#8ca4bf;box-shadow:0 2px 6px #2532470a}
#modal{background:var(--ui-surface);color:var(--ui-ink);border:1px solid var(--ui-line);box-shadow:0 20px 80px #16243730}
#modal .modal-head{background:var(--ui-subtle)!important;color:var(--ui-ink)!important;border:0;border-bottom:1px solid var(--ui-line);border-radius:8px;padding:14px 16px}
#modal .modal-head h2{color:var(--ui-ink)!important;font-size:20px}
#modal .close{background:var(--ui-selected);color:var(--ui-accent);min-width:40px;min-height:40px}
#modal :is(.rd-section,.rd-hero,.rd-manage,.rd-extra){background:var(--ui-subtle);border-color:var(--ui-line);color:var(--ui-ink)}
#modal-content :is(p,.hint,.muted,.field>label){color:var(--ui-muted)!important}
body .gs-bar{background:transparent!important}
body .gsearch{background:var(--ui-surface)!important;border:1px solid var(--ui-line)!important;border-radius:9px;box-shadow:none!important}
body .gsearch input{background:transparent;color:var(--ui-ink)}
@media(min-width:601px){
 :root{--topbar-h:56px;--menubar-h:64px}
 body .shell>header{background:var(--ui-surface)!important;color:var(--ui-ink)!important;border-bottom:1px solid var(--ui-line)!important}
 body .shell>header :is(.breadcrumb,.breadcrumb b,.today,.icon-btn){color:var(--ui-muted)!important}
 body .shell>header .icon-btn:hover{background:var(--ui-selected)!important}
 body aside{background:var(--ui-surface)!important;border-bottom:1px solid var(--ui-line)!important;box-shadow:none!important}
 body aside .brand{color:var(--ui-accent)!important;letter-spacing:.2px}
 body aside .brand .koko-wordmark{color:var(--ui-accent)!important}
 body aside nav#nav{gap:2px;padding:0 10px!important}
 body aside nav#nav button{color:var(--ui-muted)!important;min-width:76px;gap:5px!important;padding:8px 12px!important;font-weight:500}
 body aside nav#nav button:hover{background:var(--ui-subtle)!important;color:var(--ui-accent)!important}
 body aside nav#nav button.active{background:var(--ui-selected)!important;color:var(--ui-accent)!important;border-bottom-color:var(--ui-accent)!important}
 body aside nav#nav button .count{background:#b45865}
 body .shell>main#app{padding:24px 32px 36px;max-width:1360px}
 body .shell>.gs-bar{padding:18px 32px 0;max-width:1360px}
 body .shell>footer{max-width:1360px;margin:auto;padding:20px 32px;color:var(--ui-muted)}
}
@media(min-width:601px) and (max-width:900px){body .shell>header .today{display:none}body .shell>header{padding-left:170px!important}}
@media(max-width:600px){
 body .shell>header{background:var(--ui-surface)!important;color:var(--ui-ink)!important;border-bottom:1px solid var(--ui-line)!important;box-shadow:none!important}
 body .shell>header :is(.breadcrumb,.breadcrumb-property,.icon-btn){color:var(--ui-accent)!important}
 #app{padding:16px 14px 100px!important}
 #mnav{background:var(--ui-surface)!important;border-color:var(--ui-line)!important;box-shadow:0 -2px 10px #25324706!important}
 #mnav button{color:var(--ui-muted)!important}
 #mnav button.active{background:var(--ui-selected)!important;color:var(--ui-accent)!important}
}
@media(max-width:600px){
 #app :is(.card-head,.rph-floor-head){padding:13px 14px}
 #app :is(.tabs,.view-toggle){background:var(--ui-surface)!important;border:1px solid var(--ui-line)!important;border-radius:10px;padding:3px;gap:3px}
 #app .tabs .tab{min-height:44px;padding:8px 6px;border-radius:7px!important;border-bottom:0!important;font-size:14px}
 #app .tabs .tab.active{background:var(--ui-selected)!important;border-bottom:0!important}
 #app :is(input:not([type=checkbox]):not([type=radio]),select,textarea){min-height:44px;font-size:16px!important}
 #app :is(.mbl-summary-card,.mbl-card,.mbl-search,.mbl-filter>summary,.tenant-mobile-card,.mh-stats button,.home-tasks button){background:var(--ui-surface)!important;border-color:var(--ui-line)!important;color:var(--ui-ink);box-shadow:var(--ui-shadow)!important}
 #app .mbl-tabs{background:var(--ui-subtle);border-color:var(--ui-line)}
 #app .mbl-tab{color:var(--ui-muted);font-size:13px}
 #app .mbl-tab.active{background:#24446a;color:#fff}
 #app .mbl-card-copy>small,#app .mbl-card-status{font-size:12px}
 #app .mbl-card-copy>small{color:var(--ui-muted)!important}
 #app .mbl-summary-amount{font-size:22px;color:var(--ui-ink)}
 #app .mbl-card-value>strong{font-size:19px;color:var(--ui-ink)}
 #app .mop-reading>span{background:var(--ui-subtle);border-color:var(--ui-line)}
 #app .mop-reading .mop-current{background:var(--ui-selected)}
 #app .mh-stats strong{color:var(--ui-ink)!important}
 #app .rph-search{padding:12px}
 #app .rph-search-row{flex-wrap:nowrap;align-items:center;gap:8px}
 #app .rph-q>span:first-child{display:none}
 #app .rph-q-box{width:100%;min-width:0}
 #app .rph-filter-btn{padding:8px;font-size:12px;min-height:44px;flex:none}
 #app .rph-filters{display:grid;grid-template-columns:1fr 1fr}
 #app .rph-filters select{min-width:0;width:100%}
 #app .rph-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:12px}
 #app .rph-box{padding:9px;min-height:104px;gap:6px}
 #app .rph-box .rph-no{font-size:19px}
 #app .rph-box .person-ic{width:16px;height:20px}
 #app .rph-stat{padding:11px 12px;gap:6px}
 #app .rph-stat strong{font-size:20px}
 #app .rph-stat span{font-size:12px}
 #app .rph-stat i{width:30px;height:30px}
 #modal .app-menu-item{background:var(--ui-surface)!important;border-color:var(--ui-line)!important;color:var(--ui-ink)!important;box-shadow:none!important}
 #modal .app-menu-item.is-current{background:var(--ui-selected)!important;border-color:var(--ui-accent)!important}
 #modal .app-menu-icon{background:var(--ui-selected)!important;color:var(--ui-accent)!important}
 #modal .app-menu-item.is-current small{color:var(--ui-muted)!important}
}
/* Electricity retains the requested soft rose accent within the same layout. */
body:has(#app .kind-electric.is-active) .shell{background:#faf5f6!important}
#app:has(.kind-electric.is-active) table thead th{background:#fbf0f2!important;color:#7c4750!important}
#app:has(.kind-electric.is-active) .btn.primary{background:#9e5260!important;border-color:#9e5260!important;color:white!important}
#app:has(.kind-electric.is-active) .tabs .tab.active{color:#8f4654!important;border-bottom-color:#b47783!important}
#app:has(.kind-electric.is-active) .mop-current{background:#fff0f2;border-color:#e8cbd1}
html[data-theme=dark] body:has(#app .kind-electric.is-active) .shell{background:var(--ui-page)!important}
@media(max-width:350px){#app .rph-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#app .mbl-card-copy>small,#app .mbl-card-status{font-size:11px}#app .mbl-card-value>strong{font-size:17px}}
/* Building and billing controls share the same understated selection style. */
body aside .brand .koko-wordmark :is(b,span){color:var(--ui-accent)!important}
#app .room-plan-buildings button{background:var(--ui-surface);color:var(--ui-ink);border:1px solid var(--ui-line);box-shadow:none}
#app .room-plan-buildings button[aria-pressed=true]{background:var(--ui-selected);color:var(--ui-accent);border-color:var(--ui-accent)}
#app .bp-building{background:var(--ui-surface);border-color:var(--ui-line);border-radius:12px}
#app .bp-bhead{background:var(--ui-surface);color:var(--ui-ink);border-bottom:1px solid var(--ui-line);padding:14px 18px}
#app .bp-bhead>span{color:var(--ui-muted)}
#app .bp-bhead h2 span{background:var(--ui-selected);color:var(--ui-accent);border-color:var(--ui-line)}
#app .bp-floor{background:var(--ui-surface);border-color:var(--ui-line)}
#app .bp-floor h3{font-size:17px;font-weight:650;border-right-width:1px;border-right-color:var(--ui-line)}
#app .bp-tile{background:var(--ui-surface);border:1px solid var(--ui-line);color:var(--ui-ink);align-items:flex-start;padding:12px;text-align:left;min-height:96px;box-shadow:none}
#app .bp-tile strong{font-size:22px;font-weight:700}
#app .bp-state{background:var(--bg);color:var(--c);padding:2px 7px;font-weight:500}
#app .bp-amt{color:var(--ui-ink);font-size:14px;font-variant-numeric:tabular-nums}
#app .bp-tile.st-overdue{border-color:#e5bcc4;background:#fff9fa;color:#953b4c}
#app .bp-tile:hover{filter:none;border-color:#8ca4bf;box-shadow:none}
#app .bp-stat.is-active{border-color:var(--ui-accent)!important;background:var(--ui-selected)!important}
#app .rp-menu button{background:var(--ui-surface);border-color:var(--ui-line);color:var(--ui-ink)}
#app .rp-menu button.active{background:var(--ui-selected);border-color:var(--ui-accent);color:var(--ui-accent);box-shadow:none}
#app .rp-menu button .rp-menu-icon{background:var(--ui-subtle);color:var(--ui-muted)}
#app .rp-menu button.active .rp-menu-icon{background:var(--ui-selected);color:var(--ui-accent)}
#app .meter-kind-tabs{background:var(--ui-surface);border-color:var(--ui-line);box-shadow:none}
#app .meter-kind-button.kind-water.is-active{background:#24446a;color:#fff;border-color:#24446a;box-shadow:none}
#app .filters .btn.active,#app .filter-chip.active{background:var(--ui-selected)!important;color:var(--ui-accent)!important;border-color:var(--ui-accent)!important}
#app .ms-floor-head{background:var(--ui-subtle);border-color:var(--ui-line)}
#app .ms-floor-head>span{color:var(--ui-muted)}
#app .ms-input{border-color:var(--ui-line);background:var(--ui-surface)}
#app .ms-input>span{background:var(--ui-selected);color:var(--ui-accent)}
#app .ms-savebar{background:var(--ui-surface);border-color:var(--ui-line);box-shadow:0 3px 12px #2532470d}
#app .ms-savebar #ms-changed{color:var(--ui-muted)}
#modal .room-section-tabs{background:var(--ui-subtle);border:1px solid var(--ui-line);padding:4px;border-radius:10px}
#modal .room-section-tabs button{background:transparent;color:var(--ui-muted);min-height:44px;font-weight:500}
#modal .room-section-tabs button.active{background:var(--ui-selected);color:var(--ui-accent);box-shadow:none;font-weight:650}
#modal .summary-row>span:first-child{color:var(--ui-muted)}
@media(max-width:600px){
 #app .ms-savebar{flex-wrap:nowrap;gap:7px;padding:9px 10px;bottom:76px}
 #app .ms-savebar #ms-changed{font-size:12px;line-height:1.4;min-width:0;flex:1}
 #app .ms-savebar .btn{font-size:12px;padding:8px;min-height:44px;white-space:nowrap}
 #app .ms-savebar #ms-save{min-width:88px}
 #app .ms-savebar:has(#ms-error:not(:empty)){flex-wrap:wrap}
 #app .tenant-building>button{background:transparent;color:var(--ui-muted)}
 #app .tenant-building>button.active,#app .tenant-building>button[aria-pressed=true]{background:var(--ui-selected);color:var(--ui-accent);box-shadow:none}
 #app .tenant-mobile-open{color:var(--ui-ink)}
 #app .tenant-mobile-room{background:var(--ui-selected)}
 #app .tenant-list-card{background:transparent!important}
 #app .tenant-list-heading{background:transparent!important}
}
html[data-theme=dark] #app :is(label,.rph-stat span,.ms-old,.bp-head,.rp-menu-label,.tenant-mobile-open,.stat-label,.work-tenant,.setting-row small){color:var(--ui-muted)!important}
html[data-theme=dark] #app .rph-box.st-vacant{background:#233d34;color:#b6dfcb;border-color:#446654}
html[data-theme=dark] #app .rph-box.st-booking{background:#40382a;color:#ead2a4;border-color:#746044}
html[data-theme=dark] #app .rph-box.has-person.st-overdue,html[data-theme=dark] #app .bp-tile.st-overdue{background:#422e38;color:#efbbc8;border-color:#754451}
html[data-theme=dark] #app .tenant-line-help{background:var(--ui-subtle);border-color:var(--ui-line);color:var(--ui-ink)}
html[data-theme=dark] #modal :is(.summary-row,.rd-rent,.rd-section h3){color:var(--ui-ink)}
@media print{#app table thead th{background:#f4f4f4!important;color:#333!important}}