.mobile-fold-toggle,.mobile-row-toggle-cell,.mobile-quick{display:none!important}
.mobile-fold{display:contents}
.mobile-filter-chips{display:contents}
.billing-cycle.period-bar{display:grid;grid-template-columns:minmax(240px,1fr) minmax(240px,1fr);gap:20px 28px;align-items:center;padding:22px 24px;background:#fff;border:1px solid #e5eaf3;box-shadow:0 3px 12px #20345403}
.cycle-heading{display:flex;align-items:center;gap:12px}
.cycle-heading strong{display:block;font-size:15px;color:#243651}
.cycle-heading small{display:block;font-size:14px;color:#8793a7;margin-top:3px}
.cycle-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#eef3ff;color:#3263ed;font-size:21px}
.billing-cycle .period-selects{justify-content:flex-end;gap:10px}
.billing-cycle .period-selects .field{min-width:0;width:140px}
.billing-cycle .period-selects label{font-size:14px;margin-bottom:5px}
.billing-cycle .period-selects select{height:44px;min-height:44px;padding:8px 12px;background:#f8faff;font-size:14px;border-color:#e2e8f2}
.billing-cycle .period-summary{min-width:0;max-width:none;width:100%;align-self:center;border-top:1px solid #edf0f6;padding-top:18px}
.billing-cycle .period-summary span{font-size:14px}.billing-cycle .period-summary b{font-size:21px}
.billing-cycle .period-summary .progress{height:5px;margin:10px 0 7px;background:#eef2f9}
.billing-cycle .period-summary small{font-size:14px;color:#8390a4}
.billing-cycle .method-sum{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid #edf0f6;padding-top:18px;width:100%}
.billing-cycle .method-sum>div{min-width:0;background:none;border-radius:0;padding:0 0 0 20px;border-left:1px solid #edf0f6}
.billing-cycle .method-sum strong{font-size:20px;letter-spacing:-.5px;margin:5px 0 2px;color:#253854}
.billing-cycle .method-sum small{font-size:14px;color:#8995a7}
@media(max-width:700px){
 .billing-cycle.period-bar{grid-template-columns:1fr;gap:16px;padding:18px}
 .billing-cycle .period-selects{justify-content:stretch;width:100%}
 .billing-cycle .period-selects .field{width:auto;flex:1}
 .billing-cycle .period-summary{padding-top:16px}
 .billing-cycle .method-sum{padding-top:16px}
 .billing-cycle .method-sum>div{padding:0 12px}
 .billing-cycle .method-sum>div:first-child{padding-left:0;border-left:0}
 .billing-cycle .method-sum strong{font-size:19px}
}
@media(max-width:600px){
  body{background:#f5f7fb}
  .shell header{height:58px;padding:0 16px;background:#fff;border-bottom:1px solid #edf0f5}
  .breadcrumb{font-size:14px}.breadcrumb span,.breadcrumb b{display:none}
  .header-right{gap:8px}.header-right .icon-btn{width:36px;height:36px}
  .header-avatar{width:34px;height:34px}
  main{padding:22px 16px calc(92px + env(safe-area-inset-bottom));overflow:clip}
  .page-heading{gap:14px;margin-bottom:20px}
  .page-heading h1{font-size:24px;line-height:1.35;letter-spacing:-.5px}
  .page-heading p{display:none}
  .page-heading .actions{gap:8px;flex-wrap:wrap}
  .head-period{width:100%;display:flex;gap:8px}
  .head-period select{flex:1;min-width:0;background:white}
  .stats.stats-5{gap:10px;margin-bottom:16px}
  .stat{padding:14px;border-radius:14px;box-shadow:none;min-width:0}
  .stat-top{font-size:14px;line-height:1.5}.stat-icon{display:none}
  .stat-value{font-size:24px;line-height:1.3;margin:8px 0 0;letter-spacing:-.6px}
  .stat-value em{font-size:14px;margin-left:3px}.stat-bottom{font-size:14px;margin-top:7px;line-height:1.5}
  .stats-5 .stat:nth-child(1){order:0;background:#edf3ff;border-color:#dce7ff}
  .stats-5 .stat:nth-child(3){order:1}.stats-5 .stat:nth-child(2){order:2}.stats-5 .stat:nth-child(4){order:3}
  .stats-5 .profit-stat{order:4;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px}
  .profit-stat .stat-value{font-size:22px;margin:0}.profit-stat .stat-bottom{display:none}
  .card{border-radius:14px;box-shadow:none}.card-head{padding:16px;gap:10px}.card-head h2{font-size:16px}
  .mobile-quick{display:block!important;margin-bottom:16px}.mobile-tasks:not(.mobile-quick){display:none!important}
  .mobile-quick .card-head{padding-bottom:10px}.mobile-quick .todo{padding:13px 16px;gap:12px;cursor:pointer}
  .mobile-quick .todo p{display:none}.mobile-quick .todo strong{font-size:14px}.mobile-quick .todo-icon{width:32px;height:32px;font-size:18px}
  .mobile-quick .todo b{font-size:15px}.mobile-quick .todo:focus-visible{outline:2px solid #3263ed;outline-offset:-3px}
  .mobile-fold{display:block;margin:0 0 10px;border:1px solid #e4e9f1;border-radius:14px;background:white;overflow:hidden}
  .mobile-fold-toggle{display:flex!important;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:54px;padding:14px 16px;border:0;background:white;color:#28364b;font:600 14px inherit;text-align:left;font-family:inherit}
  .mobile-fold-toggle::after{content:'＋';font-size:20px;font-weight:400;color:#738198}
  .mobile-fold.is-open>.mobile-fold-toggle::after{content:'−'}
  .mobile-fold:not(.is-open)>.mobile-fold-body{display:none}
  .mobile-fold-body>.card{border:0;border-radius:0;margin:0!important}
  [data-view=dashboard]>.split{display:block;margin:0}
  .mobile-fold .date-filters{padding:0 14px 14px!important;margin:0!important}
  .filters{margin-bottom:14px;gap:8px}.filters .btn{font-size:14px;padding:8px 14px;min-height:40px}
  .mobile-filter-chips{display:flex;width:100%;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0 6px}
  .mobile-filter-chips .btn{white-space:nowrap;flex:none}
  .mobile-fold-toggle{font-size:14px;font-weight:600}
  .mobile-row-toggle{font-size:14px}
  .tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:0}
  .tab{white-space:nowrap;flex-shrink:0;font-size:14px;padding:12px 14px}
  .period-inline{display:flex;gap:8px;margin-bottom:16px}.period-inline .field{flex:1;margin:0;min-width:0}
  .period-inline .period-label{display:none}.period-inline .field label{font-size:14px}
  table.stack tbody{display:grid;gap:12px;padding:12px}
  table.stack tbody tr{background:#fff;border:1px solid #e6ebf2;border-radius:12px;padding:14px;gap:10px 12px;box-shadow:none}
  table.stack td{font-size:14px;overflow-wrap:anywhere}
  table.stack td:first-child{grid-column:auto;font-size:18px;font-weight:600}
  table.stack td:first-child::before{display:none}
  table.stack td:nth-child(2):has(.badge){text-align:right;align-self:center}
  table.stack td:nth-child(2):has(.badge)::before{display:none}
  table.stack td[data-label]::before{font-size:14px;letter-spacing:.1px;margin-bottom:3px}
  table.stack tr:not(.mobile-expanded)>.mobile-secondary{display:none!important}
  table.stack td.mobile-row-toggle-cell{display:block!important;grid-column:1/-1;padding:0!important}
  .mobile-row-toggle{width:100%;min-height:38px;background:#f6f8fc;border:0;border-radius:8px;color:#52709c;font:12px inherit;font-family:inherit}
  table.stack td.no-label{grid-column:1/-1}
  table.stack .btn,table.stack .text-btn{font-size:14px;min-height:40px;padding:8px 12px}
  table.stack .badge{font-size:14px;white-space:normal}
  aside{background:#fff;border-top:1px solid #e4e9f1;box-shadow:0 -4px 20px #21385806}
  .mnav{height:64px;padding:4px 8px;gap:4px}.mnav button{color:#8490a4;font-size:14px;border-radius:12px;gap:5px}
  .mnav button.active{color:#3263ed;background:#edf3ff;font-weight:700}.mnav button span{font-size:22px}
  dialog{width:100%!important;max-width:100%!important;max-height:92dvh!important;margin:auto 0 0;padding:20px 18px calc(22px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;box-sizing:border-box}
  .form-grid,.bm-grid{grid-template-columns:1fr!important;gap:14px}
  .field{min-width:0}.field label{font-size:14px}input,select,textarea{max-width:100%}
  .padded{padding:16px}.billing-section-head{flex-wrap:wrap;gap:12px}
  .menu-grid{grid-template-columns:repeat(2,1fr)}
  .shell footer{display:none}
}

/* Billing filters: status navigation above payment channel and search. */
.bill-filters{margin:0 0 20px;background:#fff;border:1px solid #e4eaf3;border-radius:14px;overflow:hidden}
.bill-status-tabs{display:flex;overflow-x:auto;gap:4px;padding:0 16px;border-bottom:1px solid #edf0f6;scrollbar-width:thin}
.bill-status{display:flex;align-items:center;justify-content:center;gap:7px;flex:1;white-space:nowrap;min-height:54px;padding:12px 9px;border:0;border-bottom:3px solid transparent;background:none;color:#768298;font-family:inherit;font-size:14px;cursor:pointer}
.bill-status b{font-size:14px;font-weight:600;background:#f1f4f8;color:#8390a4;padding:2px 7px;border-radius:6px;line-height:1.5}
.bill-status.selected{color:#3263ed;border-bottom-color:#3263ed;font-weight:600}
.bill-status.selected b{background:#eaf0ff;color:#3263ed}
.bill-status:hover{background:#f8faff}.bill-status:focus-visible,.bill-method:focus-visible{outline:2px solid #3263ed;outline-offset:-3px}
.bill-filter-tools{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px}
.bill-methods{display:flex;align-items:center;gap:8px;white-space:nowrap}
.bill-filter-label{font-size:14px;color:#929caf;margin-right:4px}
.bill-method{display:flex;align-items:center;gap:8px;min-height:36px;padding:6px 11px;border:1px solid #e6ebf3;background:white;border-radius:8px;color:#64738a;font-family:inherit;font-size:14px;cursor:pointer}
.bill-method span{font-size:14px;color:#96a0b0}.bill-method.selected{border-color:#aac0ff;background:#edf3ff;color:#3263ed}.bill-method.selected span{color:#3263ed}
.bill-search{display:flex;align-items:center;gap:8px;background:#f7f9fc;border:1px solid #e7edf4;border-radius:9px;padding:0 12px;min-width:180px;width:260px;color:#8c9ab0}
.bill-search>span{font-size:24px;line-height:1}.bill-search input{border:0;background:none;min-width:0;width:100%;min-height:40px;padding:8px 0;font-size:14px;box-shadow:none}
.bill-search:focus-within{border-color:#3263ed;box-shadow:0 0 0 2px #3263ed12}
@media(max-width:700px){.bill-filter-tools{flex-wrap:wrap;gap:12px}.bill-search{width:100%}.bill-status-tabs{padding:0 10px}.bill-status{flex:none;padding:12px 10px}.bill-methods{width:100%}.bill-method{flex:1;justify-content:center;min-height:40px}.bill-search input{min-height:44px}.bill-filter-label{font-size:14px}}

.building-overview{margin-bottom:24px;overflow:hidden}
.building-overview .card-head{align-items:center;border-bottom:0;padding-bottom:18px}
.building-period{font-size:14px;color:#8491a4;white-space:nowrap;background:#f5f7fb;padding:6px 10px;border-radius:7px}
.building-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:0 20px}
.building-card{padding:18px;border:1px solid #e6ebf3;border-radius:13px;min-width:0;background:#fff}
.building-card.building-total{background:#f7f9ff;border-color:#dce5ff}
.building-title{display:flex;align-items:center;gap:8px;margin-bottom:20px}
.building-title h3{font-size:14px;margin:0;color:#2a3c58;white-space:nowrap}
.building-mark{display:grid;place-items:center;width:29px;height:29px;border-radius:8px;color:#3263ed;background:#edf2ff;font-size:14px;font-weight:700}
.building-vacant{margin-left:auto;font-size:14px;color:#8996a9;white-space:nowrap}
.building-occupancy{display:flex;align-items:center;justify-content:space-between;gap:8px}
.building-occupancy>strong{font-size:25px;color:#243650;line-height:1.3}
.building-occupancy small{display:inline;font-size:14px;font-weight:400;color:#8b96a8}
.building-occupancy>span{font-size:14px;color:#3263ed}
.building-card>.progress{height:4px;margin:10px 0 22px;background:#ecf0f7}
.building-income>span,.building-profit>span{font-size:14px;color:#7d8a9e;display:block}
.building-income>strong{display:block;font-size:23px;color:#159f89;letter-spacing:-.6px;margin:5px 0}
.building-income>small{font-size:14px;color:#92a0b2}
.building-due{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:16px 0;margin:15px 0;border-top:1px solid #e8edf5;border-bottom:1px solid #e8edf5}
.building-due>span:first-child{font-size:14px;color:#8a96a9}
.building-due strong{display:block;font-size:16px;color:#34455e;margin-top:4px}
.building-late{font-size:14px;color:#cd836d;background:#fff3ee;padding:4px 6px;border-radius:6px;white-space:nowrap}
.building-profit>strong{display:block;font-size:19px;letter-spacing:-.4px;margin:5px 0}
.building-profit>small{font-size:14px;color:#9aa4b3}
.building-details{margin-top:18px;border-top:1px solid #e5ebf5;padding-top:12px}
.building-details summary{font-size:14px;color:#577099;cursor:pointer;min-height:32px;align-content:center}
.building-detail{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:10px 0;border-bottom:1px solid #edf0f5;color:#66778f}
.building-detail small{display:block;font-size:14px;color:#97a2b3;margin-top:3px}.building-detail strong{font-size:14px;font-weight:600;white-space:nowrap}
.building-note{font-size:14px;color:#919daf;margin:16px 20px 20px;line-height:1.6}
@media(min-width:701px) and (max-width:1050px){.building-cards{gap:10px;padding:0 16px}.building-card{padding:14px}.building-income>strong{font-size:20px}.building-title{gap:6px}.building-title h3{font-size:14px}}
@media(max-width:700px){.building-cards{grid-template-columns:1fr;padding:0 16px;gap:12px}.building-overview .card-head{flex-wrap:wrap;gap:8px}.building-card{padding:18px}.building-title{margin-bottom:14px}.building-income>strong{font-size:26px}.building-card>.progress{margin-bottom:18px}.building-note{margin:14px 16px 18px}}

.staff-overview{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:24px 0 20px}
.staff-eyebrow{font-size:14px;letter-spacing:1.2px;color:#8c9bb0}.staff-overview h2{font-size:19px;margin-top:5px}.staff-overview h2>span{font-size:14px;font-weight:400;color:#8796ab;margin-left:8px}
.staff-counts{display:flex;gap:20px;font-size:14px;color:#8593a8}.staff-counts b{font-size:18px;color:#435873;margin-right:4px}
.employee-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.employee-card{border:1px solid #e4eaf3;border-radius:16px;background:white;padding:20px;min-width:0}.employee-off{opacity:.7}
.employee-head{display:flex;align-items:center;gap:12px}.employee-avatar{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:#edf2ff;color:#5378d5;font-size:18px;flex-shrink:0}.employee-avatar.tone-1{background:#eaf7f3;color:#409b85}.employee-avatar.tone-2{background:#fff4e5;color:#bc955b}
.employee-head h3{font-size:14px;margin:0 0 5px;color:#283b58}.employee-state{font-size:14px;color:#50a58d}.employee-state.inactive{color:#c27c77}
.employee-edit{margin-left:auto;border:1px solid #e4eaf4;background:white;color:#5675a6;font-family:inherit;font-size:14px;min-height:36px;padding:6px 12px;border-radius:8px;cursor:pointer}.employee-edit:hover{background:#f3f7ff}
.employee-wage{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#f7f9fc;padding:14px 16px;border-radius:11px;margin:18px 0}
.employee-wage div>span{display:block;font-size:14px;color:#8e9aab;margin-bottom:5px}.employee-wage strong{font-size:22px;letter-spacing:-.5px;color:#2a405e}.employee-wage strong small{display:inline;font-size:14px;font-weight:400;letter-spacing:0;color:#8a98ac}
.employee-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-bottom:16px}.employee-meta>span{font-size:14px;color:#8a98ac}.employee-meta strong{display:block;font-size:14px;font-weight:500;color:#566b86;margin-top:5px}
.employee-account,.employee-sso{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #edf1f6;padding:12px 0;font-size:14px;color:#8b98ab}
.employee-account>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.employee-account code{font-size:14px;color:#657b9b}.employee-account .badge{font-size:14px}.employee-sso{padding-bottom:0;cursor:pointer;min-height:40px}.employee-sso input{width:18px!important;height:18px!important;min-height:18px;accent-color:#3263ed}
@media(min-width:1450px){.employee-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.staff-overview{align-items:flex-start;flex-direction:column;gap:12px}.staff-counts{gap:18px}.employee-grid{grid-template-columns:1fr;gap:12px}.employee-card{padding:18px}.employee-edit{min-height:40px}.employee-sso{min-height:44px}}

/* One employee per row, with a compact horizontal desktop layout. */
.employee-grid{grid-template-columns:minmax(0,1fr)}
@media(min-width:701px){
 .employee-card{display:grid;grid-template-columns:minmax(190px,1.3fr) minmax(170px,1fr) minmax(150px,1fr);gap:12px 20px;padding:18px 20px;align-items:center}
 .employee-head{grid-column:1;grid-row:1 / 3;position:relative;padding-bottom:42px}
 .employee-edit{position:absolute;bottom:0;left:56px;margin:0}
 .employee-wage{grid-column:2;grid-row:1 / 3;margin:0;padding:14px;flex-wrap:wrap}
 .employee-meta{grid-column:3;grid-row:1;padding:0;gap:8px}
 .employee-account{grid-column:2;grid-row:3;padding:10px 0 0}
 .employee-sso{grid-column:3;grid-row:2 / 4;padding:10px 0 0;margin:0}
}
@media(min-width:1350px){
 .employee-card{grid-template-columns:minmax(220px,1.3fr) minmax(190px,1fr) minmax(190px,1fr) minmax(170px,1fr);gap:18px}
 .employee-head{grid-row:1 / 3}.employee-wage{grid-row:1 / 3}.employee-meta{grid-row:1 / 3}
 .employee-account{grid-column:4;grid-row:1;border-top:0;padding:0}.employee-sso{grid-column:4;grid-row:2}
}

/* Compact employee rows. */
@media(min-width:701px){
 .employee-grid{gap:8px}
 .employee-card{grid-template-columns:minmax(180px,1.3fr) minmax(145px,1fr) minmax(145px,1fr) minmax(130px,.9fr);gap:6px 16px;padding:12px 16px;border-radius:10px}
 .employee-head{grid-column:1;grid-row:1 / 3;padding-bottom:0;gap:9px;flex-wrap:wrap}
 .employee-avatar{width:32px;height:32px;border-radius:9px;font-size:14px}
 .employee-head h3{font-size:14px;margin-bottom:3px}.employee-state{font-size:14px}
 .employee-edit{position:static;min-height:28px;padding:3px 8px;font-size:14px;margin-left:41px;margin-top:-3px}
 .employee-wage{grid-column:2;grid-row:1 / 3;background:none;padding:0;gap:5px;display:block}
 .employee-wage div>span{display:none}.employee-wage strong{font-size:16px;letter-spacing:0}.employee-wage strong small{font-size:14px}
 .employee-wage>.badge{display:inline-block;margin-top:4px;font-size:14px;padding:2px 6px}
 .employee-meta{grid-column:3;grid-row:1 / 3;gap:5px;display:block}.employee-meta>span{display:flex;justify-content:space-between;gap:6px;font-size:14px;margin:4px 0}.employee-meta strong{font-size:14px;margin:0}
 .employee-account{grid-column:4;grid-row:1;padding:0;border:0;font-size:14px;gap:5px}.employee-account>span{display:none}.employee-account>div{justify-content:flex-start;gap:5px}.employee-account code{font-size:14px}.employee-account .badge{font-size:14px;padding:2px 5px}
 .employee-sso{grid-column:4;grid-row:2;border:0;min-height:24px;padding:0;font-size:14px;justify-content:flex-start;gap:10px}.employee-sso input{width:15px!important;height:15px!important;min-height:15px}
 .staff-overview{margin:16px 0 12px}.staff-overview h2{font-size:16px}.staff-eyebrow{display:none}
}
@media(min-width:701px) and (max-width:1000px){.employee-card{grid-template-columns:minmax(160px,1.2fr) minmax(120px,1fr) minmax(135px,1fr);gap:6px 14px}.employee-head{grid-row:1 / 3}.employee-wage{grid-row:1}.employee-meta{grid-column:3;grid-row:1 / 3}.employee-account{grid-column:2;grid-row:2}.employee-sso{grid-column:3;grid-row:3}.employee-edit{margin-top:0}}
@media(max-width:700px){
 .employee-grid{gap:8px}.employee-card{padding:12px 14px;border-radius:11px}.employee-head{gap:9px}.employee-avatar{width:32px;height:32px;font-size:14px}.employee-head h3{font-size:14px}.employee-edit{min-height:36px;padding:5px 9px}
 .employee-wage{padding:8px 10px;margin:10px 0}.employee-wage strong{font-size:18px}.employee-wage div>span{display:none}.employee-meta{padding-bottom:8px;gap:8px}.employee-meta strong{margin-top:2px}.employee-account{padding:8px 0}.employee-sso{min-height:36px;padding-top:5px}.staff-overview{margin:14px 0 12px;gap:6px}
}

.rich-menu.tv-menu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:10px;background:#fff;border-top:1px solid #e8edf3}
.rich-menu.tv-menu .tenant-menu-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:78px;padding:10px 4px;border:1px solid #edf1f6;border-radius:12px;background:#f7f9fc;color:#536782;cursor:pointer;font-family:inherit;transition:background .15s,transform .15s}
.rich-menu.tv-menu .tenant-menu-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#eaf0f8;color:#5c759a}
.tenant-menu-icon svg{width:22px;height:22px;display:block}
.rich-menu.tv-menu .tenant-menu-label{font-size:14px;line-height:1.4;font-weight:500}
.rich-menu.tv-menu .tenant-menu-bill{background:#e9f8f0;color:#148052;border-color:#c6ead7}
.rich-menu.tv-menu .tenant-menu-bill .tenant-menu-icon{background:#1eaa70;color:white}
.rich-menu.tv-menu .tenant-menu-bill .tenant-menu-label{font-weight:700}
.rich-menu.tv-menu .tenant-menu-button:hover{background:#edf2f9}.rich-menu.tv-menu .tenant-menu-bill:hover{background:#d8f2e4}
.rich-menu.tv-menu .tenant-menu-button:active{transform:scale(.96)}
.rich-menu.tv-menu .tenant-menu-button:focus-visible{outline:2px solid #19885c;outline-offset:2px}

/* Room amenities: aligned, accessible selection tiles. */
.type-table .amen-box,.amen-box{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;min-width:250px;max-width:300px;padding:4px 0}
.amen-box .amen-chip{display:flex;align-items:center;gap:7px;min-height:34px;padding:6px 9px;border:1px solid #e6ebf2;border-radius:8px;background:#f8fafc;color:#8995a7;font-size:14px;line-height:1.4;white-space:normal;cursor:pointer;transition:background .15s,border-color .15s}
.amen-box .amen-chip input{appearance:none;flex:0 0 15px;width:15px!important;height:15px!important;min-height:15px!important;margin:0;padding:0;border:1px solid #cdd6e3;border-radius:4px;background:#fff;display:grid;place-content:center;cursor:pointer}
.amen-box .amen-chip input:checked{background:#3263ed;border-color:#3263ed}
.amen-box .amen-chip input:checked::after{content:'';width:7px;height:4px;border-left:2px solid white;border-bottom:2px solid white;transform:rotate(-45deg);margin-top:-2px}
.amen-box .amen-chip:has(input:checked){background:#edf3ff;border-color:#c8d9ff;color:#315eab;font-weight:500}
.amen-box .amen-chip:hover{border-color:#a9c2f3;background:#f0f5ff}
.amen-box .amen-chip:focus-within{outline:2px solid #3263ed;outline-offset:2px}
@media(max-width:600px){.type-table .amen-box,.amen-box{min-width:0;max-width:none;width:100%}.amen-box .amen-chip{min-height:42px;font-size:14px}.type-table.stack td:has(.amen-box){grid-column:1/-1}}

#modal:has(.room-detail-layout){width:820px;max-width:calc(100vw - 40px);padding:0;border-radius:18px;max-height:90dvh}
#modal:has(.room-detail-layout) .modal-head{position:sticky;top:0;z-index:3;background:white;padding:20px 24px;margin:0;border-bottom:1px solid #edf1f6}
.room-detail-layout{padding:20px 24px;background:#f7f9fc}
.rd-hero{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:16px;background:white;border:1px solid #e4eaf4;border-radius:13px;padding:18px;margin-bottom:16px;align-items:start}
.rd-hero .summary-row{display:flex;flex-direction:column;align-items:flex-start;gap:8px;border:0;padding:0;min-width:0;font-size:14px}.rd-hero .summary-row>span:first-child{font-size:14px;color:#8b99ad}.rd-hero small{font-size:14px;margin-top:6px;line-height:1.6}.rd-rent>strong{font-size:23px;color:#3263ed;letter-spacing:-.4px}.rd-rent small{font-weight:400;color:#91a0b3;letter-spacing:0}
.rd-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.rd-section{border:1px solid #e5ebf3;background:white;border-radius:13px;padding:16px;min-width:0}.rd-section h3{font-size:14px;margin:0 0 10px;color:#334964}
.rd-section .summary-row{display:block;padding:10px 0;font-size:14px;overflow-wrap:anywhere}.rd-section .summary-row>span:first-child{display:block;font-size:14px;color:#8a99ae;margin-bottom:5px}.rd-section .summary-row>strong{font-size:14px}.rd-section .summary-row small{font-size:14px}
.rd-extra{margin-top:10px}.rd-extra summary,.rd-manage summary{cursor:pointer;font-size:14px;color:#617da4;min-height:40px;align-content:center}.rd-manage{background:white;border:1px solid #e6ecf5;border-radius:11px;padding:4px 16px;margin-top:16px}.rd-manage[open]{padding-bottom:14px}
.rd-actions{position:sticky;bottom:0;z-index:2;display:flex;gap:8px;padding:14px 24px;background:white;border-top:1px solid #e9eef5;margin:0!important;flex-wrap:wrap}.rd-actions .btn{font-size:14px;padding:9px 12px;min-height:38px;flex:1;white-space:nowrap}
@media(max-width:600px){#modal:has(.room-detail-layout){max-width:100%;max-height:94dvh}#modal:has(.room-detail-layout) .modal-head{padding:16px}.room-detail-layout{padding:14px}.rd-hero{grid-template-columns:1fr 1fr;padding:14px;gap:14px}.rd-hero .summary-row:nth-child(2){grid-column:1/-1;grid-row:2}.rd-rent>strong{font-size:21px}.rd-grid{grid-template-columns:1fr;gap:12px}.rd-actions{padding:12px 14px calc(12px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr}.rd-actions .btn{min-height:42px;font-size:14px}}

/* Deposit balances: four equal, compact summary cards. */
.deposit-overview.money-card{background:none;border:0;box-shadow:none;overflow:visible;margin-bottom:22px}
.deposit-overview .money-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;background:none}
.deposit-overview .money-item{position:relative;min-width:0;padding:18px;border:1px solid #e4eaf3;border-radius:13px;background:white;display:flex;flex-direction:column;gap:8px}
.deposit-overview .money-item:first-child{background:#edf8f4;border-color:#cceade}
.deposit-overview .money-item>span{font-size:14px;color:#7d8ea5;line-height:1.5}
.deposit-overview .money-item:first-child>span{color:#488671}
.deposit-overview .money-item>strong{font-size:24px;line-height:1.35;letter-spacing:-.5px;margin:0;overflow-wrap:anywhere;color:#304560}
.deposit-overview .money-item:first-child>strong{color:#159d80}
.deposit-overview .money-item:nth-child(2)>strong{color:#bd8759}
.deposit-overview .money-item>small{font-size:14px;color:#93a0b3;margin:0;line-height:1.5}
@media(max-width:1200px){.deposit-overview .money-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.deposit-overview .money-grid{gap:10px}.deposit-overview .money-item{padding:14px;border-radius:12px}.deposit-overview .money-item>strong{font-size:20px}.deposit-overview .money-item>span{font-size:14px}.deposit-overview .money-item>small{font-size:14px}}

/* LINE registration review: one request per clearly grouped card. */
.req-card.card{background:none;border:0;box-shadow:none;overflow:visible}
.req-card>.card-head{padding:0 0 18px;border:0;align-items:center}
.req-card>.card-head h2{font-size:17px}.req-card>.card-head p{font-size:14px;line-height:1.7;max-width:650px}
.req-card .req-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 24px;padding:20px;margin-bottom:12px;background:white;border:1px solid #e2e9f3;border-radius:14px;align-items:start}
.req-card .req-who{min-width:0;padding-left:14px;border-left:3px solid #b7cdfb}
.req-card .req-who>strong{font-size:15px;color:#2c4260;display:block;margin-bottom:7px}
.req-card .req-who>small{font-size:14px;color:#8998ad;line-height:1.8;display:block;overflow-wrap:anywhere}
.req-card .req-who>small:last-child{margin-top:7px;color:#57759c}.req-card .req-who b{color:#3263ed;font-weight:600}
.req-card .req-sg{min-width:0;padding:12px 14px;background:#f7f9fc;border:1px solid #edf1f7;border-radius:10px}
.req-card .req-sg .badge{white-space:normal;font-size:14px;line-height:1.5}
.req-card .req-sg>small{display:block;margin-top:8px;font-size:14px;line-height:1.8;color:#8a99ae;overflow-wrap:anywhere}
.req-card .req-act{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;padding-top:14px;border-top:1px solid #edf1f6}
.req-card .req-act select{min-width:180px;width:auto;max-width:280px;flex:1;margin-left:auto;font-size:14px;min-height:40px;border-radius:9px;background:#f9fbfe}
.req-card .req-act .btn{font-size:14px;min-height:40px;border-radius:9px;padding:8px 14px;white-space:nowrap}
.req-card .req-act>.btn:first-child:not(:only-child){margin-right:auto}
.req-card .req-act .text-btn{font-size:14px;min-height:40px;padding:8px 12px;color:#b78989;border:0;background:none}
.req-card .req-act .text-btn:hover{background:#fff3f1;border-radius:9px}
@media(max-width:650px){.req-card .req-row{grid-template-columns:1fr;padding:16px;gap:14px}.req-card .req-act{display:grid;grid-template-columns:1fr auto}.req-card .req-act select{min-width:0;max-width:none;width:100%;margin:0}.req-card .req-act>.btn:first-child{margin:0;grid-column:1/-1}.req-card .req-act .text-btn{justify-self:end;grid-column:2}.req-card .req-act .btn,.req-card .req-act select{min-height:44px}}
.req-card .card-head .req-count{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 7px;margin-left:6px;background:#edf3ff;color:#3263ed;border-radius:8px;font-size:14px;vertical-align:middle}

/* Compact mobile room list with room type always visible. */
@media(max-width:600px){
 table.room-directory.stack tbody{gap:8px;padding:8px}
 table.room-directory.stack tbody tr{padding:11px 12px;gap:5px 10px;grid-template-columns:minmax(0,1fr) auto;align-items:center}
 table.room-directory.stack td:first-child{grid-column:1;grid-row:1;font-size:16px}
 table.room-directory.stack td:nth-child(3){grid-column:2;grid-row:1;text-align:right}
 table.room-directory.stack td.type-cell{grid-column:1/-1;grid-row:2;font-size:14px;color:#6f8199;line-height:1.5;text-align:left}
 table.room-directory.stack td:nth-child(4){grid-column:1;grid-row:3;font-size:14px}
 table.room-directory.stack td:nth-child(6){grid-column:2;grid-row:3;font-size:14px;text-align:right}
 table.room-directory.stack td:nth-child(7){grid-column:2;grid-row:4}
 table.room-directory.stack td.mobile-row-toggle-cell{grid-column:1;grid-row:4}
 table.room-directory.stack td:nth-child(3)::before,table.room-directory.stack td.type-cell::before,table.room-directory.stack td:nth-child(4)::before,table.room-directory.stack td:nth-child(6)::before{display:none}
 table.room-directory.stack .room-no{font-size:17px}
 table.room-directory.stack .badge{font-size:14px;padding:3px 7px}
 table.room-directory.stack .manage-btn{width:auto;min-height:36px;padding:6px 12px;font-size:14px}
 table.room-directory.stack .mobile-row-toggle{min-height:36px;padding:5px 0;background:none;text-align:left;font-size:14px;color:#8192aa}
 table.room-directory.stack tr.mobile-expanded td.end-cell{grid-column:1/-1;grid-row:5;border-top:1px solid #edf1f6;padding-top:8px!important}
}

/* App-like touch controls for the mobile room directory. */
@media(max-width:600px){
 table.room-directory.stack tbody tr{cursor:pointer;border-radius:15px;padding:13px;gap:7px 10px;transition:background .15s,transform .15s;-webkit-tap-highlight-color:transparent}
 table.room-directory.stack tbody tr:active{background:#f0f5ff;transform:scale(.99)}
 table.room-directory.stack .manage-btn{min-height:44px;min-width:110px;padding:10px 14px;border:0;border-radius:11px;background:#3263ed;color:white;font-size:14px;font-weight:600;box-shadow:0 3px 8px #3263ed20}
 table.room-directory.stack .mobile-row-toggle{min-height:44px;padding:8px 10px;text-align:center;background:#f0f4fa;border-radius:11px;color:#5d7598;font-size:14px}
 table.room-directory.stack td.mobile-row-toggle-cell{min-width:0}
 table.room-directory.stack td:nth-child(7){min-width:110px}
 table.room-directory.stack .room-no{font-size:19px}
 .room-tabs.tabs{background:white;padding:5px;border:1px solid #e5ebf5;border-radius:13px;gap:4px;margin-bottom:16px}
 .room-tabs .tab{min-height:44px;padding:10px 14px;border:0;border-radius:9px;font-size:14px;flex-shrink:0}
 .room-tabs .tab.active{background:#edf3ff;color:#3263ed;font-weight:600}
 [data-view=rooms]>.filters .btn{min-height:44px;padding:10px 15px;font-size:14px;border-radius:12px}
 [data-view=rooms]>.filters .btn.active{background:#3263ed;color:white;border-color:#3263ed}
 .mnav{height:70px;padding:5px 8px}.mnav button{min-height:56px;font-size:14px;gap:6px}.mnav button span{font-size:23px}
}

/* Shared app-like mobile controls across all workspaces. */
@media(max-width:600px){
 #app .tabs:not(.room-tabs){display:flex;flex-wrap:nowrap;background:#fff;border:1px solid #e4ebf5;border-radius:13px;padding:5px;gap:4px;overflow-x:auto;scrollbar-width:none;margin-bottom:16px}
 #app .tabs .tab{min-height:44px;padding:10px 14px;border:0;border-radius:9px;font-size:14px;white-space:nowrap;flex-shrink:0}
 #app .tabs .tab.active{background:#edf3ff;color:#3263ed;font-weight:600}
 #app .filters .btn,#app .mobile-filter-chips .btn{min-height:44px;padding:10px 14px;font-size:14px;border-radius:12px}
 #app .filters .btn.active,#app .mobile-filter-chips .btn.active{background:#3263ed;color:#fff;border-color:#3263ed}
 #app .btn,#modal .btn{min-height:44px;border-radius:11px;font-size:14px;padding:10px 14px;touch-action:manipulation}
 #app .btn.primary,#modal .btn.primary{box-shadow:0 3px 8px #3263ed18}
 #app .text-btn,#modal .text-btn{min-height:44px;border-radius:10px;padding:10px 12px;font-size:14px;touch-action:manipulation}
 #app table.stack td.no-label .actions,#app table.stack td.row-actions .actions{display:flex;flex-wrap:wrap;gap:8px}
 #app table.stack .btn,#app table.stack .text-btn{min-height:44px;border-radius:10px;font-size:14px}
 #app table.stack td.no-label>.btn,#app table.stack td.no-label>.text-btn{background:#edf3ff;border-color:#d9e5ff;color:#3263ed;font-weight:600}
 #app table.stack td.no-label>.btn.primary{background:#3263ed;color:white}
 #app .mobile-row-toggle{min-height:44px;border-radius:10px;background:#f0f4fa;font-size:14px;color:#607a9d}
 #app .mobile-fold-toggle{min-height:52px;font-size:14px}
 #app .bill-status{min-height:48px;padding:12px;font-size:14px}
 #app .bill-method{min-height:44px;border-radius:10px;font-size:14px}
 #app .employee-edit{min-height:44px;min-width:64px;background:#edf3ff;border-color:#dbe7ff;color:#3263ed;font-size:14px;border-radius:10px}
 #app .employee-sso{min-height:44px}
 #app .status-select,#app select,#modal select{min-height:44px;border-radius:11px}
 #app .menu-tile{min-height:84px;border-radius:14px}
 #app .settings-actions,#modal .settings-actions{gap:10px;flex-wrap:wrap}
 #app .settings-actions>.btn{flex:1;min-width:120px}
 #modal .actions{gap:8px;flex-wrap:wrap}
 #modal .actions>.btn{flex:1;min-width:110px}
 .btn:active,.text-btn:active,.employee-edit:active,.tab:active,.bill-method:active{transform:scale(.98)}
 #app button,#modal button{-webkit-tap-highlight-color:transparent}
 #app button:focus-visible,#modal button:focus-visible{outline:2px solid #3263ed;outline-offset:2px}
}

/* Approved rooms color concept — mobile only. */
@media(max-width:600px){
 [data-view=rooms]:has(.room-directory) .page-heading h1{color:#244c91}
 [data-view=rooms]:has(.room-directory)>.filters .btn:nth-child(2):not(.active){background:#eeebfb;border-color:#ddd7f5;color:#7660ad}
 [data-view=rooms]:has(.room-directory)>.filters .btn:nth-child(3):not(.active){background:#e9f8f2;border-color:#c6ebdc;color:#278b69}
 table.room-directory.stack tbody tr{border-color:#dce6f5;border-left:4px solid #6b8ee9;background:linear-gradient(115deg,#fff 50%,#f1f5ff);box-shadow:0 3px 10px #385f9610;border-radius:14px}
 table.room-directory.stack .room-no{display:inline-block;background:#e8efff;color:#315cb7;border-radius:8px;padding:5px 9px;font-size:16px}
 table.room-directory.stack td:nth-child(3) .badge{background:#edeaff;color:#7660b3}
 table.room-directory.stack td.amount{color:#315cb7}
 table.room-directory.stack .manage-btn{background:#3263ed;color:white;border:0}
 table.room-directory.stack .mobile-row-toggle{background:#eaf0fb;color:#5e78a4}
 table.room-directory.stack tr.room-mobile-vacant{border-color:#cbe9dd;border-left-color:#24a47e;background:linear-gradient(115deg,#fff 50%,#edf9f3)}
 table.room-directory.stack tr.room-mobile-vacant .room-no{background:#e4f6ed;color:#208664}
 table.room-directory.stack tr.room-mobile-vacant td:nth-child(3) .badge{background:#dff5e9;color:#18845e}
 table.room-directory.stack tr.room-mobile-vacant .manage-btn{background:#219c78;color:white}
 table.room-directory.stack tr.room-mobile-vacant td.amount{color:#218c6a}
 table.room-directory.stack tr.room-mobile-booking{border-left-color:#c69a44;background:linear-gradient(115deg,#fff 50%,#fffaef)}
 table.room-directory.stack tr.room-mobile-booking td:nth-child(3) .badge{background:#fff1d7;color:#a47420}
 table.room-directory.stack tr.room-mobile-repair{border-left-color:#da897c;background:linear-gradient(115deg,#fff 50%,#fff2ef)}
 table.room-directory.stack tr.room-mobile-repair td:nth-child(3) .badge{background:#ffebe6;color:#ba6556}
}
@media(max-width:600px){#app table.room-directory.stack td.no-label>.manage-btn{background:#3263ed;color:#fff;border:0}#app table.room-directory.stack tr.room-mobile-vacant td.no-label>.manage-btn{background:#219c78;color:#fff}}

.mobile-meter-start{display:none}
@media(max-width:600px){
 body{background:#f3f6fc}#app .page-heading h1{color:#244c91}#app .page-heading{margin-bottom:16px}
 #app .stats-5 .stat{border:0;color:#fff;border-radius:14px;padding:15px;box-shadow:none}
 #app .stats-5 .stat:nth-child(1){background:#159784;order:0}#app .stats-5 .stat:nth-child(3){background:#d48b41;order:1}
 #app .stats-5 .stat:nth-child(2){background:#3263ed;order:2}#app .stats-5 .stat.profit-stat{background:#7864c2;order:3;grid-column:auto;display:block}
 #app .stats-5 .stat:nth-child(4){order:4;grid-column:1/-1;background:#edf2fb;color:#42618a;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 15px}
 #app .stats-5 .stat:nth-child(4) .stat-bottom{display:none}#app .stats-5 .stat:nth-child(4) .stat-value{margin:0;color:#42618a}
 #app .stats-5 .stat:not(:nth-child(4)) .stat-top,#app .stats-5 .stat:not(:nth-child(4)) .stat-value,#app .stats-5 .stat:not(:nth-child(4)) .stat-value em,#app .stats-5 .stat:not(:nth-child(4)) .stat-bottom,#app .stats-5 .stat:not(:nth-child(4)) .stat-bottom span{color:white}
 #app .stats-5 .stat-value{font-size:22px;letter-spacing:-.7px;margin-top:7px}#app .stats-5 .stat-top{font-size:14px}#app .stats-5 .stat-bottom{font-size:14px;opacity:.85}#app .profit-stat .stat-bottom{display:block}
 #app .mobile-quick .todo{margin:0 12px 8px;border:1px solid #e7edf5;border-radius:11px;background:#fff;padding:11px}
 #app .mobile-quick .todo b{background:#fff0e3;border-radius:7px;padding:3px 8px;color:#c27e45;font-size:14px}
 #app .mobile-quick .todo-icon{background:#edf3ff;border-radius:9px;color:#4266a4}
 #app .mobile-quick{border:0;background:transparent}#app .mobile-quick .card-head{padding:12px 0}#app .mobile-quick .todo{margin-left:0;margin-right:0}
 #app .mobile-meter-start{display:block;width:100%;margin:0 0 16px;min-height:48px;background:#3263ed;color:white}
 #app .meter-progress{background:#edf3ff;border:1px solid #dce7fc;border-radius:13px;padding:15px}
 #app table.stack:not(.room-directory) tbody{gap:8px;padding:8px}#app table.stack:not(.room-directory) tbody tr{border-radius:13px;padding:12px;gap:7px 10px;border-left:3px solid #b7cdf5;background:linear-gradient(120deg,#fff 65%,#f7faff)}
 #app[data-view=repairs] table.stack tbody tr{border-left-color:#e8ba78}#app[data-view=billing] table.stack tbody tr{border-left-color:#9c8bd3}
 #app[data-view=meters] table.stack tbody tr{border-left-color:#69b9b0}
 #app .employee-card{border-left:3px solid #a8bfea;background:linear-gradient(110deg,#fff 65%,#f5f8ff)}
 #app .employee-wage{background:#edf3ff}#app .employee-wage strong{color:#315cb7}
 #app .settings-tabs .tab.active,#app .tabs .tab.active{background:#e8efff;color:#3263ed}
 #app[data-view=settings] .card-head,#app[data-view=users] .card-head{background:#f1f5fc}
 #app .bill-status.selected{background:#edf3ff;border-radius:10px 10px 0 0}#app .bill-method.selected{background:#e6f6ed;color:#238561;border-color:#c3e8d3}
 #modal:has(#meter-form){height:100dvh;max-height:100dvh!important;border-radius:0;width:100%;padding:0;background:#f5f8fc}
 #modal:has(#meter-form) .modal-head{position:sticky;top:0;z-index:4;background:white;margin:0;padding:16px;border-bottom:1px solid #e3eaf4}
 #meter-form{padding:16px}#meter-form>p:first-child{font-size:14px;color:#8799af;margin:0 0 12px}
 #meter-form .meter-title{padding:14px 14px 0;background:white;margin:16px 0 0;border:1px solid #e3eaf3;border-bottom:0;border-radius:12px 12px 0 0;font-size:14px}
 #meter-form .meter-title+.field{padding:12px 14px;background:white;margin:0;border:1px solid #e3eaf3;border-top:0;border-bottom:0}
 #meter-form .field input{font-size:24px!important;min-height:54px;background:#fafcff;border:1px solid #cbdaf0;color:#264566}
 #meter-form .upload{background:white;border:1px solid #e3eaf3;border-top:0;margin:0;padding:10px 14px 14px;border-radius:0 0 12px 12px}
 #meter-form .upload .btn{min-height:44px;font-size:14px}#meter-form .meter-actions{position:sticky;bottom:0;background:#f5f8fc;padding:12px 0;display:flex;flex-direction:column;z-index:2}
 #meter-form .meter-actions .btn{width:100%;min-height:46px}#meter-form .meter-prog{margin-top:16px}
}

.mobile-room-detail{display:none!important}
@media(max-width:600px){
 #app table.stack tr.mobile-expanded>td.mobile-room-detail{display:block!important;grid-column:1/-1;grid-row:auto;padding:12px!important;background:#f6f9fe;border-radius:10px;border:1px solid #e1eaf7;margin-top:5px}
 #app table.stack td.mobile-room-detail::before{display:none}
 .mobile-room-detail>strong{display:block;font-size:14px;color:#43658e;margin-bottom:7px}
 .mobile-detail-line{display:grid;grid-template-columns:105px minmax(0,1fr);gap:10px;padding:7px 0;border-bottom:1px solid #e6edf7;font-size:14px;line-height:1.6}
 .mobile-detail-line:last-child{border:0}.mobile-detail-line>span:first-child{color:#8697ad}.mobile-detail-line>span:last-child{color:#344e70;overflow-wrap:anywhere;text-align:right}
 #app table.room-directory.stack tr.mobile-expanded>td.mobile-room-detail{grid-row:6}
}

.mobile-room-floor,.mobile-room-amenities{display:none}
@media(max-width:600px){
 table.room-directory.stack .mobile-room-floor{display:inline-block;margin-left:7px;font-size:14px;font-weight:400;color:#8a9bb0;vertical-align:middle}
 table.room-directory.stack .mobile-room-amenities{display:inline-flex;vertical-align:middle;align-items:center;gap:5px;margin-left:7px;flex-wrap:wrap}
 .mobile-amenity-icon{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:23px;padding:2px 3px;border-radius:6px;background:#edf3fb;font-size:14px;line-height:1}
}
@media(max-width:600px){.mobile-amenity-icon{background:none;color:#8290a2;padding:2px;min-width:20px;height:22px;border-radius:0}.mobile-amenity-icon svg{display:block;width:18px;height:18px}}

/* Mobile home: compact summary and direct actions */
.mobile-home{display:none}
@media(max-width:600px){
 #app[data-view=dashboard]:has(.mobile-home)>.page-heading{display:none}
 #app[data-view=dashboard]>.dash-tabs{margin:0 0 16px}
 #app[data-view=dashboard]>.dash-tabs .tab:first-child{font-size:0}
 #app[data-view=dashboard]>.dash-tabs .tab:first-child:after{content:'สรุปหอพัก';font-size:14px}
 .mobile-home{display:block;margin-bottom:16px}
 .mh-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 18px}.mh-title h2{font-size:23px;margin:3px 0 0;color:#203956}.mh-title>div>span{font-size:14px;letter-spacing:1.5px;color:#8796ab}.mh-period{font-size:14px;color:#75869c}
 .mh-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 #app .mh-stats button{border:1px solid #e3eaf3;border-radius:14px;padding:13px 7px;background:white;text-align:left;min-width:0;box-shadow:none;color:#52677f}
 .mh-stats span,.mh-stats em{display:block;font-size:14px;font-style:normal}.mh-stats strong{display:block;font-size:18px;letter-spacing:-.7px;margin:8px 0 4px;color:#24435b;white-space:nowrap}.mh-stats small{font-size:14px;font-weight:400;letter-spacing:0}.mh-stats em{font-size:14px;color:#8797a9}
 #app .mh-stats button:nth-child(2){background:#edf8f4;border-color:#dceee6}.mh-stats button:nth-child(2) strong{font-size:15px;color:#21846a;letter-spacing:-.5px}#app .mh-stats button:nth-child(3){background:#fff7f0;border-color:#f3e7da}.mh-stats button:nth-child(3) strong{color:#b87942}
 .mobile-home h3{font-size:14px;margin:22px 0 12px;color:#344d69}.mh-menu{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
 #app .mh-menu button{display:flex;flex-direction:column;align-items:center;gap:9px;padding:0;background:none;border:0;font-size:14px;color:#425b77;min-height:80px;white-space:nowrap}
 .mh-menu button>span{display:grid;place-items:center;width:55px;height:55px;background:#fff;border:1px solid #e1e8f2;border-radius:17px;color:#597697}.mh-menu svg{width:25px;height:25px}
 #app .mh-original-tasks{display:none}.mh-tasks{margin-top:20px;overflow:hidden}#app .mh-tasks .card-head{padding:15px 13px;gap:6px;flex-wrap:nowrap}#app .mh-tasks h2{font-size:14px}.mh-tasks .card-head>.badge{display:none}.mh-tasks .mh-more{font-size:14px;margin-left:auto;min-height:32px}
 #app .mh-tasks .todo{padding:13px;gap:10px;min-height:54px}#app .mh-tasks .todo p{display:none}#app .mh-tasks .todo strong{font-size:14px}.mh-tasks .todo-icon{width:30px;height:30px;font-size:15px;background:#f1f5fa;color:#7388a0}.mh-tasks .todo b{font-size:14px;background:#f1f5fa;border-radius:7px;padding:3px 8px;color:#46617e}.mh-tasks:not(.mh-all) .todo:nth-of-type(n+5){display:none}
 #app[data-view=dashboard]>.split{display:block;margin-bottom:12px}#app[data-view=dashboard] .mobile-fold-toggle{font-size:14px}
}

/* Mobile dashboard segmented navigation */
@media(max-width:600px){
 #app[data-view=dashboard]>.dash-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:5px;background:#e8edf5;border:1px solid #dfe6f0;border-radius:15px;margin:0 0 20px;overflow:visible;box-shadow:none}
 #app[data-view=dashboard]>.dash-tabs .tab{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;margin:0;padding:10px 12px;border:0;border-radius:10px;background:transparent;color:#78879b;font-size:14px;font-weight:600;box-shadow:none;flex:auto}
 #app[data-view=dashboard]>.dash-tabs .tab.active{background:#fff;color:#315cb0;box-shadow:0 2px 6px #233e6810}
 #app[data-view=dashboard]>.dash-tabs .tab:first-child{font-size:0}
 #app[data-view=dashboard]>.dash-tabs .tab:first-child:after{content:'สรุปหอพัก';font-size:14px}
 #app[data-view=dashboard]>.dash-tabs .tab:before{content:'';width:18px;height:18px;background:currentColor;mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E")}
 #app[data-view=dashboard]>.dash-tabs .tab:nth-child(2):before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='15' rx='3'/%3E%3Cpath d='M3 9h18m-6 4h6v4h-6zM6 5V3h11'/%3E%3C/svg%3E")}
 #app[data-view=dashboard]>.dash-tabs .tab:focus-visible{outline:2px solid #3263ed;outline-offset:2px}
}

.mobile-dashboard-period{display:none}
@media(max-width:600px){
 #app[data-view=dashboard]>.page-heading .head-period{display:none}
 #app .mobile-dashboard-period{display:flex;align-items:center;gap:10px;margin:0 0 18px}
 .mobile-dashboard-period>span{font-size:14px;color:#7b8ca1;white-space:nowrap}
 #app .mobile-dashboard-period .head-period{display:grid;grid-template-columns:minmax(0,1fr) 88px;gap:8px;flex:1;min-width:0;width:auto}
 #app .mobile-dashboard-period select{width:100%;min-width:0;min-height:44px;padding:9px 10px;border:1px solid #dce5f1;border-radius:10px;background-color:#fff;color:#355477;font-size:14px}
 #app[data-view=dashboard]>.dash-tabs{margin-bottom:12px}
 .mobile-home .mh-period{display:none}
}

@media(max-width:600px){
 #app[data-view]>.mobile-segment{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:5px;background:#e8edf5;border:1px solid #dfe6f0;border-radius:15px;margin:0 0 18px;overflow:visible;box-shadow:none}
 #app[data-view]>.mobile-segment .tab{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:46px;margin:0;padding:10px 5px;border:0;border-radius:10px;background:transparent;color:#78879b;font-size:14px;font-weight:600;box-shadow:none;white-space:nowrap;flex:auto}
 #app[data-view]>.mobile-segment .tab.active{background:#fff;color:#315cb0;box-shadow:0 2px 6px #233e6810}
 #app[data-view]>.mobile-segment .tab .count{font-size:14px;min-width:18px;height:18px;padding:0 4px;display:inline-flex;align-items:center;justify-content:center;margin:0;background:#dce3ed;color:#6a7d96;border-radius:6px}
 #app[data-view]>.mobile-segment .tab.active .count{background:#edf2fc;color:#315cb0}
 #app[data-view]>.mobile-segment .tab:focus-visible{outline:2px solid #3263ed;outline-offset:2px}
 #app[data-view]>.mobile-segment .tab:before{content:'';flex:none;width:16px;height:16px;background:currentColor;mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2V3ZM9 8h6m-6 4h6'/%3E%3C/svg%3E")}
 #app>.meter-tabs .tab:before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 18a9 9 0 1 1 16 0M12 13l4-5M7 18h10'/%3E%3Ccircle cx='12' cy='13' r='1'/%3E%3C/svg%3E")}
 #app[data-view]>.mobile-segment .tab:nth-child(2):before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M9 21v-6h6v6M8 7h1m6 0h1M8 11h1m6 0h1'/%3E%3C/svg%3E")}
 #app>.bill-tabs .tab:nth-child(2):before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='15' rx='3'/%3E%3Cpath d='M3 9h18m-6 4h6v4h-6zM6 5V3h11'/%3E%3C/svg%3E")}
}

/* No global search on the dashboard summary. */
.shell:has(#app[data-view=dashboard]) > .gs-bar{display:none}


/* Readable, status-colored meter room cards */
@media(max-width:600px){
 #app[data-view=meters] table.stack tbody tr.meter-room-card{padding:15px;gap:12px;border:1px solid #cee8df;border-left:4px solid #29a889;border-radius:17px;background:linear-gradient(120deg,#fff 45%,#edf9f4);box-shadow:0 3px 10px #284f7210}
 #app[data-view=meters] table.stack tbody tr.meter-pending{border-color:#f0d9b6;border-left-color:#e5a03a;background:linear-gradient(120deg,#fff 45%,#fff5e4)}
 #app[data-view=meters] .meter-room-card td:first-child{display:flex;align-items:center;gap:10px;padding:0!important;flex-wrap:wrap}
 #app[data-view=meters] .meter-room-card .room-no{display:inline-flex;align-items:center;justify-content:center;min-width:82px;min-height:48px;padding:7px 12px;background:#ddf4e9;color:#157d61;border-radius:12px;font-size:24px;line-height:1.2;font-weight:800;letter-spacing:.3px}
 #app[data-view=meters] .meter-pending .room-no{background:#ffebc5;color:#9b631e}
 #app[data-view=meters] .meter-room-card td:first-child small{font-size:14px;color:#788ca0;margin:0}
 #app[data-view=meters] .meter-room-card td:nth-child(2) .badge{font-size:14px;padding:6px 9px;border-radius:8px;background:#dcf3e8;color:#188062;white-space:nowrap}
 #app[data-view=meters] .meter-pending td:nth-child(2) .badge{background:#ffebc5;color:#9b631e}
 #app[data-view=meters] .meter-room-card td:nth-child(3){font-size:14px;color:#405b74;padding-bottom:4px}
 #app[data-view=meters] .meter-room-card td:last-of-type{padding:0}
 #app[data-view=meters] .meter-room-card button[aria-label^="จดมิเตอร์ห้อง"]{min-height:46px;width:100%;border-radius:11px;background:#e1f4ec;color:#18795f;border:1px solid #c5e7d9;font-size:14px;font-weight:600}
 #app[data-view=meters] .meter-pending button[aria-label^="จดมิเตอร์ห้อง"]{background:#3263ed;color:#fff;border-color:#3263ed;box-shadow:0 3px 8px #3263ed20}
 #app[data-view=meters] .meter-room-card .mobile-row-toggle{background:transparent;color:#71869c;min-height:36px;font-size:14px}
}

/* Mobile billing cards share the meter room identity treatment. */
@media(max-width:600px){
 #app[data-view=billing] table.stack tbody tr.billing-room-card{--bill-accent:#6581aa;--bill-pale:#e9eff8;--bill-tint:#f4f7fc;--bill-ink:#47658c;border:1px solid var(--bill-pale);border-left:4px solid var(--bill-accent);border-radius:17px;padding:15px;gap:12px;background:linear-gradient(120deg,#fff 45%,var(--bill-tint));box-shadow:0 3px 10px #284f7210}
 #app[data-view=billing] tr.bill-state-paid{--bill-accent:#29a889!important;--bill-pale:#ddf4e9!important;--bill-tint:#edf9f4!important;--bill-ink:#157d61!important}
 #app[data-view=billing] tr.bill-state-pending{--bill-accent:#e5a03a!important;--bill-pale:#ffebc5!important;--bill-tint:#fff7e9!important;--bill-ink:#9b631e!important}
 #app[data-view=billing] tr.bill-state-review{--bill-accent:#9472cc!important;--bill-pale:#eee5fb!important;--bill-tint:#f8f3ff!important;--bill-ink:#7955aa!important}
 #app[data-view=billing] tr.bill-state-overdue{--bill-accent:#df796e!important;--bill-pale:#fce4df!important;--bill-tint:#fff3f0!important;--bill-ink:#b04e43!important}
 #app[data-view=billing] .billing-room-card .room-no{display:inline-flex;align-items:center;justify-content:center;min-width:82px;min-height:48px;padding:7px 12px;background:var(--bill-pale);color:var(--bill-ink);border-radius:12px;font-size:24px;line-height:1.2;font-weight:800;letter-spacing:.3px}
 #app[data-view=billing] .billing-room-card td:first-child small{font-size:14px;color:#788ca0;margin-top:6px}
 #app[data-view=billing] .billing-room-card td.amount{font-size:19px;font-weight:700;color:var(--bill-ink)}
 #app[data-view=billing] .billing-room-card td:nth-child(5) .badge{background:var(--bill-pale);color:var(--bill-ink);font-size:14px;padding:6px 9px;border-radius:8px}
 #app[data-view=billing] .billing-room-card .mobile-row-toggle{background:transparent;color:#71869c;min-height:36px;font-size:14px}
}

@media(max-width:600px){
 #app[data-view=repairs] table.stack tbody tr.repair-room-card{--repair-accent:#d99b3b;--repair-pale:#ffedcc;--repair-tint:#fff8ec;--repair-ink:#976423;border:1px solid var(--repair-pale);border-left:4px solid var(--repair-accent);border-radius:17px;padding:15px;gap:10px;background:linear-gradient(120deg,#fff 45%,var(--repair-tint));box-shadow:0 3px 10px #284f7210}
 #app[data-view=repairs] table.stack tbody tr.repair-color-urgent{--repair-accent:#dc7568;--repair-pale:#fbe3df;--repair-tint:#fff3f0;--repair-ink:#b04f43}
 #app[data-view=repairs] table.stack tbody tr.repair-color-done{--repair-accent:#29a889;--repair-pale:#ddf4e9;--repair-tint:#edf9f4;--repair-ink:#157d61}
 #app[data-view=repairs] table.stack tbody tr.repair-color-scheduled{--repair-accent:#648fe0;--repair-pale:#e3edff;--repair-tint:#f2f6ff;--repair-ink:#416bb6}
 #app[data-view=repairs] table.stack tbody tr.repair-color-parts{--repair-accent:#9472cc;--repair-pale:#eee5fb;--repair-tint:#f8f3ff;--repair-ink:#7955aa}
 #app[data-view=repairs] .room-no{display:inline-flex;align-items:center;justify-content:center;min-width:82px;min-height:48px;padding:7px 12px;background:var(--repair-pale,#e3edff);color:var(--repair-ink,#416bb6);border-radius:12px;font-size:24px;line-height:1.2;font-weight:800;letter-spacing:.3px}
 #app[data-view=repairs] table.stack .repair-room-card td:nth-child(2){grid-column:1;grid-row:1}
 #app[data-view=repairs] table.stack .repair-room-card td:nth-child(2)::before{display:none}
 #app[data-view=repairs] table.stack .repair-room-card td:first-child{grid-column:2;grid-row:1;text-align:right;align-self:center;font-size:14px}
 #app[data-view=repairs] table.stack .repair-room-card td:nth-child(3){grid-column:1/-1;font-size:15px;font-weight:600;color:#334c65;line-height:1.7}
 #app[data-view=repairs] table.stack .repair-room-card td:nth-child(3)::before{display:none}
 #app[data-view=repairs] table.stack .repair-room-card td:nth-child(6){grid-column:1/-1;background:var(--repair-pale);border-radius:10px;padding:9px 11px;font-size:14px;color:var(--repair-ink)}
 #app[data-view=repairs] .repair-room-card .status-select{min-height:44px;border-radius:10px;font-size:14px;width:100%}
 #app[data-view=repairs] .repair-room-card .mobile-row-toggle{background:transparent;color:#71869c;min-height:36px;font-size:14px}
}

/* Settings mobile cards and readable input groups */
@media(max-width:600px){
 #app[data-view=settings]>.attention{font-size:14px;line-height:1.7;padding:12px 14px;border-radius:12px;background:#edf3fc;color:#6882a6;border:1px solid #dce7f7;margin-bottom:16px}
 #app[data-view=settings] .settings-list>.set-pane>section.card{background:transparent;border:0;box-shadow:none;overflow:visible}
 #app[data-view=settings] .setting-row{margin-bottom:12px;padding:16px;background:linear-gradient(120deg,#fff 55%,#f0f5ff);border:1px solid #dce6f5;border-left:4px solid #6b94df;border-radius:15px;gap:12px;box-shadow:0 3px 10px #284f7209}
 #app[data-view=settings] .setting-row>label strong{font-size:15px;color:#365a89}
 #app[data-view=settings] .setting-row small{font-size:14px;line-height:1.7;color:#8091a5;margin-top:4px}
 #app[data-view=settings] [data-pane=util] .setting-row{border-left-color:#42a89b;background:linear-gradient(120deg,#fff 55%,#edf9f6);border-color:#d8ece7;border-left:4px solid #42a89b}
 #app[data-view=settings] [data-pane=util] .setting-row>label strong{color:#287c72}
 #app[data-view=settings] .unit-input{border-radius:11px;overflow:hidden;background:white;max-width:100%;border:1px solid #dce5ee}
 #app[data-view=settings] .unit-input input{font-size:20px!important;font-weight:600;color:#34577e;min-height:48px;background:white;border:0;min-width:0}
 #app[data-view=settings] .unit-input>span{font-size:14px;color:#8494a7;background:#f4f7fb;padding:10px}
 #app[data-view=settings] table.stack tbody tr.tt-row{border:1px solid #dce6f5;border-left:4px solid #7097df;border-radius:16px;background:linear-gradient(120deg,#fff 50%,#f0f5ff);padding:14px;margin-bottom:4px;gap:12px}
 #app[data-view=settings] .tt-name{font-size:16px!important;font-weight:600;color:#355f9c;min-height:46px;background:#eef4ff;border-color:#d6e3f7;border-radius:10px;width:100%}
 #app[data-view=settings] .tt-b{font-weight:700;color:#355f9c;background:#e7efff;border-radius:9px;min-height:44px}
 #app[data-view=settings] .tt-rate,#app[data-view=settings] .tt-dep{font-size:18px!important;font-weight:600;min-height:46px;border-radius:10px;color:#386484;background:#fff}
 #app[data-view=settings] .amen-cell{background:#f0f4fb;padding:10px;border-radius:10px;gap:8px}
 #app[data-view=settings] .amen-sum{font-size:14px;line-height:1.6}
 #app[data-view=settings] .settings-actions{padding:12px;background:#edf2fa;border:1px solid #dde6f2;border-radius:14px;gap:8px}
 #app[data-view=settings] .settings-actions button{min-height:46px;border-radius:11px}
 #app[data-view=settings] .settings-checkbox{min-height:44px;padding:8px;border-radius:10px;background:#f0f5fc}
 #app[data-view=settings] .settings-checkbox input{accent-color:#3263ed;width:20px;height:20px}
}

@media(max-width:600px){#app[data-view=settings] table.stack .tt-row td:nth-child(2),#app[data-view=settings] table.stack .tt-row td:nth-child(3){grid-column:1/-1}#app[data-view=settings] .tt-name{min-width:0}#app[data-view=settings] .amen-cell{display:flex;flex-wrap:wrap}#app[data-view=settings] .amen-sum{flex:1;min-width:120px}}
@media(max-width:600px){#app[data-view=settings] table.room-price-table.stack .rp-row td:nth-child(2){grid-column:1/-1;min-width:0}#app[data-view=settings] .room-price-table select.rp-type{width:100%;min-width:0;max-width:100%}}

@media(max-width:600px){#app[data-view=settings] .settings-list,#app[data-view=settings] .set-pane,#app[data-view=settings] .setting-row,#app[data-view=settings] .setting-row>*{min-width:0;max-width:100%;box-sizing:border-box}#app[data-view=settings] .setting-row{display:flex;flex-direction:column;align-items:stretch}#app[data-view=settings] .setting-row .unit-input{width:100%;min-width:0}#app[data-view=settings] .unit-input input{width:0;flex:1}#app[data-view=settings] .setting-row select{width:100%;min-width:0;max-width:100%}#app[data-view=settings] .setting-row>div{min-width:0;width:100%}}

/* Keep every room filter visible within the mobile viewport. */
@media(max-width:600px){
 #app[data-view=rooms]>.filters{display:flex;flex-wrap:wrap;overflow:visible;margin:0 0 16px;padding:0;gap:8px;max-width:100%;min-width:0}
 #app[data-view=rooms]>.filters>button.btn{flex:1 1 calc(33.333% - 8px);min-width:0;padding:10px 6px;font-size:14px;white-space:normal}
 #app[data-view=rooms]>.filters>.rooms-count{flex:1 0 100%;margin:0;font-size:14px;padding:2px 0}
 #app[data-view=rooms]>.filters>.more-filter{flex:1 1 calc(50% - 4px);min-width:0;max-width:100%;position:relative}
 #app[data-view=rooms]>.filters>.more-filter>.btn{width:100%;min-width:0;padding:10px 8px;font-size:14px}
 #app[data-view=rooms]>.filters>select{flex:1 1 calc(50% - 4px);width:0!important;min-width:0;max-width:100%;min-height:44px;font-size:14px;padding:10px 8px;border-radius:12px}
 #app[data-view=rooms] .more-filter.open .more-menu{position:absolute;left:0;right:auto;width:min(320px,calc(100vw - 40px));min-width:0;max-width:calc(100vw - 40px);max-height:55dvh;overflow-y:auto;z-index:10}
 #app[data-view=rooms]>.filters .tenant-search{min-width:0;width:100%;flex-basis:100%}
}

/* Compact mobile staff workspace */
@media(max-width:600px){
 #app[data-view=leaves]>.staff-tabs{grid-template-columns:1fr 1fr;overflow:visible;gap:5px}
 #app[data-view=leaves]>.staff-tabs .tab{font-size:14px;white-space:normal;text-align:center;padding:9px 6px}
 #app[data-view=leaves]>.filters{display:flex;flex-wrap:wrap;overflow:visible;margin:0 0 14px;padding:0;gap:8px}
 #app[data-view=leaves]>.filters>*{min-width:0;max-width:100%}
 #app[data-view=leaves]>.filters>.btn{flex:1 1 40%;font-size:14px;padding:9px 7px}
 #app[data-view=leaves] .staff-table.stack tbody tr{border:1px solid #dce7f6;border-left:4px solid #7198df;border-radius:14px;padding:13px;gap:9px 12px;background:linear-gradient(120deg,#fff 45%,#f0f5ff)}
 #app[data-view=leaves] .staff-table.stack tbody tr:nth-child(even){border-left-color:#4aa99b;background:linear-gradient(120deg,#fff 45%,#eff9f6)}
 #app[data-view=leaves] .staff-table.stack td:first-child{grid-column:1/-1;padding:0 0 5px!important;color:#31567d;font-size:16px}
 #app[data-view=leaves] .staff-table.stack td:first-child:before{display:none}
 #app[data-view=leaves] .staff-table.stack td:nth-child(4){color:#315e95;font-size:16px;font-weight:700}
 #app[data-view=leaves] .staff-table.stack td:nth-child(4):before{font-size:14px;font-weight:400}
 #app[data-view=leaves] .staff-table.stack td:nth-child(5){grid-column:1}
 #app[data-view=leaves] .staff-table.stack td:nth-child(9){grid-column:2}
 #app[data-view=leaves] .staff-table.stack td:nth-child(9) button{min-height:44px;background:#e5edfc;color:#426aa8;border:1px solid #d6e2f7;border-radius:10px;font-weight:600}
 #app[data-view=leaves] .staff-table.stack .mobile-row-toggle{background:transparent;color:#7c8fa7;min-height:34px;font-size:14px}
 #app[data-view=leaves] .staff-table.stack .row-off{opacity:.7;border-left-color:#a4afbf;background:#f5f6f8}
 #app[data-view=leaves] .card-head{background:#eef3fc;border-radius:14px 14px 0 0}#app[data-view=leaves] .card-head h2{font-size:15px;color:#365b88}
 #app[data-view=leaves] .head-period{display:flex;width:100%;gap:8px}#app[data-view=leaves] .head-period select{flex:1;min-width:0;min-height:44px}
}

@media(max-width:600px){#app[data-view=leaves] .staff-table .switch{display:inline-flex;align-items:center;min-height:44px}#app[data-view=leaves] .staff-table .switch input[type=checkbox]{width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;margin:0;accent-color:#3263ed}#app[data-view=leaves] .staff-table.stack td:nth-child(9){grid-column:2;grid-row:3}#app[data-view=leaves] .staff-table.stack td:nth-child(8){grid-column:1;grid-row:4}}

/* Mobile room management sheet */
@media(max-width:600px){
 #modal:has(.room-detail-layout){width:100%;max-width:100%;height:96dvh;max-height:96dvh!important;margin:auto auto 0;border-radius:22px 22px 0 0;background:#f3f6fc;padding:0}
 #modal:has(.room-detail-layout) .modal-head{position:sticky;top:0;z-index:5;background:#fff;padding:18px 16px;border-bottom:1px solid #e1e9f4;margin:0;display:flex;align-items:center;justify-content:space-between}
 #modal:has(.room-detail-layout) .modal-head h2{font-size:25px;color:#305d9e;letter-spacing:.3px;margin:0}
 #modal:has(.room-detail-layout) .modal-head .close{width:40px;height:40px;min-width:40px;background:#edf2fa;color:#6b809c}
 .room-detail-layout{padding:14px}
 .room-detail-layout .rd-hero{background:linear-gradient(120deg,#edf3ff,#fff);border:1px solid #d7e4f7;border-left:4px solid #6c96df;border-radius:16px;padding:16px;gap:16px}
 .rd-hero .rd-rent>strong{font-size:24px;color:#315fa5}.rd-hero .summary-row>span:first-child{font-size:14px}.rd-hero .badge{padding:6px 10px;border-radius:8px}
 .room-detail-layout .rd-manage.rd-manage-open{padding:14px;background:#fff;border:1px solid #dfe8f5;border-radius:16px;margin:0 0 14px}
 .rd-manage-open .room-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .rd-manage-open .room-acts .btn{width:100%;min-width:0;min-height:48px;padding:10px 7px;font-size:14px;line-height:1.5;white-space:normal;border-radius:12px;background:#edf3fd;color:#42689b;border-color:#dbe6f6}
 .rd-manage-open .room-acts .btn.primary{background:#3263ed;color:white;border-color:#3263ed}
 .rd-manage-open .room-acts .btn.line{background:#e7f7ef;color:#258966;border-color:#ccebdc}
 .room-detail-layout .rd-section{border-radius:16px;border:1px solid #e0e8f2;background:#fff;padding:0 14px 12px;overflow:hidden}
 .rd-section h3{margin:0 -14px 0;padding:13px 14px;background:#edf3fd;color:#436b9e;font-size:14px}
 .rd-section:nth-child(2) h3{background:#eaf7f2;color:#328372}
 .rd-section .summary-row{padding:12px 0;gap:12px;font-size:14px;align-items:flex-start}.rd-section .summary-row>span:first-child{flex:0 0 95px;color:#8394a8}.rd-section .summary-row>span:last-child{min-width:0;overflow-wrap:anywhere;text-align:right}
 .rd-extra{padding:4px 10px;background:#f5f8fc;border-radius:10px}.rd-extra summary{min-height:44px;font-size:14px}
 #modal .rd-actions{position:static;margin:0;padding:0 14px 20px;display:grid;grid-template-columns:1fr 1fr;gap:8px;background:transparent;border:0}
 #modal .rd-actions .btn{min-height:44px;border-radius:11px;font-size:14px;background:white;border:1px solid #dce6f3;white-space:normal}
 .rd-manage input,.rd-manage select{min-width:0;max-width:100%;min-height:44px}.rd-manage .form-grid{grid-template-columns:1fr}
}

.room-section-tabs{display:none}.room-history-panel>h3,.room-history-panel>p{display:none}
.room-exit-zone{margin-top:12px;border-top:1px solid #f0dcd8;padding-top:10px}.room-exit-zone summary{font-size:14px;color:#ae6358;cursor:pointer;padding:10px 0}.room-exit-zone .danger{margin-top:8px}
@media(max-width:600px){
 .room-section-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;background:#e6edf7;border-radius:12px;padding:4px;margin-bottom:14px}
 .room-section-tabs button{border:0;background:transparent;color:#778ba5;border-radius:9px;min-height:44px;font-size:14px;padding:8px 4px}.room-section-tabs button.active{background:white;color:#3263ed;box-shadow:0 2px 5px #24487012}
 .room-section-panel.room-panel-hidden{display:none!important}.room-history-panel>h3,.room-history-panel>p{display:block}.room-history-panel{background:white;padding:14px;border-radius:14px}.room-history-panel p{font-size:14px;color:#8697ab}
 #modal .mobile-save-bar{position:sticky;bottom:0;z-index:6;background:#f3f6fc;padding:12px 0;margin-top:12px;border-top:1px solid #dfe7f2;display:flex;gap:8px;flex-wrap:wrap}#modal .mobile-save-bar button{min-height:46px;flex:1 1 140px;white-space:normal}
 #settings-form .settings-actions{position:sticky;bottom:76px;z-index:4;box-shadow:0 -4px 15px #304e7410}
 #app[data-view=billing] table.stack .billing-room-card td:nth-child(4){display:block;grid-column:1/-1;background:var(--bill-pale);padding:10px 12px;border-radius:10px}#app[data-view=billing] .billing-room-card td:nth-child(4):before{content:'ยอดที่ต้องชำระ';font-size:14px;font-weight:400;display:block;color:#788ba1}
 #app[data-view=leaves] .staff-table.stack tbody tr{gap:6px 10px;padding:11px}.staff-table.stack td:nth-child(5){display:none!important}.staff-table.stack tr.mobile-expanded td:nth-child(5){display:block!important}
 #app[data-view=leaves] .staff-table.stack td:nth-child(8){grid-row:3;grid-column:1}#app[data-view=leaves] .staff-table.stack td:nth-child(9){grid-row:3;grid-column:2}
 #app[data-view=repairs] table.stack tbody tr.repair-room-card{gap:6px 10px;padding:11px}
 #app[data-view=repairs] .repair-room-card .room-no{font-size:22px;min-height:40px;padding:5px 10px}
 #app[data-view=repairs] .repair-room-card td:nth-child(3){font-size:14px!important}.repair-assignee{display:block;font-size:14px;font-weight:400;color:#8292a5;margin-top:3px}
 #app[data-view=repairs] .repair-room-card td:nth-child(8){grid-column:1}#app[data-view=repairs] .repair-room-card td:nth-child(9){grid-column:2}#app[data-view=repairs] .repair-room-card td:nth-child(9) button{min-height:44px}
}

#discard-dialog{width:min(360px,calc(100vw - 32px));border:0;border-radius:18px;padding:22px;color:#314864}#discard-dialog::backdrop{background:#13243980}#discard-dialog h3{margin:0 0 12px}#discard-dialog p{font-size:14px;line-height:1.7}#discard-dialog .actions{display:flex;flex-wrap:wrap;gap:8px}#discard-dialog button{min-height:44px;flex:1;white-space:nowrap}

@media(max-width:600px){
 #app[data-view=billing] .bill-state-paid td:nth-child(4):before{content:'ยอดชำระแล้ว'}
 #app[data-view=billing] .bill-state-draft td:nth-child(4):before{content:'ยังไม่ได้ออกบิล'}
 #app[data-view=repairs] table.stack .repair-room-card td:nth-child(6){padding:6px 10px}.repair-room-card td:nth-child(6):before{display:none!important}
 #app[data-view=repairs] table.stack .repair-room-card td:nth-child(8):before,#app[data-view=repairs] table.stack .repair-room-card td:nth-child(9):before{display:none}
 #app[data-view=repairs] table.stack .repair-room-card .mobile-row-toggle-cell{padding:0}.repair-assignee{line-height:1.4}
 #app[data-view=leaves] .staff-table.stack td:nth-child(3):before,#app[data-view=leaves] .staff-table.stack td:nth-child(8):before,#app[data-view=leaves] .staff-table.stack td:nth-child(9):before{display:none}
 #app[data-view=leaves] .staff-table.stack .mobile-row-toggle-cell{padding:0}
}
.desktop-table-bar{display:none}.desktop-sort{font:inherit;color:inherit;border:0;background:none;text-align:inherit;padding:0}
@media(min-width:701px){
 #app .desktop-table-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:#fff;border-bottom:1px solid #e5ebf3;color:#7f8fa4;font-size:14px}
 .desktop-table-bar b{color:#385576;font-size:14px;margin-left:4px}
 #app .desktop-table-scroll{overflow:auto;max-height:62vh;scrollbar-width:thin;scrollbar-color:#cbd6e6 #f6f8fc;overscroll-behavior:contain}
 .desktop-table-scroll:focus-visible{outline:2px solid #8aacf0;outline-offset:-2px}
 #app table.desktop-list{width:100%;border-collapse:separate;border-spacing:0}
 #app .desktop-list th{position:sticky;top:0;z-index:2;background:#f3f6fb;border-bottom:1px solid #dae4f0;padding:0 12px;height:44px;white-space:nowrap;color:#617a98;font-size:14px}
 #app .desktop-list td{padding:9px 12px!important;font-size:14px;line-height:1.5;border-bottom:1px solid #edf1f7;vertical-align:middle;white-space:nowrap}
 #app .desktop-list td small{font-size:14px;margin-top:2px}
 #app .desktop-list tr:last-child td{border-bottom:0}
 #app .desktop-list tbody tr:hover{background:#f1f6fe;cursor:pointer}
 #app .desktop-list .room-no{font-size:14px;font-weight:700;color:#315786}
 #app .desktop-list .badge{font-size:14px;padding:3px 7px;border-radius:6px}
 #app .desktop-list .amount{font-size:14px;font-weight:600}
 #app .desktop-list .btn,#app .desktop-list .text-btn{font-size:14px;padding:7px 9px;min-height:32px;margin:0}
 #app .desktop-list .manage-btn{background:#edf3fd;border-color:#dce7f8;color:#446d9e}
 #app .desktop-list .status-select{font-size:14px;padding:6px 8px;min-height:32px}
 #app .desktop-sort{display:flex;align-items:center;gap:6px;width:100%;height:44px;cursor:pointer;font-weight:600;font-size:14px;white-space:nowrap}
 .desktop-sort::after{content:'↕';font-size:14px;color:#acb9ca;font-weight:400}
 th[aria-sort=ascending] .desktop-sort,th[aria-sort=descending] .desktop-sort{color:#3263ed}
 th[aria-sort=ascending] .desktop-sort::after{content:'↑';color:#3263ed}th[aria-sort=descending] .desktop-sort::after{content:'↓';color:#3263ed}
 .desktop-sort:focus-visible{outline:2px solid #88a9eb;outline-offset:-3px;border-radius:6px}
 #app .desktop-list .mobile-room-detail,#app .desktop-list .mobile-row-toggle-cell{display:none!important}
}

.desktop-room-nav{display:none}
@media(min-width:701px){
 #modal:has(.room-detail-layout){position:fixed;inset:0 0 0 auto;margin:0;width:min(560px,48vw);max-width:560px;height:100dvh;max-height:100dvh!important;padding:0;border:0;border-left:1px solid #dae4f0;border-radius:20px 0 0 20px;background:#f4f7fc;box-shadow:-12px 0 50px #173b6920;overflow:auto}
 #modal:has(.room-detail-layout)::backdrop{background:#15325812;backdrop-filter:none}
 #modal:has(.room-detail-layout) .modal-head{display:grid;grid-template-columns:1fr auto;position:sticky;top:0;z-index:5;gap:14px;padding:20px 22px 16px;background:#fff;border-bottom:1px solid #e2e9f3;margin:0}
 #modal:has(.room-detail-layout) .modal-head h2{font-size:25px;color:#2c5287;margin:0}
 #modal:has(.room-detail-layout) .modal-head .close{width:36px;height:36px;font-size:20px;background:#edf2f9;color:#7589a5}
 #modal .desktop-room-nav{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px}
 .desktop-room-location{font-size:14px;color:#8191a7;white-space:nowrap}.desktop-room-steps{display:flex;align-items:center;gap:7px}.desktop-room-counter{font-size:14px;color:#92a1b6;white-space:nowrap}
 .desktop-room-step{font:inherit;font-size:14px;border:1px solid #dce6f3;border-radius:9px;background:#f6f9fe;color:#52759f;padding:8px 10px;min-height:34px}.desktop-room-step:disabled{opacity:.4;cursor:default}
 #modal .room-detail-layout{padding:18px 20px}
 #modal .room-section-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;background:#e8eef7;padding:4px;border-radius:12px;margin-bottom:16px}
 #modal .room-section-tabs button{border:0;background:transparent;color:#8190a6;border-radius:9px;font-size:14px;min-height:40px;padding:8px 3px}
 #modal .room-section-tabs button.active{background:#fff;color:#3263ed;box-shadow:0 2px 7px #24446b0c}
 #modal .room-section-panel.room-panel-hidden{display:none!important}
 #modal .rd-hero{grid-template-columns:1fr 1fr;border:1px solid #dce6f5;border-left:4px solid #7098df;border-radius:14px;background:linear-gradient(115deg,#eef4ff,#fff);padding:16px;gap:15px}
 #modal .rd-hero .summary-row:nth-child(2){grid-row:2;grid-column:1/-1}
 #modal .rd-rent>strong{font-size:25px}#modal .rd-grid{grid-template-columns:1fr;gap:14px}
 #modal .rd-section{border-radius:14px;padding:16px;background:white}#modal .rd-section h3{color:#456b9c;font-size:14px}
 #modal .rd-manage-open{border-radius:14px;background:white;padding:14px;margin:0}
 #modal .room-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}#modal .room-acts .btn{min-width:0;white-space:normal;min-height:40px;font-size:14px;padding:9px 7px;border-radius:9px}
 #modal .room-history-panel{background:white;border-radius:14px;padding:16px}#modal .room-history-panel>h3,#modal .room-history-panel>p{display:block}#modal .room-history-panel p{font-size:14px;margin-bottom:14px}
 #modal .rd-actions{position:static;background:none;border:0;padding:0;margin:0;display:grid;grid-template-columns:1fr;gap:8px}#modal .rd-actions .btn{white-space:normal;min-height:40px}
 #modal .rd-manage .form-grid{grid-template-columns:1fr}#modal .rd-manage .unit-input input{min-width:0}#modal .rd-manage .actions{flex-wrap:wrap}
 #modal .rd-manage .mobile-save-bar{position:sticky;bottom:0;background:#fff;padding:12px 0;border-top:1px solid #e5ebf4}
 #app .desktop-list tbody tr.desktop-room-selected{background:#edf4ff;box-shadow:inset 3px 0 #3263ed}
}

.desktop-filter-toolbar,.desktop-filter-empty{display:none}
@media(min-width:701px){
 .shell:has(#app .desktop-filter-toolbar)>.gs-bar{display:none}
 #app .desktop-filter-source{display:none!important}
 #app .desktop-filter-toolbar{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;background:white;border:1px solid #e1e8f3;border-radius:14px;padding:15px;margin:0 0 16px;box-shadow:0 3px 12px #2d4f7905}
 .desktop-filter-toolbar label{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0}
 .desktop-filter-toolbar label>span{font-size:14px;color:#8192a9}
 .desktop-filter-search{flex:1 1 220px}.desktop-filter-field{flex:0 1 130px}
 #app .desktop-filter-toolbar input,#app .desktop-filter-toolbar select{width:100%;min-width:0;height:40px;padding:9px 11px;border:1px solid #dce5f1;border-radius:9px;background:#f9fbfe;color:#3f5c7f;font-size:14px}
 #app .desktop-filter-toolbar input:focus,#app .desktop-filter-toolbar select:focus{outline:2px solid #b5cbf4;border-color:#84a9e9}
 .desktop-filter-toolbar .desktop-extra-filter{margin:0!important;flex:none}.desktop-filter-toolbar .desktop-extra-filter>.btn{height:40px;font-size:14px;padding:9px;border-radius:9px}
 .desktop-filter-actions{display:flex;align-items:center;gap:10px;margin-left:auto;height:40px}
 .desktop-filter-result{font-size:14px;color:#6480a4;white-space:nowrap;min-width:67px}
 .desktop-filter-clear{background:#edf3fd;color:#5278ae;border:1px solid #dce7f7;border-radius:9px;min-height:40px;padding:9px 12px;font-size:14px;white-space:nowrap}
 .desktop-filter-clear:disabled{background:#f6f8fb;border-color:#e8edf4;color:#a3b0c1;cursor:default}
 #app .desktop-list tbody .desktop-filter-hidden{display:none!important}
 .desktop-filter-empty.is-visible{display:block;padding:26px;text-align:center;color:#8898ae;font-size:14px}
 @media(max-width:1200px){.desktop-filter-field{flex-basis:105px}.desktop-filter-actions{gap:7px}.desktop-filter-search{flex-basis:180px}}
}

.desktop-bulk-bar,.desktop-bulk-checkbox{display:none}
.bulk-preview-intro h3{margin:6px 0;font-size:20px;color:#355a8a}.bulk-preview-kicker{font-size:14px;color:#8b9ab0}.bulk-preview-intro p{font-size:14px}
.bulk-preview-total{display:flex;align-items:center;justify-content:space-between;padding:18px;margin:18px 0;background:#edf4ff;border:1px solid #dae7fa;border-radius:12px}.bulk-preview-total span{font-size:14px;color:#6e87a8}.bulk-preview-total strong{font-size:25px;color:#3263ed}
.bulk-preview-list{max-height:42vh;overflow:auto;border:1px solid #e2e9f3;border-radius:11px}.bulk-preview-list th{position:sticky;top:0;background:#f5f8fc;z-index:1}.bulk-preview-list td,.bulk-preview-list th{padding:11px;font-size:14px}.bulk-preview-list small{font-size:14px}.bulk-preview-list .badge{font-size:14px;white-space:normal}.bulk-preview-actions{justify-content:flex-end;margin-top:20px}
@media(min-width:701px){
 #app .desktop-bulk-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border:1px solid #dce7f8;border-radius:12px;background:#edf4ff;padding:11px 14px;margin:0 0 14px}
 .bulk-selection-count{font-size:14px;font-weight:600;color:#3c659d;white-space:nowrap}.bulk-clear-selection{border:0;background:transparent;color:#8394ac;font-size:14px;padding:8px;cursor:pointer}.bulk-selection-hint{font-size:14px;color:#879ab5;flex:1}
 .desktop-bulk-bar .btn{font-size:14px;min-height:36px;padding:8px 11px}.desktop-bulk-bar .bulk-reminder{background:#fff6ed;border-color:#f2deca;color:#ad793c}
 .desktop-bulk-bar button:disabled{opacity:.45;cursor:default}
 #app .desktop-bulk-checkbox{display:inline-flex;vertical-align:middle;margin-right:10px;align-items:center;height:26px}
 #app .desktop-bulk-checkbox input{width:16px;height:16px;min-width:16px;min-height:16px;margin:0;accent-color:#3263ed;cursor:pointer;padding:0}
 #app #bill-pick-rows>tr.bulk-row-selected{background:#edf4ff;box-shadow:inset 3px 0 #3263ed}
 #app table:has(#bill-pick-rows) thead th:first-child{white-space:nowrap}#app table:has(#bill-pick-rows) thead th:first-child>.desktop-sort{display:inline-flex;width:auto}
}

/* Readable desktop billing text without changing the mobile card layout. */
@media(min-width:701px){
 #app[data-view=billing] .desktop-filter-toolbar label>span{font-size:14px;color:#586f8b}
 #app[data-view=billing] .desktop-filter-toolbar input,#app[data-view=billing] .desktop-filter-toolbar select{font-size:15px;height:44px}
 #app[data-view=billing] .desktop-filter-result,#app[data-view=billing] .desktop-filter-clear{font-size:14px;color:#527198}
 #app[data-view=billing] .desktop-filter-actions{height:44px}
 #app[data-view=billing] .desktop-filter-clear{min-height:44px}
 #app[data-view=billing] .desktop-bulk-bar{gap:10px;padding:14px 16px}
 #app[data-view=billing] .bulk-selection-count{font-size:16px}
 #app[data-view=billing] .bulk-clear-selection,#app[data-view=billing] .bulk-selection-hint{font-size:14px;color:#5d7392}
 #app[data-view=billing] .desktop-bulk-bar .btn{font-size:14px;min-height:42px;padding:9px 13px}
 #app[data-view=billing] .desktop-table-bar{font-size:14px;color:#60748f}
 #app[data-view=billing] .desktop-table-bar b{font-size:16px}
 #app[data-view=billing] .desktop-list th,#app[data-view=billing] .desktop-sort{font-size:14px;color:#536c8a;height:48px}
 #app[data-view=billing] .desktop-list td{font-size:16px;line-height:1.6;padding:12px 14px!important}
 #app[data-view=billing] .desktop-list td small{font-size:14px;color:#657a95}
 #app[data-view=billing] .desktop-list .room-no{font-size:19px}
 #app[data-view=billing] .desktop-list .amount{font-size:17px}
 #app[data-view=billing] .desktop-list .badge{font-size:14px;padding:5px 9px}
 #app[data-view=billing] .desktop-list .btn,#app[data-view=billing] .desktop-list .text-btn{font-size:14px;min-height:40px;padding:8px 12px}
 #app[data-view=billing] .desktop-bulk-checkbox input{width:19px;height:19px;min-width:19px;min-height:19px}
 #app[data-view=billing] .period-bar small,#app[data-view=billing] .period-bar label,#app[data-view=billing] .period-bar .hint{font-size:14px;color:#657a95}
 #modal:has(.bulk-preview-intro){width:min(740px,calc(100vw - 48px));max-width:740px}
 .bulk-preview-kicker,.bulk-preview-intro p,.bulk-preview-total span{font-size:15px;color:#5e7390}
 .bulk-preview-intro h3{font-size:23px}
 .bulk-preview-total strong{font-size:30px}
 .bulk-preview-list th{font-size:14px;color:#536c8a}
 .bulk-preview-list td{font-size:16px;padding:13px 15px}
 .bulk-preview-list small,.bulk-preview-list .badge{font-size:14px}
 .bulk-preview-list small{color:#657a95}
 #modal:has(.bulk-preview-intro) .hint{font-size:14px;line-height:1.7;color:#60748f}
 .bulk-preview-actions .btn{font-size:15px;min-height:44px}
}