#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.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}
/* billing laid out like the room plan: summary card + toolbar (filter · building · search right) */
#app .billing-cycle.bp-moved{display:none!important}
#app[data-view=billing] .page-heading .actions .period-selects{display:flex;gap:8px;margin:0}
#app[data-view=billing] .page-heading .actions .period-selects .field{margin:0}
#app[data-view=billing] .page-heading .actions .period-selects label{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#app[data-view=billing] .page-heading .actions .period-selects select{min-width:120px;height:42px}
#app .bp-statcard{padding:16px 18px;margin:0!important;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important;border-bottom:0!important}
#app .bp-statcard .bp-stats{margin:0}
#app .desktop-filter-toolbar:has(.bp-ftoggle){display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 18px;margin:0 0 14px!important;border-top-left-radius:0!important;border-top-right-radius:0!important}
#app .desktop-filter-toolbar:has(.bp-ftoggle):not(.bp-open)>label.desktop-filter-field,#app .desktop-filter-toolbar:has(.bp-ftoggle):not(.bp-open)>.desktop-filter-actions{display:none!important}
#app .desktop-filter-toolbar:has(.bp-ftoggle)>.desktop-filter-search{display:flex!important;order:9;margin-left:auto;width:320px;max-width:100%}
#app .desktop-filter-toolbar:has(.bp-ftoggle)>.desktop-filter-search>span{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#app .desktop-filter-toolbar:has(.bp-ftoggle)>.desktop-filter-search input{width:100%}
#app .desktop-filter-toolbar:has(.bp-ftoggle).bp-open>label.desktop-filter-field,#app .desktop-filter-toolbar:has(.bp-ftoggle).bp-open>.desktop-filter-actions{order:10}
#app .desktop-filter-toolbar .bp-ftoggle{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 14px;font-size:14px;border-radius:8px}
#app .desktop-filter-toolbar .bp-ftoggle::before{content:none}
#app .desktop-filter-toolbar .bp-ftoggle svg{width:16px;height:16px}
#app .desktop-filter-toolbar .bp-bldseg{display:inline-flex}
@media(max-width:600px){#app .desktop-filter-toolbar:has(.bp-ftoggle)>.desktop-filter-search{width:100%;margin-left:0;order:-1}#app .desktop-filter-toolbar .bp-bldseg{flex:1}#app .desktop-filter-toolbar .bp-bldseg button{flex:1}#app[data-view=billing] .page-heading .actions{display:grid!important;grid-template-columns:1fr 1fr;width:100%}#app[data-view=billing] .page-heading .actions .period-selects{grid-column:1/-1}#app[data-view=billing] .page-heading .actions .period-selects .field{flex:1}#app[data-view=billing] .page-heading .actions .period-selects select{width:100%}#app[data-view=billing] .page-heading .actions .review-launch{grid-column:1/-1}}
#app .desktop-filter-toolbar:has(.bp-ftoggle)>.review-launch{display:none!important}
#app .desktop-filter-toolbar:has(.bp-ftoggle)>.desktop-filter-search{flex:0 1 320px!important;width:320px!important;max-width:100%!important;margin-left:auto!important;min-width:0!important}
#app .desktop-filter-toolbar:has(.bp-ftoggle)>.desktop-filter-search input{height:40px!important;border:1px solid var(--ui-line,#dfe5ee)!important;border-radius:8px!important;padding-left:36px!important;background:var(--ui-surface,#fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237a879b' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center!important}
@media(max-width:600px){#app .desktop-filter-toolbar:has(.bp-ftoggle)>.desktop-filter-search{flex:1 1 100%!important;width:100%!important;margin-left:0!important}}
@media(max-width:600px){#app[data-view=billing] .page-heading .actions .bp-review-head{grid-column:1/-1!important;width:100%}}
/* bill tiles in the room-plan frame: number above, status box below */
#app .bill-plan .bp-floorcard{margin-bottom:14px}
#app .bill-plan .bp-room{display:flex;flex-direction:column;align-items:stretch;gap:8px;cursor:pointer;text-align:center}
#app .bill-plan .bp-box{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:104px;padding:14px 8px 10px;border:1px solid var(--ui-line,#e2e6ec);border-radius:8px;background:var(--ui-subtle,#f8f9fb);transition:transform .12s,box-shadow .12s}
#app .bill-plan .bp-room:hover .bp-box{transform:translateY(-1px);box-shadow:0 3px 10px #2532470c}
#app .bill-plan .bp-room:focus-visible .bp-box{outline:3px solid #173c65;outline-offset:2px}
#app .bill-plan .bp-room.is-selected .bp-box{outline:2px solid #2550c8;outline-offset:1px}
#app .bill-plan .bp-box .bp-ck{position:absolute;top:6px;right:6px;margin:0}
#app .bill-plan .bp-box .bp-state{font-size:12px;font-weight:700;border-radius:999px;padding:2px 10px}
#app .bill-plan .bp-box .bp-amt{font-size:14px;font-weight:700;color:var(--ui-ink,#253247)}
#app .bill-plan .bp-box.st-paid{background:#eef7f1;border-color:#c4dbc9}#app .bill-plan .bp-box.st-paid .bp-state{background:#d7eedf;color:#1f6b43}
#app .bill-plan .bp-box.st-overdue{background:#fbeff2;border-color:#e8c5cf}#app .bill-plan .bp-box.st-overdue .bp-state{background:#f6d9e0;color:#9c2f45}
#app .bill-plan .bp-box.st-review{background:#fdf5e6;border-color:#ecd3a5}#app .bill-plan .bp-box.st-review .bp-state{background:#f8e6c4;color:#8a4f08}
#app .bill-plan .bp-box.st-pending{background:#eef3fc;border-color:#c6d6f1}#app .bill-plan .bp-box.st-pending .bp-state{background:#dbe6fa;color:#1d4f97}
#app .bill-plan .bp-box.st-draft .bp-state{background:#e7ebf0;color:#4b5563}#app .bill-plan .bp-box.st-draft .bp-amt{font-size:12px;font-weight:500;color:var(--ui-muted,#5e6b7d)}
html[data-theme=dark] #app .bill-plan .bp-box.st-paid{background:#203a2c;border-color:#35604a}html[data-theme=dark] #app .bill-plan .bp-box.st-paid .bp-state{background:#2b5a40;color:#bff0d2}
html[data-theme=dark] #app .bill-plan .bp-box.st-overdue{background:#3d2530;border-color:#6b3a4a}html[data-theme=dark] #app .bill-plan .bp-box.st-overdue .bp-state{background:#6b2f40;color:#ffd5df}
html[data-theme=dark] #app .bill-plan .bp-box.st-review{background:#3a301b;border-color:#6b5426}html[data-theme=dark] #app .bill-plan .bp-box.st-review .bp-state{background:#5e4719;color:#fde7b8}
html[data-theme=dark] #app .bill-plan .bp-box.st-pending{background:#1f2e47;border-color:#34507a}html[data-theme=dark] #app .bill-plan .bp-box.st-pending .bp-state{background:#2c4a78;color:#d6e4ff}
html[data-theme=dark] #app .bill-plan .bp-box.st-draft .bp-state{background:#334155;color:#e2e8f0}
/* bill tiles as a receipt: solid colour by status, white icon (paid = green) */
#app .bill-plan .bp-box.has-bill{min-height:112px;padding:10px 8px 10px;gap:4px;color:#fff;border-color:transparent}
#app .bill-plan .bp-box.has-bill .bill-ic{width:40px;height:40px;color:#fff;flex:none}
#app .bill-plan .bp-box.has-bill .bp-state{background:#ffffff2e!important;color:#fff!important;font-size:12px;padding:1px 9px}
#app .bill-plan .bp-box.has-bill .bp-amt{color:#fff!important;font-size:14px;font-weight:700}
#app .bill-plan .bp-box.has-bill.st-paid{background:#16a34a!important}
#app .bill-plan .bp-box.has-bill.st-overdue{background:#dc2626!important}
#app .bill-plan .bp-box.has-bill.st-review{background:#d97706!important}
#app .bill-plan .bp-box.has-bill.st-pending{background:#2563eb!important}
#app .bill-plan .bp-box.has-bill.st-draft{background:var(--ui-subtle,#f1f4f8)!important;border-color:var(--ui-line,#dfe5ee)!important;color:var(--ui-muted,#5e6b7d)}
#app .bill-plan .bp-box.has-bill.st-draft .bill-ic{color:#9aa7b8}
#app .bill-plan .bp-box.has-bill.st-draft .bp-state{background:#e7ebf0!important;color:#4b5563!important}
#app .bill-plan .bp-box.has-bill.st-draft .bp-amt{color:var(--ui-muted,#5e6b7d)!important;font-size:12px;font-weight:500}
#app .bill-plan .bp-box.has-bill .bp-ck input{accent-color:#fff}
html[data-theme=dark] #app .bill-plan .bp-box.has-bill.st-paid{background:#15803d!important}
html[data-theme=dark] #app .bill-plan .bp-box.has-bill.st-overdue{background:#b91c1c!important}
html[data-theme=dark] #app .bill-plan .bp-box.has-bill.st-review{background:#b45309!important}
html[data-theme=dark] #app .bill-plan .bp-box.has-bill.st-pending{background:#1d4ed8!important}
html[data-theme=dark] #app .bill-plan .bp-box.has-bill.st-draft{background:#263242!important;border-color:#3a485b!important}
html[data-theme=dark] #app .bill-plan .bp-box.has-bill.st-draft .bp-state{background:#334155!important;color:#e2e8f0!important}
html[data-theme=dark] #app .bill-plan .bp-box.has-bill.st-draft .bp-amt{color:#b2bfd0!important}
/* Horga-style bill tile: neutral box, big white document, amount only (paid = green, overdue = red, slip review = amber) */
#app .bill-plan .bp-box.has-bill{background:#e9edf2!important;border-color:#dfe5ee!important;color:#1f2937;min-height:118px;padding:14px 8px 12px;gap:8px}
#app .bill-plan .bp-box.has-bill .bill-ic{width:54px;height:54px;filter:drop-shadow(0 1px 1px #0002)}
#app .bill-plan .bp-box.has-bill .bp-state{display:none!important}
#app .bill-plan .bp-box.has-bill .bp-amt{color:#1f2937!important;font-size:15px;font-weight:700;letter-spacing:.2px}
#app .bill-plan .bp-box.has-bill.st-pending{background:#e9edf2!important}
#app .bill-plan .bp-box.has-bill.st-paid{background:#16a34a!important;border-color:#16a34a!important}#app .bill-plan .bp-box.has-bill.st-paid .bp-amt{color:#fff!important}
#app .bill-plan .bp-box.has-bill.st-overdue{background:#dc2626!important;border-color:#dc2626!important}#app .bill-plan .bp-box.has-bill.st-overdue .bp-amt{color:#fff!important}
#app .bill-plan .bp-box.has-bill.st-review{background:#d97706!important;border-color:#d97706!important}#app .bill-plan .bp-box.has-bill.st-review .bp-amt{color:#fff!important}
#app .bill-plan .bp-box.has-bill.st-draft .bill-ic{opacity:.45}#app .bill-plan .bp-box.has-bill.st-draft .bp-amt{font-size:12px;font-weight:500;color:var(--ui-muted,#5e6b7d)!important}
html[data-theme=dark] #app .bill-plan .bp-box.has-bill,html[data-theme=dark] #app .bill-plan .bp-box.has-bill.st-pending,html[data-theme=dark] #app .bill-plan .bp-box.has-bill.st-draft{background:#2b2f36!important;border-color:#3a3f48!important}
html[data-theme=dark] #app .bill-plan .bp-box.has-bill .bp-amt{color:#f1f5f9!important}
html[data-theme=dark] #app .bill-plan .bp-box.has-bill.st-paid{background:#15803d!important;border-color:#15803d!important}
html[data-theme=dark] #app .bill-plan .bp-box.has-bill.st-overdue{background:#b91c1c!important;border-color:#b91c1c!important}
html[data-theme=dark] #app .bill-plan .bp-box.has-bill.st-review{background:#b45309!important;border-color:#b45309!important}
@media(max-width:600px){#app .bill-plan .bp-box.has-bill .bp-state{display:inline-block!important}}
/* bill popup: itemised */
#modal .bp-breakdown{border:1px solid var(--ui-line,#e2e6ec);border-radius:10px;padding:6px 14px;margin:8px 0 12px}
#modal .bp-line{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed var(--ui-line,#e2e6ec);font-size:14.5px}
#modal .bp-line span:last-child{font-variant-numeric:tabular-nums;font-weight:600}
#modal .bp-line.neg span:last-child{color:#15803d}#modal .bp-line.late span:last-child{color:#b42318}
#modal .bp-line.bp-total{border-bottom:0;font-size:16px;font-weight:700}
html[data-theme=dark] #modal .bp-line.neg span:last-child{color:#86efac}html[data-theme=dark] #modal .bp-line.late span:last-child{color:#fca5a5}
/* bill toolbar like Horga: building + 4 labelled filters (เลือกบิล · ห้อง · เลขที่บิล/ใบเสร็จ · ยอดเงิน) */
html body #app .desktop-filter-toolbar:has(.bp-fields)>:is(.bp-ftoggle,.desktop-filter-search,label.desktop-filter-field,.desktop-filter-actions){display:none!important}
#app .desktop-filter-toolbar:has(.bp-fields){align-items:flex-end!important}
#app .desktop-filter-toolbar .bp-bldseg{align-self:flex-end}
#app .bp-fields{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;min-width:0}
#app .bpf{display:flex;flex-direction:column;gap:4px;min-width:0;margin:0}
#app .bpf-lab{font-size:13px;font-weight:600;color:var(--ui-ink,#253247)}
#app .bpf select{height:40px;width:100%}
#app .bpf-box{display:flex;align-items:stretch;border:1px solid var(--ui-line,#e2e6ec);border-radius:8px;overflow:hidden;background:var(--ui-surface,#fff);height:40px}
#app .bpf-box i{display:grid;place-items:center;width:38px;flex:none;font-style:normal;font-weight:700;color:var(--ui-muted,#5e6b7d);background:var(--ui-subtle,#f6f8fb);border-right:1px solid var(--ui-line,#e2e6ec)}
#app .bpf-box i svg{width:16px;height:16px}
html body #app .bpf-box input{border:0!important;box-shadow:none!important;height:100%!important;min-width:0;flex:1;padding:0 10px!important;background:transparent!important;font-size:14px}
@media(max-width:1100px){#app .bp-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){#app .bp-fields{grid-template-columns:1fr;flex-basis:100%}}

/* ส่งบิล ▾ */
#app .page-heading .bp-send{position:relative;display:inline-flex}
#app .btn.bp-send-btn{background:#d0610d;border-color:#d0610d;color:#fff;font-weight:600;display:inline-flex;align-items:center;gap:6px}
#app .btn.bp-send-btn:hover:not(:disabled){background:#b8550a;border-color:#b8550a;color:#fff}
#app .btn.bp-send-btn:disabled{opacity:.5}
#app .btn.bp-send-btn svg{width:16px;height:16px;flex:none}#app .btn.bp-send-btn .bp-caret{width:14px;height:14px;margin-left:2px}
#app .bp-send-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:170px;display:grid;gap:2px;padding:6px;background:var(--ui-surface,#fff);border:1px solid var(--ui-line,#e2e6ec);border-radius:10px;box-shadow:0 12px 28px #0f172a2e;z-index:60}
#app .bp-send-menu[hidden]{display:none}
#app .bp-send-menu button{background:none;border:0;border-radius:7px;padding:9px 12px;text-align:left;font:inherit;font-size:14px;color:var(--ui-ink,#1f2937);cursor:pointer;min-height:0}
#app .bp-send-menu button:hover,#app .bp-send-menu button:focus-visible{background:var(--ui-selected,#eef4ff);outline:none}
/* picking rooms */
#app .bp-pickbar{position:sticky;top:128px;z-index:30;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:10px 14px;margin:0 0 12px;background:var(--ui-surface,#fff);border:1px solid #f0b47e;border-radius:12px;box-shadow:0 8px 22px #0f172a1f}
#app .bp-pickbar strong{font-size:15px;color:var(--ui-ink,#1f2937)}
#app .bp-pickbar .bp-pk-hint{font-size:13px;color:var(--ui-muted,#5e6b7d);flex:1 1 220px}
#app .bp-pickbar .btn{min-height:34px;padding:5px 14px}
#app .bill-plan.bp-picking .bp-ck{display:grid!important}
#app .bill-plan.bp-picking .bp-room{cursor:pointer}
#app .bill-plan.bp-picking .bp-room.bp-nosend{opacity:.38;cursor:not-allowed}
#app .bill-plan.bp-picking .bp-room.bp-nosend .bp-ck{display:none!important}
#app .bill-plan.bp-picking .bp-room.is-selected .bp-box{outline:3px solid #d0610d;outline-offset:2px}
@media (max-width:600px){#app .bp-pickbar{top:4px}#app .bp-pickbar .bp-pk-hint{order:9;flex-basis:100%}#app .bp-pickbar [data-pick=send]{margin-left:auto}}
/* mobile has its own bill list (mobile-billing-list) without the tiles, so the send menu is desktop only */
@media (max-width:600px){#app[data-view="billing"]:has(.mobile-billing-list) .page-heading .bp-send{display:none}}