#app .bill-plan-hidden{display:none!important}
.bill-plan{margin-top:12px}
.bp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:12px}
.bp-stat{--c:#234f94;--bg:#e9f0fc;position:relative;display:grid;grid-template-columns:1fr 44px;grid-template-rows:auto auto;column-gap:10px;row-gap:2px;align-items:center;padding:14px 16px;border:1px solid #e3e9f2;border-radius:12px;background:#fff;box-shadow:0 1px 3px #1a2a4a0d;text-align:left;font:inherit;color:#1c3557;cursor:pointer}
.bp-stat strong{grid-row:1;font-size:20px;font-weight:800;white-space:nowrap}.bp-stat strong small{font-size:15px;font-weight:600;color:#5b6f8c}
.bp-stat>span{grid-row:2;font-size:13px;color:#6b7c93}
.bp-stat i{grid-column:2;grid-row:1/3;width:44px;height:44px;border-radius:50%;background:var(--bg);color:var(--c);display:grid;place-items:center}.bp-stat i svg{width:20px;height:20px}
.bp-stat.is-active{border-color:var(--c);box-shadow:0 0 0 2px var(--c)}
.st-all{--c:#234f94;--bg:#e9f0fc}.st-draft{--c:#566172;--bg:#e9edf2}.st-pending{--c:#245aa5;--bg:#e7effd}.st-review{--c:#b45309;--bg:#fdf1de}.st-overdue{--c:#af3541;--bg:#fbe9eb}.st-paid{--c:#087448;--bg:#e1f4e9}
.bp-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px;color:#4d6681;margin:4px 0 10px}
.bp-building{background:#f6f9fd;border:1px solid #9db5d2;border-radius:10px;margin-bottom:12px;overflow:hidden}
.bp-bhead{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#173a63;color:#fff}.bp-bhead h2{margin:0;font-size:17px;color:#fff;display:flex;gap:8px;align-items:center}.bp-bhead h2 span{display:inline-grid;place-items:center;width:26px;height:26px;border:1px solid #ffffff80;border-radius:6px;background:#ffffff26}
.bp-floor{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;padding:12px 14px;border-top:1px solid #dbe5f2}
.bp-floor h3{display:flex;flex-direction:column;gap:2px;margin:0;padding-top:10px;font-size:22px;font-weight:800;color:#1c3557;line-height:1.1;border-right:3px solid #c9d7ea;min-height:80px}.bp-floor h3 span{font-size:13px;font-weight:500;color:#5b6f8c}
.bp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
.bp-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:96px;padding:10px 8px;border-radius:10px;background:var(--c);color:#fff;text-align:center;cursor:pointer;user-select:none}
.bp-tile:hover{filter:brightness(1.08);box-shadow:0 3px 10px #24486740}.bp-tile:focus-visible{outline:3px solid #173c65;outline-offset:3px}
.bp-tile strong{font-size:28px;font-weight:800;line-height:1.1}
.bp-state{background:#ffffff38;border-radius:5px;padding:2px 9px;font-size:12px;font-weight:600}
.bp-amt{font-size:13px;font-weight:600;color:#ffffffe6}
.bp-ck{position:absolute;left:6px;top:6px;width:26px;height:26px;display:grid;place-items:center;border-radius:6px;background:#ffffff33;cursor:pointer}.bp-ck input{width:16px;height:16px;margin:0;cursor:pointer}
.bp-tile.is-selected{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--c)}
.bp-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.bp-actions .btn{flex:1 1 auto}
@media(max-width:600px){.bp-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.bp-stat{padding:10px 12px;grid-template-columns:1fr 36px}.bp-stat i{width:36px;height:36px}.bp-stat strong{font-size:17px}.bp-floor{grid-template-columns:58px minmax(0,1fr);gap:8px;padding:10px}.bp-floor h3{font-size:17px;min-height:60px}.bp-grid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px}.bp-tile{min-height:80px}.bp-tile strong{font-size:22px}.bp-amt{font-size:11px}}
#app .bp-stat strong small{display:inline!important}#app .bp-stat strong{display:block;white-space:nowrap}
#app .bp-bhead h2,#app .bp-bhead>span{color:#fff}#app .bp-tile{padding-top:16px}
#app .billing-cycle .cycle-heading,#app .billing-cycle .period-summary{display:none!important}#app .billing-cycle{display:flex!important;justify-content:flex-start;padding:12px 16px!important;margin-bottom:14px!important}#app .billing-cycle .period-selects{margin:0}
#app .desktop-bulk-bar,#app .bp-ck{display:none!important}#app .bp-tile{padding-top:10px}
#app .desktop-filter-toolbar:has(.bp-ftoggle) label.desktop-filter-field:has(select[aria-label="ตึกในตาราง"]){display:none}
#app .bp-buildings{margin-bottom:12px}
#app .desktop-filter-toolbar .bp-ftoggle{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:5px 14px;font-size:13px;border-radius:999px;background:#fff;white-space:nowrap;align-self:center}
#app .desktop-filter-toolbar .bp-ftoggle::before{content:"⚲";font-size:15px;transform:rotate(-45deg)}
#app .desktop-filter-toolbar:has(.bp-ftoggle):not(.bp-open):not(:has(.desktop-filter-clear:not([disabled]))){background:transparent;border:0;padding:0;align-items:center;gap:10px}
#app .desktop-filter-toolbar:has(.bp-ftoggle):not(.bp-open):not(:has(.desktop-filter-clear:not([disabled])))>label,#app .desktop-filter-toolbar:has(.bp-ftoggle):not(.bp-open):not(:has(.desktop-filter-clear:not([disabled])))>.desktop-filter-actions{display:none}
#app .desktop-filter-toolbar:has(.bp-ftoggle):not(.bp-open) .review-launch{min-height:34px;padding:5px 14px;font-size:13px}
#app .desktop-filter-toolbar.bp-open .bp-ftoggle{background:#2550c8;color:#fff;border-color:#2550c8}
#app .period-bar .period-selects label{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}