:root{
--bg-app:#DAD8D2;--surface:#E9E6E0;--paid:#18B76A;--pending:#E8914F;
--primary-blue:#3F73D9;--danger:#D65A52;--text-primary:#1F2329;--text-secondary:#5F6670;--text-on-color:#FFFFFF;
--bg:var(--bg-app);--fg1:var(--text-primary);--fg2:var(--text-secondary);--blue:var(--primary-blue);--green:var(--paid);--amber:var(--pending);--red:var(--danger);
--shadow-card:8px 10px 18px rgba(118,112,104,.30),-5px -5px 12px rgba(255,255,255,.72);
--shadow-button:5px 7px 12px rgba(118,112,104,.24),-3px -3px 8px rgba(255,255,255,.68);
--focus:0 0 0 3px rgba(63,115,217,.25);
--page-x:16px;
--topbar-gap:8px;
--content-gap-y:12px;
--grid-content-top:4px;
--right-panel-w:340px;
--dash-gap:14px;
--tx-grid-pad:14px;
--tx-grid-gap:12px;
--card-max:186px;
--panel-pad:14px;
--dash-left-w: calc(100vw - 2 * var(--page-x) - var(--dash-gap) - var(--right-panel-w));
--grid-usable-w: calc(var(--dash-left-w) - 2 * var(--panel-pad));
--col-w: calc((var(--grid-usable-w) - 6 * var(--tx-grid-gap)) / 7);
--card-w: min(calc(var(--col-w) * 0.92), var(--card-max));
--card-inset: calc((var(--col-w) - var(--card-w)) / 2);
/* Exact Dashboard room-card size, reused (read-only) by Housekeeping
and Maintenance so their cards render pixel-identical to the
Dashboard's actual .tx-card at any viewport — not a guessed flat
186px, the real final cascade values:
width = min( (dash-left usable width − 6 gaps) / 7 , 186px )
= min( (100vw − 2·page-x − dash-gap − right-panel-w
− 2·panel-pad − 6·tx-grid-gap) / 7 , card-max )
= min( (100vw − 486px) / 7 , 186px )
height = (dash-left usable height − 5 gaps) / 6
= (100vh − [topbar 81px] − 2·panel-pad − 5·tx-grid-gap) / 6
= (100vh − 169px) / 6
81px / 169px / 486px are cited from the .dash-body / .dash-left /
.tx-grid comments and final cascade earlier in this file — change
those together with this block if the Dashboard panel chrome
constants ever change. Dashboard itself is untouched; it keeps
rendering from its own literal values, not from these variables. */
--hk-maint-card-w: min(calc((100vw - 486px) / 7), var(--card-max));
--hk-maint-card-h: calc((100vh - 169px) / 6);
/* Left offset of Dashboard's first room card (room 102), measured
live from the running app at 1920px viewport: 39.42px, which
decomposes exactly as page-x (16) + panel-pad (14) + card-inset
(9.43, the centering slack between the grid column and the
186px-capped card — already defined above as --card-inset).
.page's own left padding (var(--page-x)) is shared by every page
already, so HK/Maintenance only need this remainder as extra
left padding on their room-grid container, with the grid set to
justify-content:start (not center) so it lands flush instead of
floating in the middle of whatever width that page's own panel
happens to have. */
--hk-maint-left-pad: calc(var(--panel-pad) + var(--card-inset));
}
*{box-sizing:border-box}body,.pin-screen,.shell,.main-content{background:var(--rp-bg)!important;color:var(--text-primary)!important}
body,button,input,select,textarea{font-family:var(--font-sans)!important}button{cursor:pointer}.mono,.mono-c,.z,.tx-room,.mini-cal-grid button,.bt-amt,.sum-line .v{font-family:var(--font-mono)!important;font-variant-numeric:tabular-nums}
.mc-topbar{height:56px!important;padding:8px 16px!important;background:#DAD8D2!important;border:0!important;border-bottom:0!important;box-shadow:none!important;outline:0!important;border-radius:0 0 16px 16px!important}.tb-brand,.tb-nav-icon{display:none!important}.tb-nav,.tb-right{gap:9px!important}.tb-nav-item,.tb-icon,.act,.pbtn,.room-action-btn,.popup-x,.mini-cal-actions button,.shift-today,.dt-step{height:36px!important;padding:0 13px!important;border:0!important;border-radius:14px!important;background:var(--surface)!important;color:var(--text-primary)!important;box-shadow:var(--shadow-button)!important;transition:transform .12s,box-shadow .12s!important}.tb-nav-item.active,.act.blue,.pbtn.primary,.room-action-btn.primary-action,.tb-icon.print{background:var(--primary-blue)!important;color:var(--text-on-color)!important}.tb-nav-item.active::after{display:none!important}.tb-nav-item.active .tb-nav-label,.pbtn.primary{color:var(--text-on-color)!important}.tb-icon.green,.pbtn.primary.green,.block-total.send{background:var(--paid)!important;color:var(--text-on-color)!important}.tb-icon.red,.pbtn.danger,.act.red,.pbtn.primary.red{background:var(--danger)!important;color:var(--text-on-color)!important}.tb-nav-item:active,.tb-icon:active,.act:active,.pbtn:active,.room-action-btn:active{transform:translateY(2px)!important;box-shadow:0 3px 7px rgba(31,35,41,.13)!important}.mc-avatar{background:var(--primary-blue)!important;color:var(--text-on-color)!important}.mc-user-name{color:var(--text-primary)!important}.mc-user-role{color:var(--text-secondary)!important}
.page{padding:9px var(--page-x) 12px!important}.page.dash{overflow:hidden!important;padding-top:0!important}/* .dash-body height: 81px = 8px topbar top margin + 52px .mc-topbar height + 9px .page top padding + 12px .page bottom padding (box-sizing:border-box, so both sides of .page's padding subtract from .dash-body's available height). page top padding (9px) + .tx-grid/.dash-right top padding (var(--grid-content-top), 4px) together give the ~13px visual gap between the floating topbar's bottom edge and the first content row (room 102 / date card). Two earlier patches (68px alone, then .page.dash{gap:0}) were each tested live and proven no-op — confirmed via getComputedStyle and direct slack measurement before being reverted here. */.dash-body{grid-template-columns:minmax(0,1fr) 340px!important;gap:14px!important;height:calc(100vh - 80px)!important;width:100%!important;max-width:100%!important;overflow:visible!important}.dash-left{overflow:hidden!important;background:#DAD8D2!important;border-radius:30px!important;box-shadow:2px 3px 8px rgba(118,112,104,.14)!important;padding:var(--panel-pad)!important}.tx-grid{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;grid-template-rows:repeat(6,60px)!important;grid-auto-rows:60px!important;gap:16px!important;align-content:start!important;padding:0!important}
.tx-card{position:relative!important;width:100%!important;height:70px!important;min-height:70px!important;padding:7px 8px!important;border:0!important;border-radius:15px!important;background:var(--surface)!important;color:var(--text-primary)!important;box-shadow:var(--shadow-card)!important;overflow:hidden!important;transition:transform .12s,box-shadow .12s!important}.tx-card:active{transform:translateY(2px)!important;box-shadow:0 4px 8px rgba(31,35,41,.15)!important}.tx-card.paid,.tx-card.comp{background:var(--paid)!important}.tx-card.due,.tx-card.partial{background:var(--pending)!important}.tx-card.broken{background:var(--danger)!important}.tx-card.paid *,.tx-card.comp *,.tx-card.due *,.tx-card.partial *,.tx-card.broken *{color:var(--text-on-color)!important}.tx-room{position:absolute!important;top:8px!important;left:10px!important;font-size:13px!important;font-weight:600!important;line-height:1!important}.tx-guest,.tx-state-main,.tx-free-label{font-size:10px!important;font-weight:600!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tx-state-note,.tx-free-detail{font-size:8px!important;opacity:.76!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tx-tag{font-size:7px!important;border:0!important;border-radius:7px!important;box-shadow:none!important}.tx-tag.inv-number{background:var(--primary-blue)!important}.tx-tag.waiting-inv{background:var(--pending)!important}.tx-night,.tx-due{font-size:7px!important}.tx-add-cta,.tx-add-plus{display:none!important}
.dash-right{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;background:#DAD8D2!important;border-radius:30px!important;box-shadow:2px 3px 8px rgba(118,112,104,.14)!important;padding:var(--panel-pad)!important;overflow-y:auto!important;overflow-x:hidden!important;align-content:start!important}.dash-right>.shift-card{grid-column:1;grid-row:1}.dash-right>.room-sum-2{grid-column:1;grid-row:2}.dash-right>.payment-summary-card,.dash-right>.exp-block,.dash-right>.block-total.solo,.dash-right>.fin-block.solo{grid-column:1/-1}.mini-cal,.shift-card,.rs-card,.inv-block,.exp-block,.block-total.solo,.tcard,.dt-bar,.popup,.pin-card,.prelogin-summary>div{background:var(--surface)!important;border:0!important;border-radius:16px!important;box-shadow:var(--shadow-card)!important}.mini-cal{padding:10px!important}.mini-cal-grid{gap:3px!important}.mini-cal-grid button{position:relative;background:transparent!important;color:var(--text-primary)!important;border:0!important;border-radius:8px!important;box-shadow:none!important;font-size:11px!important}.mini-cal-grid button.today{background:var(--pending)!important;color:var(--text-on-color)!important}.mini-cal-grid button.selected{background:var(--paid)!important;color:var(--text-on-color)!important}.mini-cal-grid button.has-data::before{content:"";position:absolute;right:2px;bottom:2px;width:3px;height:3px;border-radius:50%;background:var(--primary-blue)}.mini-cal-grid button.selected.today::after{content:"";position:absolute;right:2px;top:2px;width:4px;height:4px;border-radius:50%;background:var(--pending)}
.dash-right .exp-row{box-shadow:1px 2px 3px rgba(20,18,14,.12),-1px -1px 2px rgba(255,255,255,.5)!important}
.summary-card,.sum-sub,.block-total{background:transparent!important;border:0!important;box-shadow:none!important}.payment-summary-card{padding:9px!important}.payment-divider{height:1px;background:rgba(31,35,41,.14);margin:7px 2px}.block-total{padding:7px 10px!important}.block-total.cashnavy{background:var(--primary-blue)!important;color:var(--text-on-color)!important}.block-total.red{background:var(--danger)!important;color:var(--text-on-color)!important}.block-total.send{background:var(--paid)!important;color:var(--text-on-color)!important}.block-total.red *,.block-total.send *,.block-total.cashnavy *{color:var(--text-on-color)!important}.exp-list{display:grid!important;gap:6px!important;max-height:180px!important;padding:6px!important;overflow-y:auto!important}.exp-row{min-height:22px!important;padding:6px 8px!important;border:0!important;border-radius:10px!important;background:var(--surface)!important;box-shadow:var(--shadow-button)!important}.exp-placeholder{opacity:.3!important}.expense-page-list{display:grid;gap:12px;padding:8px 0}.expense-item-card,.expense-page-total{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border:0;border-radius:16px;background:var(--surface);color:var(--text-primary);box-shadow:var(--shadow-card);text-align:left}.expense-item-copy{display:grid;gap:3px}.expense-item-copy small{color:var(--text-secondary)}.expense-item-amount{margin-left:auto;color:var(--danger);font-weight:700}.expense-page-total{background:var(--danger);color:var(--text-on-color)}.expense-empty{color:var(--text-secondary);cursor:default}
.shift-side input,.fld input,.fld select,.fld textarea,.room-pick-btn,.private-ota-flag,.side-toggle{height:42px!important;background:var(--surface)!important;color:var(--text-primary)!important;border:0!important;border-radius:12px!important;box-shadow:var(--shadow-button)!important}.fld input:focus,.fld select:focus,.fld textarea:focus,.shift-side input:focus{outline:0!important;box-shadow:var(--shadow-button),var(--focus)!important}.fld input::placeholder,.fld textarea::placeholder{color:var(--text-secondary)!important}.fld select{background-image:none!important}.side-toggle{padding:4px!important;display:grid!important;gap:4px!important}.side-toggle button{border:0!important;border-radius:9px!important;background:var(--surface)!important;color:var(--text-primary)!important}.side-toggle button.on{background:var(--primary-blue)!important;color:var(--text-on-color)!important;box-shadow:var(--shadow-button)!important}.payment-mode-toggle{grid-template-columns:repeat(2,1fr)!important;height:auto!important}.stayover-popup .payment-mode-toggle{grid-template-columns:repeat(3,1fr)!important}.payment-mode-toggle button.on.paid{background:var(--paid)!important}.payment-mode-toggle button.on.pending{background:var(--pending)!important}
.scrim{background:rgba(31,35,41,.42)!important;backdrop-filter:none!important}.popup{max-height:calc(100vh - 24px)!important;overflow:auto!important}.income-popup{width:min(var(--popup-w-xl),calc(100vw - 24px))!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}.form-scroll{flex:1;min-height:0;overflow-y:auto!important;overflow-x:hidden!important}.form-grid{gap:10px!important;padding:16px!important}.income-form-grid{grid-template-columns:1fr 1fr!important}.income-form-grid>.fld,.income-form-grid>.fld.money-fld{grid-column:auto!important}.income-form-grid>.fld.full{grid-column:1/-1!important}.popup-head,.popup-foot{flex:none;background:var(--surface)!important;padding:11px 16px!important}.popup-foot{position:sticky!important;bottom:0;z-index:3!important}.doc-type-toggle{grid-template-columns:1fr 1fr!important;width:100%!important}.doc-type-toggle button.on{background:var(--primary-blue)!important;color:var(--text-on-color)!important}.fld-error{display:block;margin-top:4px;color:var(--danger)!important;font-size:9px;font-weight:600}.pbtn:disabled,.fld input:disabled,.fld select:disabled{opacity:.4!important;cursor:not-allowed!important;box-shadow:none!important}
.pin-screen{min-height:100vh!important;padding:28px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:auto!important}.pin-card{width:min(490px,calc(100vw - 32px))!important;padding:28px!important}.pin6-wrap{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:11px!important;width:100%!important}.pin6-box{width:100%!important;min-width:0!important;background:var(--surface)!important;box-shadow:var(--shadow-button)!important;border:0!important}.pin-login-btn{display:none!important}.prelogin-summary{position:static!important;transform:none!important;width:100%!important;margin-top:18px!important;grid-template-columns:repeat(5,1fr)!important}
.dt-bar,.tcard{border-radius:16px!important}.tcard{overflow:hidden!important}table.dt{border-collapse:separate!important;border-spacing:0 4px!important;padding:0 8px 8px!important}table.dt th{background:transparent!important;color:var(--text-secondary)!important;border:0!important}table.dt td{background:var(--surface)!important;border:0!important}
.exp-block,.exp-card{background:transparent!important;border:0!important;box-shadow:none!important}
@media(max-width:1200px){.dash-body{grid-template-columns:minmax(0,1fr) 340px!important}.tx-grid{grid-template-columns:repeat(6,minmax(0,105px))!important}.mc-user-info{display:none!important}}
@media(max-width:950px){body,.shell,.main-content{height:auto!important;overflow:auto!important}.page.dash{overflow:auto!important}.dash-body{display:block!important;height:auto!important}.tx-grid{grid-template-columns:repeat(4,minmax(90px,1fr))!important;grid-template-rows:none!important}.dash-right{display:grid!important;margin-top:18px!important}.income-form-grid,.form-grid{grid-template-columns:1fr!important}.income-form-grid>.fld,.income-form-grid>.fld.full{grid-column:1!important}.popup-foot{flex-wrap:wrap!important}}
@media print{body,.shell,.main-content,.page{background:var(--text-on-color)!important}.mc-topbar,.mini-cal,.shift-card,.rs-card,.payment-summary-card,.block-total.solo{display:none!important}.tcard,.exp-block,.exp-card,.exp-list,.exp-row,.expense-item-card,.expense-page-total{box-shadow:none!important;overflow:visible!important;max-height:none!important}.dt tr,.expense-item-card{break-inside:avoid}}
/* Daily operation refinements */
.tb-icon{width:auto!important;min-width:68px!important;}
.tb-right{gap:7px!important}
.tx-grid{height:100%!important;grid-template-rows:repeat(7,minmax(0,1fr))!important;grid-auto-rows:minmax(0,1fr)!important;align-content:stretch!important}
.tx-card{height:auto!important;min-height:0!important}
.tx-guest.center{position:absolute!important;inset:25px 8px 18px!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important}
.mini-cal-grid button.today{background:transparent!important;color:var(--pending)!important}
.mini-cal-grid button.selected{background:var(--paid)!important;color:var(--text-on-color)!important}
.mini-cal-grid button.selected.today{background:var(--paid)!important;color:var(--text-on-color)!important}
.mini-cal-grid button.selected.today::after{display:none!important}
.prelogin-summary{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:10px!important}
.prelogin-summary>div.pre-summary-card{min-width:0!important;min-height:76px!important;padding:12px 6px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;border-radius:14px!important}
.pre-summary-card .z{font-size:21px!important;font-weight:600!important}
.pre-summary-card small{font-size:9px!important;font-weight:700!important;color:var(--text-secondary)!important}
.pre-summary-card.sold .z{color:var(--paid)!important}.pre-summary-card.stayover .z{color:var(--primary-blue)!important}.pre-summary-card.pending-inv .z{color:var(--pending)!important}.pre-summary-card.broken .z{color:var(--danger)!important}
/* Compact current five-row Create / Edit form */
.income-popup{width:min(var(--popup-w-xl),calc(100vw - 24px))!important}
.income-form-grid{align-items:start!important}
.inside-fld{position:relative!important;gap:4px!important}
.inside-label{position:absolute!important;z-index:2!important;top:5px!important;left:13px!important;font-size:8px!important;line-height:1!important;letter-spacing:.06em!important;text-transform:uppercase!important;font-weight:700!important;color:var(--text-secondary)!important;pointer-events:none!important}
.inside-fld>input,.inside-fld>.room-pick-btn,.composite-box,.money-pair{height:52px!important;padding-top:13px!important}
.inside-fld>input,.inside-fld>.room-pick-btn{padding-left:13px!important}
.composite-box{display:grid!important;grid-template-columns:1fr!important;gap:5px!important;padding:16px 5px 5px!important;border-radius:12px!important;background:var(--surface)!important;box-shadow:var(--shadow-button)!important}
.composite-box.split{grid-template-columns:1fr 1fr!important}
.composite-box select,.composite-box input{width:100%!important;height:31px!important;min-width:0!important;padding:0 8px!important;border-radius:8px!important;box-shadow:none!important;background:#E4E4E3!important}
.private-ota-mini{position:absolute!important;z-index:3!important;right:7px!important;top:3px!important;border:0!important;background:transparent!important;color:var(--text-secondary)!important;font-size:7px!important;font-weight:700!important}
.private-ota-mini.on{color:var(--primary-blue)!important}
.money-pair{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important;padding:0!important}
.money-pair input{height:52px!important;min-width:0!important;padding:14px 8px 0!important;text-align:right!important}
.money-pair .due-fld{background:#FFF1D8!important}
.income-form-grid .inside-fld input:disabled,.income-form-grid .inside-fld select:disabled{opacity:.68!important;box-shadow:var(--shadow-button)!important}
.income-form-grid .doc-type-row{margin-bottom:2px!important}
.income-form-grid .fld-error{margin-left:4px!important}
@media print{.inside-label{display:none!important}.inside-fld>input,.inside-fld>.room-pick-btn,.composite-box,.money-pair{padding-top:0!important}}
/* June 14 operation polish */
.inside-label{display:none!important}
.inside-fld>input,.inside-fld>.room-pick-btn,.composite-box,.money-pair{padding-top:0!important}
.inside-fld>input,.inside-fld>.room-pick-btn{height:48px!important}
.composite-box{height:auto!important;min-height:48px!important;padding:5px!important;background:var(--surface)!important;box-shadow:var(--shadow-button)!important}
.payment-composite{grid-template-columns:1fr!important}
.payment-composite.split{grid-template-columns:1fr 1fr!important}
.payment-composite select,.payment-composite input{height:38px!important;background:transparent!important;border-radius:9px!important}
.sales-composite{grid-template-columns:1fr 1fr!important}
.sales-composite .composite-wide{grid-column:1!important}
.money-pair{height:48px!important}
.money-pair input{height:48px!important;padding:0 10px!important}
.money-pair .due-fld{background:var(--pending)!important;color:var(--text-on-color)!important}
.money-pair .due-fld::placeholder{color:rgba(255,255,255,.9)!important}
.mini-cal-grid button.has-data::before,.mini-cal-grid button.selected.today::after{display:none!important}
.mini-cal-grid button.today,.mini-cal-grid button.selected.today{background:var(--paid)!important;color:var(--text-on-color)!important;border:0!important}
.mini-cal-grid button.selected:not(.today){background:transparent!important;color:var(--text-primary)!important;border:2px solid var(--pending)!important}
.dt-bar .dt-row{display:grid!important;grid-template-columns:82px minmax(130px,1fr) 82px!important;gap:8px!important;width:100%!important}
.dt-bar .dt-step,.dt-bar .shift-today{width:100%!important;height:38px!important;padding:0 8px!important;white-space:nowrap!important}
.dt-bar .dt-date{display:flex!important;align-items:center!important;justify-content:center!important;min-height:38px!important;white-space:nowrap!important}
.dash-right{gap:12px!important}
.mini-cal,.shift-card,.rs-card,.payment-summary-card,.exp-block,.block-total.solo{box-shadow:0 8px 18px rgba(31,35,41,.16),0 2px 5px rgba(31,35,41,.10)!important}
.payment-summary-card{padding:14px!important;border-radius:20px!important}
.summary-card{gap:12px!important}
.sum-sub{padding:8px!important;border-radius:12px!important}
.payment-divider{margin:10px 2px!important}
.block-total.cashnavy{border-radius:14px!important;margin-top:8px!important}
.exp-row{box-shadow:0 5px 11px rgba(31,35,41,.12)!important}
.maint-type-toggle{height:auto!important;min-height:52px!important;grid-template-columns:1fr 1fr!important;padding:5px!important}
.maint-type-toggle button{min-height:42px!important;white-space:nowrap!important}
.maint-type-readonly{min-height:48px!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:12px!important;background:var(--surface)!important;box-shadow:var(--shadow-button)!important;font-weight:700!important}
.pending-amount{color:var(--pending)!important;font-weight:700!important}
@media(max-width:950px){
.dt-bar .dt-row{grid-template-columns:1fr 1.4fr 1fr!important}
}
/* Compact flat transaction forms */
.income-popup,.stayover-popup{position:relative!important;box-shadow:0 1px 2px rgba(0,0,0,.08)!important}
.income-popup .form-grid,.stayover-popup .form-grid{gap:8px 10px!important;padding:12px!important}
.income-form-grid{align-items:stretch!important}
.income-popup .fld,.stayover-popup .fld{min-width:0!important}
.income-popup input,.income-popup select,.income-popup .room-pick-btn,.income-popup button,
.stayover-popup input,.stayover-popup select,.stayover-popup button{box-shadow:0 1px 2px rgba(0,0,0,.08)!important}
.income-popup input,.income-popup select,.income-popup .room-pick-btn,.stayover-popup input,.stayover-popup select{height:36px!important;border-radius:10px!important}
.income-popup select,.stayover-popup select{appearance:none!important;-webkit-appearance:none!important;background-color:var(--surface)!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235F6670' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 11px center!important;padding-right:30px!important}
.doc-choice-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;align-items:stretch!important}
.doc-choice-card{display:grid!important;grid-template-rows:36px 36px!important;gap:6px!important;align-content:start!important}
.doc-choice-card>button{display:flex!important;align-items:center!important;justify-content:center!important;border:0!important;border-radius:10px!important;background:var(--surface)!important;color:var(--text-primary)!important;font-weight:700!important}
.doc-choice-card>button.on{background:var(--primary-blue)!important;color:var(--text-on-color)!important}
.doc-choice-spacer{height:36px!important}
.invoice-number-input{text-align:center!important}
.form-card{position:relative!important;min-height:44px!important;padding:4px!important;border-radius:11px!important;background:var(--surface)!important;box-shadow:0 1px 2px rgba(0,0,0,.08)!important;justify-content:center!important}
.sales-field{display:grid!important;grid-template-columns:1fr!important;gap:5px!important}
.sales-field select,.sales-field input{width:100%!important;box-shadow:none!important;background-color:transparent!important}
.private-ota-mini{position:static!important;width:100%!important;min-height:24px!important;box-shadow:none!important;text-align:left!important}
.payment-row{display:grid!important;grid-template-columns:1.15fr 1fr 1fr!important;gap:10px!important;align-items:stretch!important}
.payment-row>.fld{height:100%!important;justify-content:center!important}
.payment-method-card{padding:4px!important}
.payment-composite,.payment-composite.split{display:grid!important;grid-template-columns:1fr!important;gap:4px!important;min-height:36px!important;padding:0!important;box-shadow:none!important;background:transparent!important}
.payment-composite.split{grid-template-columns:1fr 1fr!important}
.payment-composite select,.payment-composite input{height:36px!important}
.fld-error{display:none!important}
.popup-foot .pbtn.primary:not(.green):last-child{padding-left:15px!important;padding-right:15px!important;min-width:0!important}
.stayover-popup{width:min(var(--popup-w-lg),calc(100vw - 24px))!important}
.stayover-grid{grid-template-columns:1fr 1fr!important}
.stayover-payment-row{display:grid!important;grid-template-columns:1.15fr 1fr 1fr!important;gap:10px!important;align-items:stretch!important}
.stayover-pay-method{display:grid!important;gap:4px!important}
.stayover-note-row{display:grid!important;grid-template-columns:1fr auto!important;gap:8px!important}
.stayover-free-btn{min-width:110px!important;border:0!important;border-radius:10px!important;background:var(--surface)!important;color:var(--text-primary)!important}
.stayover-free-btn.on{background:var(--paid)!important;color:var(--text-on-color)!important}
/* Dashboard readability */
.tx-room{font-size:17px!important;font-weight:700!important}
.tx-room.free-room{font-size:18px!important}
.tx-guest,.tx-state-main,.tx-free-label{font-size:12px!important}
.tx-state-note,.tx-free-detail{font-size:9px!important}
.tx-night,.tx-due,.tx-tag{font-size:8px!important}
.tx-tag.inv-status{position:absolute!important;right:0!important;top:0!important;min-width:30px!important;text-align:center!important}
.block-total.alltx,.block-total.cashnavy{min-height:48px!important;width:100%!important;border-radius:14px!important;margin:7px 0 0!important;padding:8px 12px!important}
.rs-n,.seg .n{font-size:24px!important}
.sum-line .v{font-size:16px!important;font-weight:700!important}
.bt-amt{font-size:24px!important;font-weight:700!important}
.shift-side input{font-size:18px!important}
.action-bar .act{padding:7px 14px!important;font-size:11px!important;min-height:30px!important;height:30px!important}
@media(max-width:950px){
.payment-row{grid-template-columns:1fr!important}
.stayover-payment-row{grid-template-columns:1fr!important}
.stayover-grid{grid-template-columns:1fr!important}
}
/* Final agreed dashboard and list-page rules */
.income-popup .field-invalid input,.income-popup .field-invalid select,.income-popup .field-invalid .room-pick-btn,
.income-popup .field-invalid.form-card,.stayover-popup .field-invalid input,.stayover-popup .field-invalid select{outline:0!important}
.income-popup .form-card{padding:0!important;background:transparent!important;box-shadow:none!important}
.income-popup .inside-fld>input,.income-popup .room-pick-btn{background:var(--surface)!important;box-shadow:0 1px 2px rgba(0,0,0,.08)!important}
.income-popup .sales-field{align-content:stretch!important}
.income-popup .doc-choice-card>button,.income-popup .invoice-number-input{box-shadow:0 1px 2px rgba(0,0,0,.08)!important}
.tx-guest,.tx-state-main,.tx-free-label{font-size:14.4px!important}
.tx-foot{position:absolute!important;left:9px!important;right:9px!important;bottom:7px!important;align-items:center!important}
.tx-due{margin-left:auto!important;font-size:11px!important;font-weight:700!important}
.tx-night{font-size:9px!important}
.tx-tag.inv-status{top:-7px!important;right:-8px!important;min-width:38px!important;padding:4px 7px!important;border-radius:0 15px 0 9px!important}
.maint-type-toggle{height:52px!important;grid-template-columns:1fr 1fr!important;align-items:stretch!important}
.maint-type-toggle button{height:42px!important;min-height:42px!important;max-height:42px!important;padding:0 8px!important}
.room-sum-2,.rs-card,.rs-sub{min-height:0!important}
.rs-sub,.rs-sold{position:relative!important;justify-content:flex-start!important;height:100%!important}
.rs-sn,.rs-n{font-size:48px!important;font-weight:700!important;line-height:1!important}
.rs-sl,.rs-unit{position:absolute!important;left:0!important;right:0!important;bottom:10%!important;text-align:center!important;font-size:11px!important;font-weight:700!important}
.payment-summary-card{padding:12px!important;border-radius:18px!important;box-shadow:0 1px 2px rgba(0,0,0,.08)!important}
.payment-summary-title{font-size:14px!important;font-weight:700!important;margin:0 2px 8px!important}
.summary-card{padding:0!important;gap:14px!important}
.sum-sub{padding:5px 2px!important;box-shadow:none!important}
.sum-head{font-size:13px!important}
.sum-line{min-height:26px!important}
.sum-line .k{font-size:13px!important}.sum-line .v{font-size:16px!important}
.payment-divider{margin:8px 0!important}
.block-total.alltx,.block-total.cashnavy{min-height:44px!important;margin:5px 0 0!important;border-radius:12px!important}
.block-total.alltx{background:#E2E3E2!important;border:0!important}
.block-total .bt-lbl{font-size:11px!important}.block-total .bt-amt{font-size:19px!important}
.block-total.cashnavy{box-shadow:0 1px 2px rgba(0,0,0,.08)!important}
.dash-right .shift-card,.dash-right .rs-card,.dash-right .exp-block,.dash-right .block-total.solo,
.exp-card,.exp-row{box-shadow:0 1px 2px rgba(0,0,0,.08)!important}
.exp-block{overflow:hidden!important;border-radius:16px!important;background:var(--surface)!important}
.exp-card{overflow:hidden!important;border-radius:16px 16px 0 0!important}
.exp-row{border-radius:10px!important}
.exp-block>.block-total.red{border-radius:0 0 16px 16px!important}
.list-page{gap:10px!important}
.list-page .page-header{height:28px!important;align-items:center!important}
.list-page .page-title{font-size:18px!important}
.list-page .action-bar{min-height:38px!important}
.list-page .dt-bar{margin-left:auto!important}
.list-page .expense-page-list,.list-page .tables{flex:1!important;min-height:0!important}
.list-page .expense-item-card,.list-page .expense-page-total,.list-page .tcard,.list-page .dt-bar{box-shadow:0 1px 2px rgba(0,0,0,.08)!important}
.tb-icon.quick-add{background:var(--primary-blue)!important;color:var(--text-on-color)!important;min-width:auto!important}
.quick-add-popup{width:min(420px,calc(100vw - 24px))!important}
.quick-add-grid{display:grid!important;grid-template-columns:1fr 1fr 1fr!important;gap:10px!important;padding:14px!important}
.quick-add-grid button{height:40px!important;border:0!important;border-radius:10px!important;background:var(--primary-blue)!important;color:var(--text-on-color)!important;box-shadow:0 1px 2px rgba(0,0,0,.08)!important;font-weight:700!important}
.quick-add-grid button.expense{background:var(--danger)!important}
.popup-x{width:32px!important;min-width:32px!important;height:32px!important;padding:0!important;border-radius:9px!important;box-shadow:0 1px 2px rgba(0,0,0,.08)!important;font-size:22px!important;line-height:1!important}
.popup-x:hover{background:#F3D7D4!important;color:var(--danger)!important}
.fld select{appearance:none!important;-webkit-appearance:none!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235F6670' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 11px center!important;padding-right:30px!important}
/* June 14 final correction: one 2D system, no clipped cards or stray colour lines */
:root{--shadow-card:0 1px 2px rgba(0,0,0,.08);--shadow-button:0 1px 2px rgba(0,0,0,.08)}
.popup,.mini-cal,.shift-card,.rs-card,.payment-summary-card,.exp-block,.block-total.solo,.tcard,.dt-bar,
.expense-item-card,.expense-page-total,.tx-card{box-shadow:0 1px 2px rgba(0,0,0,.08)!important}
.income-popup{background:var(--bg-app)!important}
.income-popup .popup-head,.income-popup .popup-foot{background:var(--bg-app)!important;border:0!important}
.income-popup .form-scroll{background:var(--bg-app)!important}
.income-popup .doc-choice-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;align-items:stretch!important}
.income-popup .doc-choice-card{min-height:82px!important;height:82px!important;padding:6px!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:center!important;gap:4px!important;background:var(--surface)!important;border:0!important;border-radius:14px!important;box-shadow:0 1px 2px rgba(0,0,0,.08)!important}
.income-popup .doc-choice-card>button,.income-popup .doc-choice-card>.invoice-number-input,.income-popup .doc-choice-spacer{flex:1!important;width:100%!important;height:auto!important;min-height:0!important;margin:0!important;border:0!important;border-radius:9px!important;background:transparent!important;box-shadow:none!important;text-align:center!important}
.income-popup .doc-choice-card>button.on{background:var(--primary-blue)!important;color:var(--text-on-color)!important}
.income-popup .doc-choice-card>.invoice-number-input:disabled{opacity:.65!important}
.income-popup .payment-method-card,.income-popup .payment-row>.inside-fld>input{background:var(--surface)!important;border-radius:14px!important;box-shadow:0 1px 2px rgba(0,0,0,.08)!important}
.card-select{position:relative!important;width:100%!important;min-width:0!important}
.card-select-trigger{width:100%!important;height:48px!important;padding:0 36px 0 14px!important;border:0!important;border-radius:14px!important;background:var(--surface)!important;color:var(--text-primary)!important;box-shadow:0 1px 2px rgba(0,0,0,.08)!important;text-align:left!important;font-size:inherit!important}
.payment-composite .card-select-trigger{height:36px!important;background:transparent!important;box-shadow:none!important}
.card-select-chevron{position:absolute!important;right:13px!important;font-size:16px!important;color:var(--text-secondary)!important}
.card-select-menu{position:absolute!important;z-index:30!important;top:calc(100% + 5px)!important;left:0!important;right:0!important;display:grid!important;gap:3px!important;padding:6px!important;border-radius:14px!important;background:var(--surface)!important;box-shadow:0 8px 20px rgba(31,35,41,.16)!important}
.card-select-menu button{min-height:34px!important;padding:6px 10px!important;border:0!important;border-radius:9px!important;background:transparent!important;color:var(--text-primary)!important;text-align:left!important;font-weight:600!important}
.card-select-menu button:hover,.card-select-menu button.selected{background:rgba(63,115,217,.12)!important;color:var(--primary-blue)!important}
.tx-tag.inv-status{top:0!important;right:0!important;min-width:36px!important;padding:4px 7px!important;border-radius:0 15px 0 9px!important;line-height:1!important}
.room-sum-2{align-items:stretch!important}
.rs-card,.rs-sub{background:var(--surface)!important}
.rs-fb,.rs-sold{height:100%!important;min-height:104px!important}
.rs-sub,.rs-sold{display:flex!important;align-items:center!important;justify-content:center!important;padding:8px 5px 27px!important}
.rs-sn,.rs-n{font-size:34px!important;font-weight:700!important;line-height:1!important}
.rs-sl,.rs-unit{bottom:14%!important}
.shift-row{align-items:stretch!important}
.shift-side{justify-content:flex-start!important;padding-top:3px!important}
.shift-side input{margin-top:7px!important;box-shadow:0 1px 2px rgba(0,0,0,.08)!important}
.payment-summary-title{color:var(--primary-blue)!important}
/* ── Add Transaction Row 4: Total Amount | Payment | Remaining Balance ───
Reuses .inside-fld (Total Amount), .pay-trigger (Payment, unchanged),
and a new read-only .remaining-balance-fld matching the same visual
family as .inside-fld/.pay-trigger so the three boxes read as one row.
Remaining Balance turns the approved yellow outstanding state
(var(--pending), matching .money-pair .due-fld elsewhere in this file)
whenever balance > 0 — never editable, never a text input. */
/* ── Add Transaction Row 2: Booking Channel | Guest Name | Room Number ───
Same 3-equal-column pattern as .charge-row (Row 4) — needed because the
base .income-form-grid is a fixed 2-column grid, which would otherwise
wrap a 3rd box (Room Number) onto its own row instead of sitting beside
Booking Channel and Guest Name. align-items:stretch keeps all three boxes
the same height regardless of validation-state height differences. */
.row2-3col{display:grid!important;grid-template-columns:1fr 1fr 1fr!important;gap:10px!important;align-items:stretch!important}
.row2-3col>.fld{height:100%!important;display:flex!important;flex-direction:column!important;justify-content:center!important}
.row2-3col .room-pick-btn{height:100%!important}
@media(max-width:950px){.row2-3col{grid-template-columns:1fr!important}}
.charge-row{display:grid!important;grid-template-columns:1fr 1fr 1fr!important;gap:10px!important;align-items:stretch!important}
.charge-amount-fld{height:48px!important}
.charge-amount-fld>input{height:48px!important;text-align:right!important;font-size:15px!important;font-weight:700!important}
.charge-amount-fld>input:disabled{opacity:.85!important;cursor:not-allowed!important}
.charge-row .pay-trigger{height:48px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;font-size:14px!important;font-weight:700!important}
.remaining-balance-fld{display:flex!important;flex-direction:column!important;justify-content:center!important;gap:2px!important;height:48px!important;padding:0 13px!important;border-radius:12px!important;background:var(--surface)!important;box-shadow:0 1px 2px rgba(0,0,0,.08)!important}
.remaining-balance-lbl{font-size:10px!important;font-weight:700!important;letter-spacing:.04em!important;text-transform:uppercase!important;color:var(--text-secondary)!important}
.remaining-balance-amt{font-size:15px!important;font-weight:700!important;color:var(--text-primary)!important;text-align:right!important}
.remaining-balance-fld.due{background:var(--pending)!important}
.remaining-balance-fld.due .remaining-balance-lbl{color:rgba(255,255,255,.85)!important}
.remaining-balance-fld.due .remaining-balance-amt{color:var(--text-on-color)!important}
.payment-error-banner{padding:10px 13px!important;border-radius:12px!important;background:var(--danger)!important;color:var(--text-on-color)!important;font-size:11px!important;font-weight:700!important;line-height:1.4!important}
@media(max-width:950px){.charge-row{grid-template-columns:1fr!important}}
.engine-error-banner{margin:8px 16px 0!important;padding:10px 14px!important;border-radius:12px!important;background:var(--danger)!important;color:var(--text-on-color)!important;font-size:12px!important;font-weight:700!important;box-shadow:0 1px 2px rgba(0,0,0,.08)!important}
/* ── Payment History card — compact, read-only, full width, below Notes.
Each row shows date/time/amount/method/recorded-by — no Remaining
Balance anywhere in this card. Clicking a row opens PaymentRecordView,
a separate read-only popup; nothing here is itself an input. */
.payment-history-card{border-radius:12px!important;background:var(--surface)!important;box-shadow:0 1px 2px rgba(0,0,0,.08)!important;padding:11px 13px!important;display:flex!important;flex-direction:column!important;gap:6px!important}
.payment-history-title{font-size:10px!important;font-weight:800!important;letter-spacing:.04em!important;text-transform:uppercase!important;color:var(--text-secondary)!important}
.payment-history-empty{font-size:11px!important;color:var(--text-secondary)!important;padding:6px 2px!important}
.payment-history-list{display:flex!important;flex-direction:column!important;gap:4px!important;max-height:160px!important;overflow-y:auto!important}
.payment-history-row{display:grid!important;grid-template-columns:1fr .8fr 1fr 1fr 1.2fr!important;align-items:center!important;gap:6px!important;width:100%!important;padding:7px 9px!important;border-radius:9px!important;background:var(--bg)!important;border:none!important;cursor:pointer!important;text-align:left!important;font-size:11px!important;color:var(--text-primary)!important}
.payment-history-row:hover{background:var(--surface-hover,rgba(0,0,0,.04))!important}
.payment-history-row .phr-amount{text-align:right!important;font-weight:700!important}
@media(max-width:950px){.payment-history-row{grid-template-columns:1fr 1fr!important;row-gap:2px!important}.payment-history-row .phr-user{grid-column:1/-1!important}}
/* ── Payment Record view — read-only popup opened from a history row.
Compact, simple key/value list, no editable inputs anywhere. */
.pay-record-view{width:min(var(--popup-w-sm),calc(100vw - 24px))!important}
.pay-record-body{padding:13px 16px!important;display:flex!important;flex-direction:column!important;gap:8px!important}
.pay-record-row{display:flex!important;justify-content:space-between!important;align-items:center!important;font-size:12px!important}
.pay-record-row .prv-lbl{color:var(--text-secondary)!important;font-weight:600!important}
.pay-record-row .prv-val{color:var(--text-primary)!important;font-weight:700!important}
.pay-record-amount .prv-val{font-size:15px!important;color:var(--primary-blue)!important}
.pay-record-allocations{margin-top:4px!important;padding-top:8px!important;border-top:1px solid var(--clay-edge)!important;display:flex!important;flex-direction:column!important;gap:6px!important}
.prv-alloc-title{font-size:9px!important;font-weight:800!important;letter-spacing:.04em!important;text-transform:uppercase!important;color:var(--text-secondary)!important}
.prv-alloc-line .prv-val{font-size:12px!important}
/* ── ซื้อบิล (Buy Bill) historical compatibility styles ──────────────────
The room-income form no longer exposes this mode. These isolated styles
remain so historical support is not deleted together with its control. */
.doc-choice-grid-3{grid-template-columns:1fr 1fr 1fr!important}
.buy-bill-row{grid-template-columns:1fr 1fr!important}
.buy-bill-fee-fld{background:var(--surface)!important}
.payment-summary-card{overflow:hidden!important}
.payment-summary-card .summary-card{display:grid!important;grid-template-columns:1fr 1fr!important;align-items:start!important}
.payment-summary-card .sum-sub{display:grid!important;grid-template-columns:1fr!important;gap:2px!important}
.payment-summary-card .sum-line{display:grid!important;grid-template-columns:56px 1fr!important;column-gap:6px!important;align-items:center!important}
.payment-summary-card .sum-line .k{text-align:left!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.payment-summary-card .sum-line .v{text-align:right!important;white-space:nowrap!important}
.payment-summary-card .block-total{width:100%!important;margin-left:0!important;margin-right:0!important;border-radius:12px!important}
.payment-summary-card .block-total.cashnavy{margin-bottom:0!important}
.dt-bar{border:0!important;background:var(--surface)!important}
.dt-bar::before,.dt-bar::after{display:none!important;content:none!important}
.dt-bar .dt-row{border:0!important;background:transparent!important}
.exp-block{background:transparent!important;border-radius:0!important;overflow:visible!important}
.exp-card{background:transparent!important;overflow:hidden!important;border-radius:16px!important}
.exp-list{max-height:180px!important}
.exp-empty{padding:14px 8px!important;text-align:center!important;color:var(--text-secondary)!important;font-size:11px!important}
.exp-block>.block-total.red{width:100%!important;margin:0!important;border-radius:0 0 16px 16px!important}
.list-page .expense-page-list{display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:8px!important;flex:1!important;padding:8px 0!important}
.list-page .expense-item-card{flex:none!important;min-height:58px!important;border-radius:14px!important;background:var(--surface)!important}
.list-page .expense-page-total{flex:none!important;min-height:52px!important;height:52px!important;margin-top:auto!important;border-radius:14px!important;background:var(--danger)!important}
.list-page .tables,.list-page .tcard{background:var(--surface)!important}
.tb-nav-item,.tb-icon,.act,.pbtn,.popup-x,.dt-step,.shift-today,.mini-cal-actions button{
box-shadow:0 1px 2px rgba(0,0,0,.08)!important
}
.popup-head,.popup-foot{border:0!important}
/* Sales popup & trigger */
.sp-popup{width:min(var(--popup-w-sm),calc(100vw - 24px))!important}
.sp-list{display:grid;gap:6px;padding:10px 14px 14px}
.sp-opt{width:100%;height:44px;border:0;border-radius:12px;background:var(--surface);color:var(--text-primary);box-shadow:0 1px 2px rgba(0,0,0,.08);font-weight:600;text-align:left;padding:0 14px;cursor:pointer}
.sp-opt.sp-opt-on{background:var(--primary-blue);color:var(--text-on-color)}
.ch-trigger{position:relative;width:100%;height:36px;border:0;border-radius:10px;background:var(--surface);color:var(--text-primary);box-shadow:0 1px 2px rgba(0,0,0,.08);text-align:left;padding:0 32px 0 10px;font-weight:600;cursor:pointer}
.ch-trigger .card-select-chevron{position:absolute;right:9px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--text-secondary)}
.ch-placeholder{color:var(--text-secondary)}
/* Payment popup & trigger */
.pp-popup{width:min(var(--popup-w-md),calc(100vw - 24px))!important}
.pp-body{display:grid;gap:10px;padding:12px 14px 14px}
.pp-method-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pp-method-btn{height:44px;border:0;border-radius:12px;background:#fff;color:var(--text-primary);box-shadow:inset 2px 2px 3px var(--bevel-light),inset -3px -3px 4px var(--bevel-dark),0 3px 6px rgba(31,35,41,.16)!important;font-weight:700;cursor:pointer}
.pp-method-btn.pp-method-on{background:var(--primary-blue);color:var(--text-on-color);box-shadow:inset 2px 2px 3px rgba(255,255,255,.3),inset -3px -3px 4px rgba(0,0,0,.25),0 3px 6px rgba(31,35,41,.22)!important}
.pp-method-btn:disabled{opacity:.4;cursor:not-allowed}
.pp-body .fld input{height:42px!important;border-radius:12px!important;padding:0 12px!important;background:#fff!important;box-shadow:inset 2px 2px 3px var(--bevel-light),inset -3px -3px 4px var(--bevel-dark),0 2px 4px rgba(31,35,41,.10)!important}
.pp-body .fld input:disabled{background:var(--surface)!important;box-shadow:none!important}
.pay-trigger-row{grid-column:1/-1!important}
.pay-trigger{width:100%;height:44px;border:0;border-radius:12px;background:var(--surface);color:var(--text-primary);box-shadow:0 1px 2px rgba(0,0,0,.08);font-weight:600;text-align:left;padding:0 14px;cursor:pointer}
.pay-trigger.field-invalid{outline:2px solid var(--danger)}
.pay-trigger.disabled{opacity:.4;cursor:not-allowed}
@media(max-width:480px){
.sp-popup,.pp-popup{width:calc(100vw - 16px)!important}
.pp-method-grid{grid-template-columns:1fr 1fr}
}
/* ── Issues 8 & 9: two-layer room card + free/broken night progress ────── */
/* Outer card: reduce padding to 4px on all sides so the status-colour
layer remains visible as a ring around the white inner layer.
aurora-app.css already overrides the original kit.css padding (7px 8px)
via the compact-form rule; this replaces it for dashboard room cards. */
.tx-grid .tx-card { padding: 4px !important; }
/* Inner white layer — every status including available */
.tx-card-inner {
box-sizing: border-box;
position: relative;
width: 100%;
height: 100%;
border-radius: 11px; /* smaller than outer 15px → ring visible */
background: #fff;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* available card: outer beige gradient/inset-shadow ring is visible
because the white inner layer has border-radius and sits 4px inset. */
.tx-card-inner--avail {
align-items: center;
justify-content: center;
}
/* ── Restore text colours inside white inner layer ──────────────────── */
/* The existing aurora-app rule (.tx-card.paid *, .tx-card.broken * etc.)
sets color:var(--text-on-color)!important on all descendants.
These targeted rules appear later in the file and win by source order
while being scoped to specific elements only — no broad * selectors. */
/* sold (paid/due/partial) inner */
.tx-card.paid .tx-card-inner .tx-room,
.tx-card.due .tx-card-inner .tx-room,
.tx-card.partial .tx-card-inner .tx-room { color: var(--text-primary) !important; }
.tx-card.paid .tx-card-inner .tx-guest,
.tx-card.due .tx-card-inner .tx-guest,
.tx-card.partial .tx-card-inner .tx-guest { color: var(--text-primary) !important; }
.tx-card.paid .tx-card-inner .tx-night { color: var(--text-secondary) !important; }
.tx-card.due .tx-card-inner .tx-night,
.tx-card.partial .tx-card-inner .tx-night { color: var(--text-secondary) !important; }
.tx-card.due .tx-card-inner .tx-due,
.tx-card.partial .tx-card-inner .tx-due { color: var(--pending) !important; }
/* INV tag keeps its own white text on coloured badge */
.tx-card.paid .tx-card-inner .tx-tag.inv-status,
.tx-card.due .tx-card-inner .tx-tag.inv-status,
.tx-card.partial .tx-card-inner .tx-tag.inv-status { color: var(--text-on-color) !important; }
/* Adjust INV tag corner radius to match inner border-radius (11px) */
.tx-card-inner .tx-tag.inv-status { border-radius: 0 11px 0 9px !important; }
/* broken inner colours */
.tx-card.broken .tx-card-inner .tx-room { color: var(--danger) !important; }
.tx-card.broken .tx-card-inner .tx-free-label { color: var(--danger) !important; }
.tx-card.broken .tx-card-inner .tx-free-detail { color: var(--text-secondary) !important; }
.tx-card.broken .tx-card-inner .tx-night { color: var(--danger) !important; }
/* free (comp) inner colours */
.tx-card.comp .tx-card-inner .tx-room { color: var(--paid) !important; }
.tx-card.comp .tx-card-inner .tx-free-label { color: var(--paid) !important; }
.tx-card.comp .tx-card-inner .tx-free-detail { color: var(--text-secondary) !important; }
.tx-card.comp .tx-card-inner .tx-night { color: var(--paid) !important; }
/* available room number: .tx-room.free-room already has color:var(--fg2)
in kit.css — that rule is not overridden by the * cascade so no
additional override is needed here. */
/* Fix: restore the available card's beige gradient. The base .tx-card
rule earlier in this file sets background:var(--surface)!important
for every card and explicitly re-declares background for
paid/comp/due/partial/broken, but omits avail — so kit.css's gradient
was being overridden even before this change (pre-existing gap,
exposed now that the white inner layer makes every ring visible).
Targeted single-property fix; no other rule touched. */
.tx-card.avail {
background: linear-gradient(158deg, #EDE4D0, #F1EADB) !important;
}
/* ── Card shadow: one heavy 2D hard shadow on the outer room card only ── */
/* New tokens — do not touch --shadow-card/--shadow-button, which other
elements (.popup, .mini-cal, .shift-card, etc.) still rely on. */
:root {
--shadow-hard: 4px 5px 0 #1F2329;
--shadow-hard-active: 1px 2px 0 #1F2329;
}
/* Outer .tx-card only. This rule is appended after the "June 14 final
correction" block above (which sets .tx-card to the flat
0 1px 2px shadow) and after the Issues 8/9 block, so it wins by
source order while keeping equal !important specificity.
.tx-card-inner is NOT touched here — it stays shadow-free as approved. */
.tx-grid .tx-card {
box-shadow: var(--shadow-hard) !important;
}
.tx-grid .tx-card:active {
box-shadow: var(--shadow-hard-active) !important;
transform: translate(3px, 4px) !important;
}
/* Matching outer shadow for the Transactions panel container (.tcard),
for Dashboard/Transactions consistency. Two-layer structure, padding,
radius, and colours are untouched — only the shadow property.
".list-page .tcard" must be included explicitly: an earlier rule with
that exact compound selector (line ~211) has higher specificity than
a plain ".tcard" and would otherwise keep winning regardless of
source order, since both declarations carry !important. */
.tcard,
.list-page .tcard {
box-shadow: var(--shadow-hard) !important;
}
/* ════════════════════════════════════════════════════════════════════
ROOM CARD — FINAL APPROVED DESIGN (single source of truth)
This block is the ONLY place that controls room-card size, spacing,
colours, typography, INV badge, bevel, rear shadow, and pressed
state. It replaces the previous "CONSOLIDATED ROOM-CARD RULES"
block, which referenced an old white-inner-frame structure that no
longer exists in the markup (see components.jsx RoomCard).
Scope: ONLY the dashboard room-card grid (.tx-grid / .tx-card and
its direct children). Right panel, calendar, nav, popups, and all
business logic are untouched by this block.
════════════════════════════════════════════════════════════════════ */
:root {
--shadow-3d: #A8ABAD;
--bevel-light: rgba(255,255,255,.55);
--bevel-dark: rgba(31,35,41,.28);
--pending-dark: #C26219; /* Waiting-INV badge — ~18% darker than --pending, same hue family */
}
/* Grid: seven columns on desktop, responsive below. */
.tx-grid {
display: grid !important;
grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
grid-auto-rows: auto !important;
gap: 16px !important;
padding: 4px !important;
align-content: start !important;
}
/* .dash-left is the actual overflow:hidden boundary (kit.css/aurora
base layout — required for the fixed-height no-scroll dashboard).
Reserve clearance here, not on .tx-grid, so the rear shadow's reach
(9px offset + 4px blur ≈ 13px, rounded up to 16px) on the grid's
last row and last column is never clipped by that boundary. */
.dash-left {
padding: var(--panel-pad) !important;
}
/* Card wrapper holds the card and its rear-shadow pseudo-element
together. It is the actual grid item — sized by .tx-grid's column
track (168px-equivalent at the approved desktop viewport) and a
fixed 90px height, so the shadow never shifts grid alignment and is
never clipped by the grid container. */
.tx-card-wrap {
position: relative !important;
width: 100% !important;
max-width: 186px !important;
height: 90px !important;
}
/* Rear soft 3D shadow — pseudo-element, not a flat box-shadow, so it
can fade smoothly and start its bottom lobe at 25% from the left. */
.tx-card-wrap::after {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border-radius: 14px;
background:
linear-gradient(to right, transparent 60%, var(--shadow-3d) 100%),
linear-gradient(to bottom, transparent 55%, var(--shadow-3d) 100%);
background-position: 0 0, 25% 0;
background-size: 100% 100%, 75% 100%;
background-repeat: no-repeat;
transform: translate(9px, 9px);
filter: blur(4px);
opacity: .85;
z-index: 0;
pointer-events: none;
transition: transform .1s, opacity .1s, filter .1s;
}
.tx-card-wrap:active::after {
transform: translate(4px, 4px);
opacity: .6;
filter: blur(2.5px);
}
/* Card itself: flat solid colour, no border/outline/ring/inner frame/
gradient. Raised glossy bevel via layered inset shadows only. */
.tx-grid .tx-card {
max-width: 186px !important;
position: relative !important;
z-index: 1 !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
padding: 10px !important;
border: 0 !important;
outline: none !important;
border-radius: 14px !important;
overflow: hidden !important;
color: var(--text-primary) !important;
box-shadow:
inset 2px 2px 3px var(--bevel-light),
inset -3px -3px 4px var(--bevel-dark) !important;
transition: transform .1s, box-shadow .1s !important;
}
.tx-card-wrap:active .tx-card {
transform: translate(4px, 4px) !important;
box-shadow:
inset 1px 1px 2px var(--bevel-light),
inset -2px -2px 3px var(--bevel-dark) !important;
}
/* Status colours — solid fill, no gradients. */
.tx-card.avail { background: #FFFFFF !important; color: var(--text-primary) !important; }
.tx-card.paid { background: var(--paid) !important; color: var(--text-on-color) !important; }
.tx-card.due,
.tx-card.partial { background: var(--pending) !important; color: var(--text-on-color) !important; }
.tx-card.broken { background: var(--danger) !important; color: var(--text-on-color) !important; }
.tx-card.comp { background: var(--paid) !important; color: var(--text-on-color) !important; }
/* Room number — top-left, large and bold (weight 800, IBM Plex Sans
Thai — see the .tx-room font-family override later in this file). */
.tx-card .tx-room {
position: absolute !important;
top: 8px !important;
left: 10px !important;
font-size: 20px !important;
font-weight: 800 !important;
line-height: 1 !important;
color: inherit !important;
}
.tx-card .tx-room.free-room {
position: static !important;
font-size: 22px !important;
font-weight: 800 !important;
color: inherit !important;
}
/* Guest name — centred, same vertical box used by Complimentary's
"ฟรี" label so both align on one row (see .tx-comp-center below).
Only the first token of the guest name reaches this element —
enforced in components.jsx via dashboardName(), not here. */
.tx-card .tx-guest {
position: absolute !important;
inset: 30px 10px 24px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
font-size: 14px !important;
font-weight: 700 !important;
color: inherit !important;
overflow: hidden !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
}
/* Maintenance keeps its taller two-line box (status + issue detail). */
.tx-card .tx-free-center {
position: absolute !important;
inset: 30px 10px 8px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
overflow: hidden !important;
}
.tx-card .tx-free-label {
font-size: 14px !important;
font-weight: 700 !important;
color: inherit !important;
}
.tx-card .tx-free-detail {
font-size: 10px !important;
font-weight: 600 !important;
margin-top: 2px !important;
color: inherit !important;
opacity: .82 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 100% !important;
}
/* Complimentary ("ฟรี") uses the exact same vertical box as .tx-guest
so it lands on the same text row as guest names — intentionally
separate from .tx-free-center, which Maintenance still uses for its
taller two-line layout. */
.tx-card .tx-comp-center {
position: absolute !important;
inset: 30px 10px 24px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
overflow: hidden !important;
}
/* Stay-chain progress (bottom-left) + outstanding amount (bottom-right). */
.tx-card .tx-foot {
position: absolute !important;
left: 10px !important;
right: 10px !important;
bottom: 8px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
.tx-card .tx-night {
font-size: 12px !important;
font-weight: 800 !important;
color: inherit !important;
}
.tx-card .tx-night.paid-night {
position: absolute !important;
left: 10px !important;
bottom: 8px !important;
}
.tx-card .tx-due {
font-size: 13px !important;
font-weight: 800 !important;
color: inherit !important;
}
/* INV badge — small corner chip only; never the whole card. Text is
always literally "INV", never the invoice number. Card background
continues to follow payment status (green/orange), independent of
this badge's own colour. */
.tx-card .tx-tag.inv-status {
position: absolute !important;
top: 6px !important;
right: 6px !important;
font-size: 8px !important;
font-weight: 800 !important;
letter-spacing: .03em !important;
padding: 3px 6px !important;
min-width: 0 !important;
border-radius: 6px !important;
text-align: center !important;
line-height: 1 !important;
color: var(--text-on-color) !important;
}
.tx-card .tx-tag.inv-number { background: var(--primary-blue) !important; }
.tx-card .tx-tag.waiting-inv { background: var(--pending-dark) !important; }
@media (max-width: 1200px) {
.tx-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}
@media (max-width: 950px) {
.tx-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
/* ════════════════════════════════════════════════════════════════════
TYPOGRAPHY — IBM Plex Sans Thai throughout, true weight 800
The shared rule earlier in this file
(".mono,.mono-c,.z,.tx-room,.mini-cal-grid button,.bt-amt,.sum-line .v
{font-family:var(--font-mono)!important}") forces room numbers and
the PIN clock/digits onto DM Mono (self-hosted, weight 400 only),
which is not IBM Plex Sans Thai and cannot render true 800 weight —
the browser was synthesizing a fake bold. These targeted overrides
win by appearing later in the file at equal !important specificity,
without touching the shared .mono/.z classes used by genuinely
numeric/tabular displays elsewhere (amounts, dates, counts), which
intentionally remain on DM Mono.
The that loads IBM Plex Sans Thai now also requests weight
800 (see index.html) so this is a real weight, not a synthesized one.
════════════════════════════════════════════════════════════════════ */
.tx-card .tx-room {
font-family: var(--font-sans) !important;
}
.pin-clock,
.pin6-box {
font-family: var(--font-sans) !important;
font-weight: 800 !important;
}
/* Room picker — align with Aurora surface + shadow tokens (matches
nav pills / action buttons). Grid = fixed 5 columns; a floor with
>5 rooms wraps room #6 onto the second row. */
.room-picker-popup {
width: 380px !important;
max-width: calc(100vw - 24px) !important;
}
.room-picker-popup .rp-sel-count {
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
/* Floor labels hidden — the room number's leading digit already
communicates the floor (102 → 1st, 201 → 2nd, …). Gap between
.rp-floor blocks still separates the groups visually. */
.room-picker-popup .rp-floor h4 {
display: none !important;
}
.room-picker-popup .rp-floor {
margin-bottom: 24px !important;
}
.room-picker-popup .rp-floor:last-child {
margin-bottom: 4px !important;
}
.rp-grid {
display: grid !important;
grid-template-columns: repeat(5, 54px) !important;
gap: 9px !important;
justify-content: start !important;
}
.rp-grid .rm {
font-family: var(--font-sans) !important;
background: var(--surface) !important;
background-image: none !important;
color: var(--text-primary) !important;
box-shadow: 5px 7px 12px rgba(118,112,104,.24), -3px -3px 8px rgba(255,255,255,.68) !important;
border-radius: 14px !important;
}
.rp-grid .rm:hover {
box-shadow: 7px 9px 15px rgba(118,112,104,.30), -4px -4px 10px rgba(255,255,255,.72) !important;
}
.rp-grid .rm.fix {
background: #E0DDD6 !important;
background-image: none !important;
color: #B8AE9E !important;
box-shadow: inset 2px 3px 6px rgba(118,112,104,.22), inset -1px -1px 3px rgba(255,255,255,.55) !important;
}
/* ════════════════════════════════════════════════════════════════════
ROOM CARD — REVISION 2: near-square 7-column grid, darker rear
shadow, divider line, stay-progress >1 night only, single amount.
Measured live against the real Dashboard at 1440×900 (.dash-left
usable space: 998×661px after the existing shadow-clearance
padding). This block wins by appearing last in source order at
equal !important specificity over the Revision 1 block above.
════════════════════════════════════════════════════════════════════ */
:root {
--shadow-3d-dark: #8E9398; /* ~25% darker than --shadow-3d (#A8ABAD), tested for the Available card's closer tonal gap to --bg-app */
--avail-bg: #E2E1DC;
}
/* 7 columns, 6 rows for 41 rooms; 18px gap keeps shadows visually
separated between cards as required.
grid-template-rows is explicitly reset to "none" here: an earlier
"Daily operation refinements" block (line 32) sets
grid-template-rows:repeat(7,minmax(0,1fr)) for the original
6-column/41-room layout, which silently forced 7 equal-height
explicit row tracks regardless of how many rows the content
actually needs. With 41 rooms in 7 columns that is 6 rows, not 7 —
the explicit 7th track was stealing real height from the other six
and squashing every card. Resetting to "none" lets grid-auto-rows
create exactly the 6 implicit rows the content needs, restoring the
real available height per row.
overflow:visible (Item 5 fix) explicitly overrides the same old
block's .tx-grid{overflow:hidden}, which was clipping the rear
shadow's soft blur into a flat rectangular edge on right-edge and
bottom-row cards instead of letting it fade naturally — the actual
cause of the reported "square block" shadow. justify-content
changed from the old block's "space-between" to "stretch" so columns
fill the row evenly instead of being pushed apart with gaps that
don't match the declared 18px gap value. */
.tx-grid {
grid-template-rows: none !important;
grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
grid-auto-rows: minmax(0, 1fr) !important;
gap: 22px !important;
padding: 12px !important;
overflow: visible !important;
justify-content: stretch !important;
}
/* Card wrapper sizing for the near-square 7-column grid: width comes
from the grid column track; height comes from the grid row track
(minmax(0,1fr) on .tx-grid above), not a hardcoded constant, so 6
rows of 41 rooms always fit the real available .dash-left height. */
.tx-card-wrap {
width: 100% !important;
height: 100% !important;
}
/* Rear shadow: same right/down direction, same 9px/4px offset+blur,
same 25%-from-left bottom lobe and soft fade — only the colour
changes to the darker tone so it stays visible against the now
closer-toned Available/background pair. */
.tx-card-wrap::after {
background:
linear-gradient(to right, transparent 60%, var(--shadow-3d-dark) 100%),
linear-gradient(to bottom, transparent 55%, var(--shadow-3d-dark) 100%) !important;
opacity: .92 !important;
}
@media (min-width: 951px) {
.tx-grid {
gap: 20px !important;
padding: var(--grid-content-top) !important;
}
.tx-card-wrap {
width: 92% !important;
height: 92% !important;
justify-self: center !important;
align-self: start !important;
}
.tx-card-wrap::after {
transform: translate(6px, 6px) !important;
filter: blur(5px) !important;
opacity: .48 !important;
}
}
/* Available card background swaps from white to the approved warm
tone, which sits closer to --bg-app — hence the darker shadow above. */
.tx-card.avail {
background: var(--avail-bg) !important;
color: var(--text-primary) !important;
}
/* Room number, guest/status text, progress+amount resized for the
smaller near-square card. Positions re-anchored to the new card
proportions; NOT scaled in direct proportion to card area, per
instruction — readability preserved by keeping room-number large
and the secondary text only modestly smaller than Revision 1. */
.tx-card .tx-room {
top: 12px !important;
left: 14px !important;
font-size: 19px !important;
font-weight: 900 !important;
}
.tx-card .tx-room.free-room {
position: absolute !important;
top: 12px !important;
left: 14px !important;
font-size: 19px !important;
font-weight: 900 !important;
}
.tx-card .tx-guest {
inset: 30px 8px 30px !important;
font-size: 14px !important;
font-weight: 700 !important;
}
.tx-card .tx-free-center {
inset: 30px 8px 10px !important;
}
.tx-card .tx-comp-center {
inset: 30px 8px 30px !important;
}
.tx-card .tx-free-label {
font-size: 14px !important;
}
.tx-card .tx-free-detail {
font-size: 10px !important;
}
/* Thin white divider between the guest/status row and the footer row.
Visual separator only — not a progress bar, carries no data.
Item 6 correction: target ~75% of inner card width (was ~87%, the
full width minus padding), centred horizontally (was flush left/
right), and ~9px clearance above the foot row (was ~2px, too close)
— measured against the foot row's own top edge, not a fixed bottom
offset, so the gap stays correct if foot content height changes. */
.tx-card .tx-divider {
position: absolute !important;
left: 50% !important;
width: 75% !important;
transform: translateX(-50%) !important;
bottom: 33px !important;
height: 1px !important;
background: rgba(255,255,255,.45) !important;
}
.tx-card.avail .tx-divider {
display: none !important; /* Available cards carry no divider */
}
.tx-card .tx-foot {
left: 8px !important;
right: 8px !important;
bottom: 9px !important;
}
.tx-card .tx-night {
font-size: 12px !important;
font-weight: 800 !important;
}
.tx-card .tx-due {
font-size: 13px !important;
font-weight: 800 !important;
}
.tx-card .tx-tag.inv-status {
top: 5px !important;
right: 5px !important;
font-size: 7px !important;
padding: 2px 5px !important;
}
@media (max-width: 1200px) {
.tx-grid { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
/* At this narrower 7-column width, longer outstanding amounts
(e.g. "2,250") can clip past the card edge at the Revision-2
font size. Shrink the amount slightly and tighten the foot
padding so it always fits — verified at 1024px with no overflow. */
.tx-card .tx-due { font-size: 11px !important; }
.tx-card .tx-night { font-size: 10px !important; }
.tx-card .tx-foot { left: 6px !important; right: 6px !important; gap: 2px !important; }
}
@media (max-width: 950px) {
.tx-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px !important; }
.tx-card .tx-room { font-size: 16px !important; }
.tx-card .tx-guest { font-size: 12px !important; }
}
/* ════════════════════════════════════════════════════════════════════
"ขายแล้ว" PIN-page summary card — two-layer structure.
Outer (.pre-summary-card.sold.two-layer) keeps the same outer
dimensions, padding, and radius as its sibling .pre-summary-card
items so the row of 5 still aligns. The coloured inner card
(.psc-inner) reuses the room-card bevel + rear-shadow language at a
smaller scale, matching the approved visual family rather than
duplicating a new shadow system.
════════════════════════════════════════════════════════════════════ */
.pre-summary-card.sold.two-layer {
position: relative !important;
background: var(--surface) !important;
padding: 8px !important;
}
.pre-summary-card.sold .psc-inner {
position: relative;
width: 100%;
height: 100%;
min-height: 60px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
border-radius: 10px;
background: var(--paid);
box-shadow:
inset 2px 2px 3px var(--bevel-light),
inset -3px -3px 4px var(--bevel-dark),
3px 4px 0 var(--shadow-3d-dark);
}
.pre-summary-card.sold .psc-inner .z {
color: var(--text-on-color) !important;
}
.pre-summary-card.sold .psc-inner small {
color: var(--text-on-color) !important;
opacity: .92;
}
/* ════════════════════════════════════════════════════════════════════
Dashboard "ขายแล้ว" card (.rs-card.rs-sold) — same two-layer family
as the PIN-page card above. The pre-existing .rs-sub,.rs-sold rule
(display:flex; padding:8px 5px 27px, sized for the old flat text
layout) is overridden here for .rs-sold.two-layer specifically so
the inner .psc-inner gets the full card area to work with. .rs-fb
(the ฟรี/เสีย split card) is untouched.
════════════════════════════════════════════════════════════════════ */
.rs-card.rs-sold.two-layer {
display: block !important;
padding: 8px !important;
}
.rs-card.rs-sold .psc-inner {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
border-radius: 10px;
background: var(--paid);
box-shadow:
inset 2px 2px 3px var(--bevel-light),
inset -3px -3px 4px var(--bevel-dark),
3px 4px 0 var(--shadow-3d-dark);
}
.rs-card.rs-sold .psc-inner .rs-n {
position: static !important;
color: var(--text-on-color) !important;
}
.rs-card.rs-sold .psc-inner .rs-unit {
position: static !important;
color: var(--text-on-color) !important;
opacity: .92;
}
/* ════════════════════════════════════════════════════════════════════
CHECKPOINT 5 — Right-panel summary cards: Total Received (ยอดรับ
ทั้งหมด), Cash (เงินสด), Total Expenses (รวมรายจ่าย), Send Total
(ส่งยอด). These four are visually standardized to one shared size —
target ~84px including padding, identical width, identical left/
right alignment, identical vertical text centring — per explicit
spec. Confirmed defect before this rule: ยอดรับทั้งหมด/เงินสด sit
inside .payment-summary-card, which overrides .fin-block's base
min-height (48px) down to 42px; รวมรายจ่าย/ส่งยอด sit in different
parent containers (.exp-block, .dash-right directly) and never
receive that override, staying at the base 48px — so all four
already differed from each other before this checkpoint, and none
were close to the ~84px target. ส่งยอด's class is `fin-block green
solo`, not `block-total solo` — a class-name mismatch with the
grid-column:1/-1 rule meant for "solo" full-width cards, which is
why it rendered far narrower (181px) than the other three; that is
fixed above by adding `.dash-right>.fin-block.solo` to that
existing selector (additive only — `.block-total.solo` itself is
untouched in case other code still depends on it).
This block does NOT touch .fin-block's calculation logic, JSX, or
any value displayed — fmt()/cashTotal/expTotal/sendTotal/totalRecv
in app.jsx are completely unmodified. It only sets size/alignment
on these four specific elements, scoped narrowly so no other
.fin-block usage elsewhere is affected. Wins by appearing last in
source order at equal !important specificity over both the base
.fin-block rule and the .payment-summary-card .fin-block override. */
.inv-block.payment-summary-card .fin-block.neutral,
.inv-block.payment-summary-card .fin-block.blue,
.exp-block .fin-block.red,
.dash-right > .fin-block.solo {
min-height: 48px !important;
height: 48px !important;
width: 100% !important;
padding: 0 16px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin-top: 6px !important;
}
/* .inv-block.payment-summary-card has its own 12px side padding
(line ~9, ".payment-summary-card{padding:12px}"), shared with sibling
elements in that same container (SummaryCards, the divider) — not
something this section is permitted to change. Pulling these two
.fin-block cards out by that same 12px on each side (negative
margin) makes their VISIBLE width match .exp-block's cards exactly
(374px both), without touching the container's padding or anything
else inside it. Verified live: all four cards now 374.0px wide. */
.inv-block.payment-summary-card .fin-block.neutral,
.inv-block.payment-summary-card .fin-block.blue {
width: calc(100% + 24px) !important;
margin-left: -12px !important;
margin-right: -12px !important;
}
.inv-block.payment-summary-card .fin-block.neutral .fin-lbl,
.inv-block.payment-summary-card .fin-block.blue .fin-lbl,
.exp-block .fin-block.red .fin-lbl,
.dash-right > .fin-block.solo .fin-lbl {
display: flex !important;
align-items: center !important;
height: 100% !important;
}
.inv-block.payment-summary-card .fin-block.neutral .fin-amt,
.inv-block.payment-summary-card .fin-block.blue .fin-amt,
.exp-block .fin-block.red .fin-amt,
.dash-right > .fin-block.solo .fin-amt {
display: flex !important;
align-items: center !important;
height: 100% !important;
}
/* ════════════════════════════════════════════════════════════════════
STANDARDIZED FINANCIAL/ACTION COMPONENTS — ยอดรับทั้งหมด, เงินสด,
รวมรายจ่าย, ส่งยอด. One shared class family (.fin-block) with colour
modifiers, replacing the previously inconsistent .block-total
variants (footer-strip vs pill vs card). Rounded rectangle, label
left, amount right, full width inside its parent, same bevel and
rear-shadow language as the rest of this revision.
════════════════════════════════════════════════════════════════════ */
.fin-block {
position: relative !important;
width: 100% !important;
min-height: 48px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 14px !important;
border-radius: 14px !important;
margin-top: 8px !important;
box-shadow:
inset 2px 2px 3px var(--bevel-light),
inset -3px -3px 4px var(--bevel-dark),
3px 4px 0 var(--shadow-3d-dark) !important;
transition: transform .1s, box-shadow .1s !important;
}
.fin-block:active {
transform: translate(1px, 2px) !important;
box-shadow:
inset 1px 1px 2px var(--bevel-light),
inset -2px -2px 3px var(--bevel-dark),
1px 2px 0 var(--shadow-3d-dark) !important;
}
.fin-block.neutral { background: var(--surface) !important; color: var(--text-primary) !important; }
.fin-block.blue { background: var(--primary-blue) !important; color: var(--text-on-color) !important; }
.fin-block.red { background: var(--danger) !important; color: var(--text-on-color) !important; }
.fin-block.green { background: var(--paid) !important; color: var(--text-on-color) !important; }
.fin-lbl {
font-size: 14px !important;
font-weight: 700 !important;
color: inherit !important;
}
.fin-amt {
font-size: 22px !important;
font-weight: 700 !important;
color: inherit !important;
margin-left: auto !important;
}
/* .payment-summary-card previously had a fixed-height overflow:hidden
boundary sized for the old, shorter .block-total rows. The new
.fin-block family is intentionally the same height everywhere per
the standardization requirement, so the boundary itself is relaxed
here (auto height, visible overflow) rather than shrinking these
two rows out of the shared family. */
/* Item 2 — right-panel vertical overflow. The Expenses section (.exp-block)
was being compressed to ~19px by the surrounding grid, hiding the
intended four expense rows. Fix is pure spacing reduction across the
sections above it — no font-size reduction, no new scroll container,
no business-logic change. Each value below is a small, individually
safe trim verified against the real .dash-right content. */
.payment-summary-card {
height: auto !important;
overflow: visible !important;
padding: 9px 12px !important;
}
.payment-summary-title {
margin: 0 2px 5px !important;
}
.payment-summary-card .fin-block {
margin-top: 6px !important;
min-height: 48px !important;
}
.payment-summary-card .fin-amt {
font-size: 22px !important;
}
.mini-cal {
padding: 8px !important;
}
.shift-card {
padding: 7px 10px !important;
}
/* Item 2 — guarantee the Expenses section a real minimum height instead
of letting the grid compress its row to whatever space is left over
(it was being squeezed to ~19-34px, hiding all four expense rows).
.dash-right already has overflow-y:auto (line 14, pre-existing) —
this is the documented fallback for exactly this case, engaged only
when content genuinely cannot fit a fixed layout at readable sizes.
The fixed-layout reductions above (title margin, card padding,
fin-block spacing, mini-cal/shift-card padding) are applied first;
this minmax is what lets the four rows actually become visible
instead of being invisibly clipped to a sliver. */
.dash-right > .exp-block {
grid-row: auto;
}
/* Same-day stay-chain outstanding payment button (Item 12). Uses the
existing --pending orange, matching the Outstanding room-card colour
so the action visually reads as "pay the orange/outstanding part". */
.pbtn.primary.orange {
background: var(--pending) !important;
color: var(--text-on-color) !important;
}
/* ════════════════════════════════════════════════════════════════════
INV / NO INV selector (Option A) — exactly two equal cards. Each card
owns the same lower invoice-number area; NO INV keeps that complete
area invisible and non-interactive so both cards always share the same
width, total height, and top/bottom alignment. ซื้อบิล remains a
supported historical data type but has no control in this form.
════════════════════════════════════════════════════════════════════ */
.income-popup .doc-choice-card {
display: grid !important;
grid-template-rows: 36px 62px !important;
gap: 8px !important;
align-content: start !important;
min-width: 0 !important;
min-height: 122px !important;
height: 122px !important;
padding: 8px !important;
border: 0 !important;
border-radius: 14px !important;
background: var(--surface) !important;
color: var(--text-primary) !important;
cursor: pointer !important;
transition: transform .1s, box-shadow .1s !important;
box-shadow:
inset 2px 2px 3px var(--bevel-light),
inset -3px -3px 4px var(--bevel-dark) !important;
}
.income-popup .doc-choice-card:hover {
box-shadow:
inset 2px 2px 3px var(--bevel-light),
inset -3px -3px 4px var(--bevel-dark),
0 0 0 2px rgba(63,115,217,.35) !important;
}
.income-popup .doc-choice-card:active {
transform: translateY(1px) !important;
}
.income-popup .doc-choice-card.on {
background: var(--primary-blue) !important;
color: var(--text-on-color) !important;
}
.income-popup .doc-choice-main {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-width: 0 !important;
height: 36px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 9px !important;
background: transparent !important;
color: inherit !important;
box-shadow: none !important;
}
.income-popup .doc-choice-label {
font-size: 15px !important;
font-weight: 800 !important;
text-align: center !important;
}
.income-popup .inv-number-field {
width: 100% !important;
min-width: 0 !important;
height: 62px !important;
margin: 0 !important;
padding: 4px 0 !important;
display: flex !important;
align-items: center !important;
}
.income-popup .inv-number-field>.invoice-number-input {
display: block !important;
width: 100% !important;
min-width: 0 !important;
height: 54px !important;
min-height: 54px !important;
margin: 0 !important;
padding: 0 14px !important;
border: 0 !important;
border-radius: 12px !important;
background: var(--surface) !important;
color: var(--text-primary) !important;
font-size: 20px !important;
text-align: center !important;
box-shadow:
inset 2px 2px 3px var(--bevel-light),
inset -3px -3px 4px var(--bevel-dark) !important;
}
.income-popup .inv-number-field-empty {
visibility: hidden !important;
pointer-events: none !important;
}
.income-popup .inv-number-field .invoice-number-input:focus {
outline: 2px solid var(--primary-blue) !important;
outline-offset: 1px !important;
}
/* Item 9 — Booking ID raised state. The shared .sales-field rule above
(line 124) strips shadow/background from every input in this field,
which made Booking ID look flat/sunken even when usable. Restore a
real raised bevel when enabled, and a clearly distinct (not merely
faded) disabled state when the channel doesn't require it. */
.sales-field input[aria-label="Booking ID"] {
height: 44px !important;
padding: 0 12px !important;
border-radius: 12px !important;
background: var(--surface) !important;
color: var(--text-primary) !important;
box-shadow:
inset 2px 2px 3px var(--bevel-light),
inset -3px -3px 4px var(--bevel-dark) !important;
}
.sales-field input[aria-label="Booking ID"]:disabled {
background: var(--bg-app) !important;
color: var(--text-secondary) !important;
box-shadow: none !important;
opacity: .7 !important;
}
/* Item 9 — Payment-method cards (Cash/QR/EDC/KEY-IN) raised state,
matching the bevel language used throughout the rest of this
revision instead of the older flat 0 1px 2px shadow. */
.pp-method-btn {
box-shadow:
inset 2px 2px 3px var(--bevel-light),
inset -3px -3px 4px var(--bevel-dark) !important;
}
.pp-method-btn.pp-method-on {
box-shadow:
inset 1px 1px 2px rgba(255,255,255,.35),
inset -2px -2px 3px rgba(31,35,41,.35) !important;
}
/* Item 7 — 08:00/20:00 time inputs raised, not recessed. kit.css's
.shift-side input rule sets background:var(--clay-recess) and
box-shadow:var(--clay-inset), both inward/sunken by definition — an
aurora-app rule already softened the box-shadow but never replaced
the recessed background, so the surface itself still read as
depressed. Dimensions, font size, and the "set" active-state
highlight (kit.css line 178) are left untouched; only the resting
surface treatment changes to the same light raised bevel used
elsewhere, plus a small rear shadow toward right/bottom. No border. */
.shift-side:not(.set) input {
background: var(--surface) !important;
box-shadow:
inset 1px 1px 2px var(--bevel-light),
inset -2px -2px 3px var(--bevel-dark),
2px 3px 0 var(--shadow-3d-dark) !important;
}
.shift-side.set input {
/* preserve the existing warm "set" highlight gradient from kit.css
line 178; only add the same restrained rear shadow so it stays
consistent with the unset state instead of looking flat by
comparison. background:none!important explicitly cancels the
pre-existing unconditional ".shift-side input{background:var(
--surface)!important}" rule (line 16) — that rule predates this
revision and applied to every .shift-side input regardless of
.set state, silently erasing the warm gradient kit.css already
defines for the active/set state. */
background: linear-gradient(158deg,#FBEFD6,#FFF6E6) !important;
box-shadow:
inset 0 2px 6px rgba(190,140,40,.26),
inset 0 -2px 4px rgba(255,255,255,.6),
2px 3px 0 var(--shadow-3d-dark) !important;
}
/* ════════════════════════════════════════════════════════════════════
DEDICATED PRINT REPORT
Hidden during normal operation. Print mode renders this document only;
the live dashboard is never repurposed as a printable layout.
════════════════════════════════════════════════════════════════════ */
.print-report{display:none!important}
@media print{
@page{size:A5 portrait;margin:7mm}
html,body{width:auto!important;height:auto!important;overflow:visible!important;background:#fff!important}
body{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
.mc-topbar,.engine-error-banner,.dash-body,.scrim,.list-page{display:none!important}
.shell,.main-content,.page.dash{display:block!important;width:100%!important;height:auto!important;min-height:0!important;overflow:visible!important;margin:0!important;padding:0!important;background:#fff!important}
.print-report{display:block!important;width:100%!important;margin:0!important;padding:0!important;color:#1F2329!important;font-family:var(--font-sans)!important;font-size:10px!important;line-height:1.35!important}
.print-report *{box-sizing:border-box!important}
.print-report-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:12px!important;padding:0 0 8px!important;border-bottom:2px solid #1F2329!important}
.print-report-head h1{margin:0!important;font-size:18px!important;line-height:1.2!important;font-weight:800!important;color:#1F2329!important}
.print-report-date{margin-top:3px!important;font-size:11px!important;font-weight:700!important}
.print-shift-times{display:grid!important;grid-template-columns:1fr!important;gap:3px!important;min-width:108px!important;text-align:right!important}
.print-shift-times span{display:flex!important;justify-content:space-between!important;gap:8px!important}
.print-room-summary{display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:5px!important;margin-top:8px!important}
.print-room-summary>div{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important;min-height:40px!important;padding:6px 4px!important;border:1px solid #C9CDD2!important;border-radius:8px!important;background:#F3F4F4!important}
.print-room-summary span{font-weight:700!important;font-size:9px!important}
.print-room-summary strong{font-family:var(--font-mono)!important;font-size:16px!important}
.print-payment-summary{margin-top:8px!important;padding:8px!important;border:1px solid #C9CDD2!important;border-radius:8px!important;break-inside:avoid!important}
.print-payment-summary h2{margin:0 0 6px!important;font-size:12px!important;font-weight:800!important}
.print-payment-columns{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important}
.print-payment-column h3{margin:0 0 3px!important;padding-bottom:3px!important;border-bottom:1px solid #D8DBDE!important;font-size:10px!important;font-weight:800!important}
.print-payment-column>div{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:2px 0!important}
.print-payment-column strong{font-family:var(--font-mono)!important;font-weight:700!important}
.print-total-line,.print-expense-total,.print-remittance{display:flex!important;align-items:center!important;justify-content:space-between!important;min-height:34px!important;margin-top:7px!important;padding:7px 10px!important;border-radius:8px!important;break-inside:avoid!important}
.print-total-line{border:1px solid #C9CDD2!important;background:#F3F4F4!important}
.print-expense-list{display:grid!important;gap:4px!important;margin-top:7px!important;padding:8px!important;border:1px solid #D8DBDE!important;border-radius:8px!important;break-inside:avoid!important}
.print-expense-list h2{margin:0 0 2px!important;font-size:12px!important;font-weight:800!important;color:#1F2329!important}
.print-expense-row{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding:4px 0!important;border-top:1px solid #ECEDEF!important;break-inside:avoid!important}
.print-expense-row:first-of-type{border-top:0!important}
.print-expense-row span{display:grid!important;gap:1px!important;min-width:0!important}
.print-expense-row strong{font-size:10px!important;font-weight:800!important;color:#1F2329!important}
.print-expense-row small{font-size:9px!important;font-weight:600!important;color:#60666D!important}
.print-expense-row b{font-family:var(--font-mono)!important;font-size:11px!important;font-weight:800!important;color:#A33832!important;white-space:nowrap!important}
.print-expense-empty span{font-weight:700!important;color:#60666D!important}
.print-expense-total{border:1px solid #D65A52!important;background:#fff!important;color:#A33832!important}
.print-remittance{border:1px solid #18B76A!important;background:#18B76A!important;color:#fff!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
.print-total-line span,.print-expense-total span,.print-remittance span{font-weight:800!important}
.print-total-line strong,.print-expense-total strong,.print-remittance strong{font-family:var(--font-mono)!important;font-size:14px!important;font-weight:800!important;color:inherit!important}
}
/* ── Payment Group badge (v32) ───────────────────────────────────────
Primary = muted dusty purple #8E7BA7 / light text
Member = warm beige-gray #B2ADA6 / dark text
─────────────────────────────────────────────────────────────────── */
.pg-badge {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 8px;
font-weight: 700;
letter-spacing: 0.05em;
padding: 1px 5px;
border-radius: 4px;
line-height: 1.3;
white-space: nowrap;
vertical-align: middle;
}
.pg-badge.pg-primary { background: #8E7BA7; color: #F2EEF8; }
.pg-badge.pg-member { background: #B2ADA6; color: #3A3733; }
.tx-card .pg-badge {
position: absolute !important;
top: 29px !important;
left: 9px !important;
font-size: 7px !important;
padding: 1px 4px !important;
border-radius: 3px !important;
z-index: 2 !important;
}
.tx-card.paid .pg-badge.pg-primary,
.tx-card.due .pg-badge.pg-primary,
.tx-card.partial .pg-badge.pg-primary { background: #7A6996 !important; color: #F0ECF8 !important; }
.tx-card.paid .pg-badge.pg-member,
.tx-card.due .pg-badge.pg-member,
.tx-card.partial .pg-badge.pg-member { background: #9E9991 !important; color: #fff !important; }
.pg-group-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 2px; }
.pg-group-label { font-size: 11px; font-weight: 700; color: var(--text-secondary); flex: none; min-width: 90px; }
.pg-group-options { display: flex; gap: 6px; flex-wrap: wrap; }
.pg-opt { font-size: 11px; font-weight: 600; padding: 5px 11px; border-radius: 8px; border: none; background: var(--surface); box-shadow: var(--shadow-button); color: var(--text-secondary); cursor: pointer; }
.pg-opt.on { background: #8E7BA7; color: #fff; }
.pg-join-select { display: flex; flex-direction: column; gap: 5px; width: 100%; margin-top: 4px; }
.pg-group-choice { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; border: none; background: var(--surface); box-shadow: var(--shadow-button); cursor: pointer; font-size: 11px; color: var(--text-primary); text-align: left; }
.pg-group-choice.on { box-shadow: 0 0 0 2px #8E7BA7, var(--shadow-button); }
.pg-preview { display: flex; align-items: center; gap: 6px; width: 100%; font-size: 10px; color: var(--text-secondary); margin-top: 2px; }
.pg-primary-note { font-size: 9px; font-weight: 600; color: #8E7BA7; }
.pg-group-role { font-size: 11px; color: var(--text-secondary); margin-left: 4px; }
/* P2: group-total confirmation row */
.pg-confirm-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; width: 100%; margin-top: 4px; padding: 8px 10px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-button); }
.pg-confirm-text { flex: 1; min-width: 0; font-size: 11px; color: var(--text-primary); line-height: 1.5; margin: 0; }
/* ── Form visual balance (v35) ───────────────────────────────────────
Three targeted fixes. Logic, validation, and data paths are untouched.
1. NO INV card lower area: was visibility:hidden (completely blank),
making NO INV look unfinished vs INV which shows an input there.
Now shows a muted placeholder text so both cards share the same
visual weight and height, without adding any data/logic.
2. Number-input spinner arrows: the browser-native up/down arrows on
the charge-amount input break visual rhythm. Hidden via -webkit/moz
vendor properties scoped to .charge-amount-fld only.
3. Charge amount field: currently a plain full-height input with no
context label. The remaining-balance-fld next to it already uses a
two-tier layout (8 px label row + 15 px value row). Adding the same
structure to charge-amount-fld (via container flex + ::before label
+ transparent inner input) makes all three columns in the row share
the same visual hierarchy.
─────────────────────────────────────────────────────────────────── */
/* 1 ── NO INV lower area: visible muted placeholder */
.income-popup .inv-number-field-empty {
visibility: visible !important;
}
.income-popup .inv-number-field-empty .inv-number-empty {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
border-radius: 12px !important;
box-shadow:
inset 2px 2px 3px var(--bevel-light),
inset -3px -3px 4px var(--bevel-dark) !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: .04em !important;
color: var(--text-secondary) !important;
opacity: 0.65 !important;
}
.income-popup .inv-number-field-empty .inv-number-empty::after {
content: 'ไม่มีเลขที่ Invoice' !important;
}
/* When NO INV is selected (.on) keep placeholder tinted for contrast */
.income-popup .doc-choice-card.on .inv-number-field-empty .inv-number-empty {
color: rgba(255,255,255,.6) !important;
box-shadow:
inset 2px 2px 3px rgba(0,0,0,.18),
inset -3px -3px 4px rgba(255,255,255,.06) !important;
}
/* 2 ── Remove number-input spinner arrows from charge amount only */
.charge-amount-fld input[type="number"]::-webkit-inner-spin-button,
.charge-amount-fld input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none !important;
margin: 0 !important;
}
.charge-amount-fld input[type="number"] {
-moz-appearance: textfield !important;
}
/* 3 ── Charge amount field: two-tier label + value (matches remaining-balance-fld) */
.charge-amount-fld {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
gap: 1px !important;
padding: 0 13px !important;
background: var(--surface) !important;
box-shadow: 0 1px 2px rgba(0,0,0,.08) !important;
border-radius: 12px !important;
}
.charge-amount-fld::before {
content: 'ค่าห้อง' !important;
display: block !important;
font-size: 8px !important;
font-weight: 700 !important;
letter-spacing: .04em !important;
text-transform: uppercase !important;
color: var(--text-secondary) !important;
flex: none !important;
}
/* Inner input becomes transparent so the container provides the surface */
.charge-amount-fld > input {
height: auto !important;
min-height: 0 !important;
flex: none !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
line-height: 1.2 !important;
}
/* Disabled state: container carries the opacity, not just the input */
.charge-amount-fld > input:disabled {
opacity: 1 !important;
}
.charge-amount-fld:has(> input:disabled) {
opacity: 0.68 !important;
cursor: not-allowed !important;
}
/* ── Payment Modal visual polish (v36) ──────────────────────────────
Three targeted fixes. Payment logic, validation, and data paths
are untouched. Scoped to .pp-method-btn and .pp-body only.
1. Method-button shadow: reduce inset bevel spread so Cash/QR/EDC/
KEY-IN cards feel lighter. The existing bevel-light/dark variables
still give a raised surface, but at half the previous depth.
2. Selected state: drop the pressed inset shadows entirely. The blue
background already carries the selection signal; a clean 2.5 px
ring adds crisp definition without heavy depth.
3. Disabled inputs (ยอดรับ / เวลา QR): the global .fld input:disabled
rule sets opacity:.4 which makes both fields almost invisible.
Override to .62 — inactive-looking but still readable.
─────────────────────────────────────────────────────────────────── */
/* 1 ── Softer resting shadow */
.pp-method-btn {
box-shadow:
inset 1px 1px 2px var(--bevel-light),
inset -1px -1px 2px var(--bevel-dark) !important;
}
/* 2 ── Selected: border ring, no pressed inset */
.pp-method-btn.pp-method-on {
box-shadow: 0 0 0 2.5px var(--primary-blue) !important;
}
/* 3 ── Disabled inputs: readable, not washed-out */
.pp-body .fld input:disabled {
opacity: 0.62 !important;
}
/* ── Login UI visual polish (v37) ────────────────────────────────────
Four targeted fixes. Auth logic, PIN validation, data, and all
other UI areas are untouched.
1. PIN dot-boxes: the current --shadow-button (0 1px 2px) is almost
invisible on the warm background. Add a neumorphic inset bevel so
each box reads as a distinct raised dot — same bevel family as the
Payment Modal method buttons at reduced scale.
2. Summary boxes (all 5): same issue — --shadow-card gives no real
depth. Add the same inset bevel + a small rear shadow so the row
of cards visually floats above the page.
3. Numbers inside summary boxes: font-weight 600 reads weakly at
21 px on a warm surface. Lift to 800 and keep size; the label
small stays as-is.
4. ฟรี (available) + เสีย (broken) are secondary status types.
Reduce their number font-size (21 px → 16 px) and label font-size
(9 px → 8 px) so they sit visually behind the primary count cards
without changing layout, colour, or order.
─────────────────────────────────────────────────────────────────── */
/* 1 ── PIN dot-boxes: clearer raised depth */
.pin6-box {
box-shadow:
inset 1px 1px 2px var(--bevel-light),
inset -1px -1px 2px var(--bevel-dark),
0 2px 4px rgba(31,35,41,.12) !important;
}
/* 2 ── Summary cards: same raised surface as PIN boxes */
.prelogin-summary > div.pre-summary-card {
box-shadow:
inset 1px 1px 2px var(--bevel-light),
inset -2px -2px 3px var(--bevel-dark),
0 3px 6px rgba(31,35,41,.12) !important;
}
/* 3 ── Summary numbers: heavier weight for readability */
.pre-summary-card .z {
font-weight: 800 !important;
}
/* 4 ── ฟรี (available) + เสีย (broken): secondary scale */
.pre-summary-card.available .z,
.pre-summary-card.broken .z {
font-size: 16px !important;
font-weight: 700 !important;
}
.pre-summary-card.available small,
.pre-summary-card.broken small {
font-size: 8px !important;
}
/* ── Print Preview final pass (v38) ─────────────────────────────────
Three CSS-only fixes inside @media print. Logic, amounts, Payment
Group handling, and all live-UI rules are untouched.
1. Expense total: the red border/background was already defined but
lacked -webkit-print-color-adjust so most browsers silently
stripped the colour in print. Add the flag so the red pill
reliably prints in colour.
2. Payment column numbers: .print-payment-column strong inherits the
10 px base size, which is tight on paper. Bump to 11 px and
increase weight to 800 for consistent readability with the totals
row below.
3. Cash line accent: .print-cash-line shares the same neutral grey
style as the ยอดรับทั้งหมด row above it. A left-side blue accent
bar separates the two rows visually without adding new data.
─────────────────────────────────────────────────────────────────── */
@media print {
/* 1 ── Force expense colour to print */
.print-expense-total {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
/* 2 ── Payment column numbers: slightly larger + heavier */
.print-payment-column strong {
font-size: 11px !important;
font-weight: 800 !important;
}
/* 3 ── Cash line: left accent to distinguish from total line above */
.print-cash-line {
border-left: 3px solid #3F73D9 !important;
}
}
/* ── Add/Edit form layout fix (v39) ─────────────────────────────────
Six targeted CSS-only fixes. Logic, validation, Payment Group, and
all saved-data paths are untouched.
1. Row 2 — sales-field / Booking ID: The disabled booking-ID input
(non-OTA) occupies ~48 px even though it carries no data, making
the channel column ~84 px taller than the 48 px guest/room fields.
Collapsing it to zero-height + making the ch-trigger fill the
remaining cell height balances all three columns.
For OTA bookings the enabled input reappears at 32 px.
2. Charge row — pay-trigger: charge-amount and remaining-balance
columns already show a small label row above a value row. Adding
::before to .pay-trigger gives it the same two-tier structure
so all three columns read as one consistent visual family.
3. PG group row: .pg-group-row floats with no visual anchor to the
rows above it. A subtle top border + breathing room separates the
group section from the notes field cleanly.
4. Popup footer: .popup-foot is sticky-bottom with no top border —
it looks like a floating stripe. A thin border anchors it to the
form body.
5. NO INV placeholder: v35 opacity:0.4 is too faint on some surfaces.
Raised to 0.55 so the hint is legible while still looking light.
6. Date fields: the native calendar-picker indicator on type="date"
inputs is visually heavier than other field icons. Reducing to
50 % opacity makes C/I and C/O read more consistently.
─────────────────────────────────────────────────────────────────── */
/* 1 ── Row 2: collapse disabled booking-ID; ch-trigger fills cell */
.income-form-grid .row2-3col .sales-field {
display: flex !important;
flex-direction: column !important;
}
.income-form-grid .row2-3col .sales-field .ch-trigger {
flex: 1 !important;
height: auto !important;
min-height: 36px !important;
border-radius: 10px !important;
}
.income-form-grid .row2-3col .sales-field input:disabled {
height: 0 !important;
min-height: 0 !important;
padding: 0 !important;
border: 0 !important;
margin: 0 !important;
opacity: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
.income-form-grid .row2-3col .sales-field input:not(:disabled) {
height: 32px !important;
padding: 0 10px !important;
border-radius: 8px !important;
flex: none !important;
}
/* 2 ── Charge row: pay-trigger two-tier label + value */
.charge-row .pay-trigger {
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
gap: 2px !important;
font-size: 13px !important;
}
.charge-row .pay-trigger::before {
content: 'ชำระเงิน' !important;
display: block !important;
font-size: 8px !important;
font-weight: 700 !important;
letter-spacing: .04em !important;
text-transform: uppercase !important;
color: var(--text-secondary) !important;
flex: none !important;
line-height: 1 !important;
}
/* 3 ── PG group row: top separator anchors section to form */
.income-popup .pg-group-row {
border-top: 1px solid rgba(0,0,0,.06) !important;
margin-top: 2px !important;
padding-top: 10px !important;
}
/* 4 ── Popup footer: top border anchors buttons to form body */
.income-popup .popup-foot {
border-top: 1px solid rgba(0,0,0,.07) !important;
}
/* 5 ── NO INV placeholder: slightly more visible */
.income-popup .inv-number-field-empty .inv-number-empty {
opacity: 0.55 !important;
}
/* 6 ── Date fields: softer calendar-picker icon */
.income-form-grid .inside-fld input[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0.5 !important;
cursor: pointer !important;
}
/* ── Form + Payment popup visual fix (v40) ──────────────────────────
Six targeted fixes from manual screenshot review.
Logic, validation, Payment Group, and data paths untouched.
1+2. INV/NO INV cards: reduce card height from 122 px to 92 px.
Card was oversized (36 px label + 8 px gap + 62 px invoice
box + 16 px padding = 122 px). Compressed to 32+6+42+12 = 92 px.
NO INV placeholder opacity raised from 0.55 to 0.65 for legibility.
3. Charge amount — transparent input fix: .income-popup .inside-fld>input
carries background:var(--surface) at specificity 0,3,0 which was
higher than the v35 .charge-amount-fld>input rule (0,1,0), so the
white input box was visible behind the container. Matched specificity
with .income-popup prefix so the inner input is now truly transparent.
Placeholder changed from 'ยอดเงินรวม' to '0' in JSX (1 line) to
eliminate the double-label when the field is empty.
4. Typography: pay-trigger text size raised from 13 px to 15 px to
match charge-amount (15/700) and remaining-balance (15/700).
5. Payment popup disabled fields: the global .fld input:disabled rule
sets box-shadow:none which removed the raised surface from ยอดรับ
and เวลา QR even at 62 % opacity. Restoring a soft inset bevel
makes them read as inactive-but-present fields, not blank areas.
6. Date calendar-picker indicator: v39 reduced opacity to 0.5
(too faint). Raised to 0.75 and enlarged to 20×20 px so the icon
is clearly actionable. Native browser calendar popup is unchanged —
custom calendar not needed.
─────────────────────────────────────────────────────────────────── */
/* 1+2 ── INV/NO INV: reduce card height and update inner heights */
.income-popup .doc-choice-card {
grid-template-rows: 32px 42px !important;
min-height: 92px !important;
height: 92px !important;
padding: 6px !important;
gap: 6px !important;
}
.income-popup .doc-choice-main {
height: 32px !important;
}
.income-popup .inv-number-field {
height: 42px !important;
}
.income-popup .inv-number-field-empty {
height: 42px !important;
}
/* NO INV placeholder: slightly more visible */
.income-popup .inv-number-field-empty .inv-number-empty {
opacity: 0.65 !important;
}
/* 3 ── Charge amount: fix inner-input transparency (higher specificity) */
.income-popup .charge-amount-fld > input {
background: transparent !important;
box-shadow: none !important;
}
/* 4 ── Typography: pay-trigger to 15 px, matching the other two columns */
.charge-row .pay-trigger {
font-size: 15px !important;
}
/* 5 ── Payment popup: disabled inputs keep their raised surface */
.pp-body .fld input:disabled {
box-shadow:
inset 1px 1px 2px var(--bevel-light),
inset -1px -1px 2px var(--bevel-dark) !important;
}
/* 6 ── Date fields: clear, actionable calendar-picker icon */
.income-form-grid .inside-fld input[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0.75 !important;
width: 20px !important;
height: 20px !important;
cursor: pointer !important;
}
/* ── Form alignment fix (v41) ────────────────────────────────────────
Three targeted fixes. All logic, validation, Payment Group, and
data paths are untouched.
1. INV/NO INV inner boxes: enforce identical display, sizing, and
box model on both .inv-number-field (INV input) and the empty
placeholder (NO INV) so they always render at the same width
and height. Inset both 4 px from the card edge so they read
as "slightly narrower than the card".
2. Row 2 equal heights: pin all three cells (channel, guest, room)
to an explicit 48 px so they align regardless of flex resolution
differences across browsers. Input and button inside each cell
are forced to fill 100 % of that height.
3. Date row equal heights: type="date" inputs have browser-native
intrinsic sizing that can differ between disabled (C/I) and
active (C/O). Pinning both to 48 px and resetting any
browser-injected padding ensures equal visual height.
─────────────────────────────────────────────────────────────────── */
/* 1 ── INV/NO INV inner boxes: identical size, slightly inset */
.income-popup .inv-number-field,
.income-popup .inv-number-field-empty {
display: flex !important;
align-items: stretch !important;
width: calc(100% - 8px) !important;
height: 42px !important;
min-height: 42px !important;
margin: 0 4px !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* Inner INV input: fills the field box */
.income-popup .inv-number-field > .invoice-number-input {
width: 100% !important;
height: 100% !important;
box-sizing: border-box !important;
}
/* NO INV placeholder span: fills the field box */
.income-popup .inv-number-field-empty > .inv-number-empty {
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
/* 2 ── Row 2: pin all three cells to 48 px */
.income-form-grid .row2-3col > .fld {
height: 48px !important;
min-height: 48px !important;
max-height: 48px !important;
}
/* Guest input: fill the inside-fld cell */
.income-form-grid .row2-3col .inside-fld > input {
height: 100% !important;
min-height: 0 !important;
}
/* Room pick button: fill the inside-fld cell */
.income-form-grid .row2-3col .inside-fld > .room-pick-btn {
height: 100% !important;
min-height: 0 !important;
}
/* Sales-field flex container: fill its pinned cell */
.income-form-grid .row2-3col > .sales-field {
height: 100% !important;
}
/* 3 ── Date row: pin both date inputs to 48 px */
.income-form-grid .inside-fld > input[type="date"] {
height: 48px !important;
min-height: 48px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
box-sizing: border-box !important;
}
/* ── Row 2/3 layout + INV inner box fix (v42) ───────────────────────
JSX restructure + CSS alignment.
Row 2 is now: channel | Booking ID | room
Row 3 is now: guest | C/I | C/O
1. .ch-field: the channel button's new wrapper in row 2.
No background of its own — ch-trigger provides the surface.
flex-stretch so the trigger fills the 48 px cell height.
2. Booking ID (inside-fld): always visible, disabled when not OTA.
The existing .inside-fld input:disabled rule gives it 68 % opacity
with box-shadow — it looks inactive-but-present, not floating text.
3. INV/NO INV inner boxes: v41 used margin:0 4px + width:calc(100%-8px)
at specificity 0,2,0. Adding .doc-choice-grid raises specificity to
0,3,0, overriding all earlier conflicting rules.
Switched to padding:0 4px + box-sizing:border-box (no margin maths)
so both boxes are inset from the card edges identically.
─────────────────────────────────────────────────────────────────── */
/* 1 ── Channel field wrapper: fills the row-2 48px cell */
.income-form-grid .row2-3col .ch-field {
display: flex !important;
align-items: stretch !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.income-form-grid .row2-3col .ch-field .ch-trigger {
flex: 1 !important;
height: 100% !important;
min-height: 0 !important;
width: 100% !important;
}
/* 2 ── Booking ID (now in own inside-fld): fill cell height */
.income-form-grid .row2-3col .inside-fld > input[aria-label="Booking ID"] {
height: 100% !important;
min-height: 0 !important;
}
/* 3 ── INV/NO INV inner boxes: specificity 0,3,0 (was 0,2,0 in v41)
Padding approach avoids margin/calc interaction in grid tracks. */
.income-popup .doc-choice-grid .inv-number-field,
.income-popup .doc-choice-grid .inv-number-field-empty {
width: 100% !important;
height: 42px !important;
min-height: 42px !important;
padding: 0 4px !important;
margin: 0 !important;
box-sizing: border-box !important;
display: flex !important;
align-items: stretch !important;
}
/* INV input: fills padded container */
.income-popup .doc-choice-grid .inv-number-field > .invoice-number-input {
width: 100% !important;
height: 100% !important;
box-sizing: border-box !important;
padding: 0 10px !important;
}
/* NO INV placeholder span: fills padded container */
.income-popup .doc-choice-grid .inv-number-field-empty > .inv-number-empty {
width: 100% !important;
height: 100% !important;
box-sizing: border-box !important;
}
/* ── NO INV placeholder: root cause fix (v43) ───────────────────────
All previous attempts set correct width/height/shadow but missed the
background. CSS inset box-shadows are invisible on transparent elements
(the browser default for ). The INV has
background:var(--surface) set at line 1255 which makes its inset bevel
visible; the NO INV had no background → shadow invisible →
span rendered as floating text, not a field box.
This single property makes the NO INV placeholder visually identical
to the INV input: a raised surface box at reduced opacity.
Specificity 0,4,0 — beats all earlier rules for this element.
─────────────────────────────────────────────────────────────────── */
.income-popup .doc-choice-grid .inv-number-field-empty > .inv-number-empty {
background: var(--surface) !important;
}
/* ── INV/NO INV inner box equality — final fix (v44) ────────────────
Root cause: span.inv-number-empty has display:flex (nested flex
container) and flex-shrink:1 (default). As a flex ITEM inside the
wrapper's row-flex context, it can shrink freely because no prior
rule set flex:none or flex-shrink:0. The INPUT is a replaced element
and does not have this shrinkage behaviour, so it always held its
width. The fix:
1. Reset both wrappers to centering-mode flex (align/justify center,
no padding) so inner boxes float centered with breathing room.
2. Give BOTH inner elements width:calc(100% - 8px), height:34px,
and flex:none → they cannot grow or shrink; they stay at that
explicit size regardless of content or flex constraints.
3. Restore visual properties (background, radius, shadow, opacity)
on the span at the same high specificity.
All selectors are 0,3,0 or 0,4,0 — override every earlier rule.
─────────────────────────────────────────────────────────────────── */
/* Wrappers: centering mode, no padding */
.income-popup .doc-choice-grid .inv-number-field {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
height: 42px !important;
}
.income-popup .doc-choice-grid .inv-number-field-empty {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
height: 42px !important;
}
/* INV input: shared inner-box size, cannot grow or shrink */
.income-popup .doc-choice-grid .inv-number-field > .invoice-number-input {
flex: none !important;
width: calc(100% - 8px) !important;
height: 34px !important;
box-sizing: border-box !important;
border-radius: 12px !important;
}
/* NO INV span: identical size + flex:none prevents shrinkage */
.income-popup .doc-choice-grid .inv-number-field-empty > .inv-number-empty {
flex: none !important;
width: calc(100% - 8px) !important;
height: 34px !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 12px !important;
background: var(--surface) !important;
box-shadow:
inset 2px 2px 3px var(--bevel-light),
inset -2px -2px 3px var(--bevel-dark) !important;
opacity: 0.65 !important;
}
/* ── Phase 1: multi-room RoomPicker (v45) ───────────────────────────
Selected room state, Primary badge, confirm bar, and hint line.
Only active when multiSelect=true (new Payment Group creation).
Single-room picker is visually unchanged.
─────────────────────────────────────────────────────────────────── */
/* Selected room in multi-select mode */
.rp-grid .rm.rp-sel {
background: var(--primary-blue) !important;
color: #fff !important;
box-shadow: 0 0 0 2px rgba(63,115,217,.35) !important;
}
/* Primary candidate: first selected room gets a subtle outer ring */
.rp-grid .rm.rp-primary {
outline: 2px solid var(--primary-blue) !important;
outline-offset: 1px !important;
}
/* "P" badge overlaid on primary room */
.rp-p-badge {
position: absolute !important;
top: 2px !important;
right: 3px !important;
font-size: 7px !important;
font-weight: 800 !important;
line-height: 1 !important;
background: rgba(255,255,255,.35) !important;
border-radius: 3px !important;
padding: 1px 3px !important;
pointer-events: none !important;
}
/* Hint bar at top of multi-select picker */
.rp-ms-hint {
padding: 6px 16px !important;
font-size: 10px !important;
color: var(--text-secondary) !important;
background: rgba(63,115,217,.06) !important;
border-bottom: 1px solid rgba(63,115,217,.1) !important;
}
/* Confirm bar at bottom of multi-select picker */
.rp-confirm-bar {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
padding: 10px 16px !important;
border-top: 1px solid rgba(0,0,0,.06) !important;
}
.rp-sel-count {
font-size: 11px !important;
color: var(--text-secondary) !important;
flex: 1 !important;
min-width: 0 !important;
}
/* ── Payment Record correction UI (v46) ─────────────────────────────
Edit inputs and select inside PaymentRecordView.
Scoped to .pay-record-view only — no other UI affected.
─────────────────────────────────────────────────────────────────── */
.pay-record-view .prv-edit-input,
.pay-record-view .prv-edit-select {
height: 32px !important;
padding: 0 8px !important;
border-radius: 8px !important;
border: 0 !important;
background: var(--surface) !important;
box-shadow: inset 1px 1px 2px var(--bevel-light), inset -1px -1px 2px var(--bevel-dark) !important;
font-size: 13px !important;
font-family: var(--font-mono) !important;
color: var(--text-primary) !important;
min-width: 90px !important;
max-width: 140px !important;
}
.pay-record-view .prv-edit-select {
font-family: var(--font-sans) !important;
cursor: pointer !important;
}
.pay-record-view .prv-note {
font-size: 10px !important;
color: var(--text-secondary) !important;
padding: 4px 0 2px !important;
text-align: right !important;
}
/* ═══════════════════════════════════════════════════════════════════
INV / NO INV card — exact fixed sizing (v47 final)
Overrides all previous patches with high specificity.
═══════════════════════════════════════════════════════════════════ */
/* Card: exact 160px height, flex column centered */
.income-popup .doc-choice-grid .doc-choice-card {
height: 160px !important;
min-height: 160px !important;
max-height: 160px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
padding: 12px 10px !important;
box-sizing: border-box !important;
}
/* doc-choice-main button: compact, centered */
.income-popup .doc-choice-grid .doc-choice-card .doc-choice-main {
flex: none !important;
width: auto !important;
height: auto !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* inv-number-field wrapper: just a flex centering container */
.income-popup .doc-choice-grid .inv-number-field {
flex: none !important;
width: 260px !important;
max-width: calc(100% - 32px) !important;
height: 48px !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
}
/* INV input: exact 260×48, font 19px centered */
.income-popup .doc-choice-grid .inv-number-field > .invoice-number-input {
width: 260px !important;
max-width: 100% !important;
height: 48px !important;
min-height: 48px !important;
padding: 0 14px !important;
font-size: 19px !important;
text-align: center !important;
border: 0 !important;
border-radius: 14px !important;
background: var(--surface) !important;
color: var(--text-primary) !important;
box-sizing: border-box !important;
box-shadow:
inset 2px 2px 3px var(--bevel-light),
inset -3px -3px 4px var(--bevel-dark) !important;
}
/* NO INV secondary text: plain, no box */
.income-popup .doc-choice-grid .noinv-sub-label {
display: block !important;
font-size: 15px !important;
font-weight: 500 !important;
color: var(--text-secondary) !important;
opacity: 0.65 !important;
text-align: center !important;
background: none !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* When NO INV card is selected (.on), lighten text for contrast */
.income-popup .doc-choice-grid .doc-choice-card.on .noinv-sub-label {
color: rgba(255,255,255,0.7) !important;
opacity: 1 !important;
}
/* ═══════════════════════════════════════════════════════════════════
INV / NO INV card — v49 final: slimmer 74px card, thin 28px input.
The INV number input was visually too thick; reduced height, font,
and vertical padding, and widened to align with the card. Overrides
all previous patches (incl. v48).
═══════════════════════════════════════════════════════════════════ */
.income-popup .doc-choice-grid .doc-choice-card {
height: 74px !important;
min-height: 74px !important;
max-height: 78px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 7px !important;
padding: 8px 10px !important;
box-sizing: border-box !important;
cursor: pointer !important;
}
.income-popup .doc-choice-grid .doc-choice-label {
font-size: 14px !important;
font-weight: 800 !important;
text-align: center !important;
pointer-events: none !important;
}
.income-popup .doc-choice-grid .invoice-number-input {
width: 100% !important;
max-width: 240px !important;
height: 28px !important;
min-height: 28px !important;
padding: 0 12px !important;
font-size: 14px !important;
text-align: center !important;
border: 0 !important;
border-radius: 9px !important;
background: var(--surface) !important;
color: var(--text-primary) !important;
box-sizing: border-box !important;
flex: none !important;
box-shadow:
inset 1px 1px 2px var(--bevel-light),
inset -2px -2px 3px var(--bevel-dark) !important;
}
.income-popup .doc-choice-grid .doc-choice-card.on .invoice-number-input {
background: #f7f7f7 !important;
color: #4f5661 !important;
box-shadow: inset 1px 1px 2px rgba(0,0,0,0.10), inset -1px -1px 2px rgba(255,255,255,0.8) !important;
}
.income-popup .doc-choice-grid .doc-choice-card.on .invoice-number-input::placeholder {
color: #8b9098 !important;
}
.income-popup .doc-choice-grid .noinv-sub-label { display: none !important; }
.income-popup .doc-choice-grid .doc-choice-main { display: none !important; }
/* ═══════════════════════════════════════════════════════════════════
Room Status popup: เสีย / ฟรี option equal sizing (v50 final)
Overrides earlier .maint-type-toggle constraints.
═══════════════════════════════════════════════════════════════════ */
.maint-type-toggle.side-toggle {
height: auto !important;
min-height: auto !important;
grid-template-columns: 1fr 1fr !important;
align-items: stretch !important;
padding: 5px !important;
gap: 6px !important;
}
.maint-type-toggle.side-toggle button {
height: 64px !important;
min-height: 64px !important;
max-height: 64px !important;
padding: 0 16px !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
white-space: normal !important;
border-radius: 18px !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
}
/* ── Room Status popup: reserve space for สาเหตุ field when type=free ── */
.maint-field-hidden {
visibility: hidden !important;
pointer-events: none !important;
}
/* ═══════════════════════════════════════════════════════════════════
Empty Room Action Popup — square card redesign
Scoped to .room-action-pop only. Does not affect other popups.
═══════════════════════════════════════════════════════════════════ */
.room-action-pop {
width: 320px !important;
max-width: calc(100vw - 24px) !important;
min-height: 240px !important;
padding: 22px 24px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: space-between !important;
position: relative !important;
box-sizing: border-box !important;
}
.room-action-x {
position: absolute !important;
top: 12px !important;
right: 12px !important;
width: 32px !important;
height: 32px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 20px !important;
border-radius: 10px !important;
}
.room-action-number {
flex: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 48px !important;
font-weight: 800 !important;
color: var(--text-primary) !important;
letter-spacing: -1px !important;
line-height: 1 !important;
padding-top: 4px !important;
}
.room-action-cards {
width: 100% !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
align-items: stretch !important;
}
.room-action-card {
height: 92px !important;
min-height: 92px !important;
padding: 14px 16px !important;
box-sizing: border-box !important;
border: 0 !important;
border-radius: 18px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
cursor: pointer !important;
transition: transform .12s, box-shadow .12s !important;
}
.room-action-card:active {
transform: translateY(2px) !important;
box-shadow: 0 3px 7px rgba(31,35,41,.13) !important;
}
.room-action-card-blue {
background: var(--primary-blue) !important;
color: var(--text-on-color) !important;
box-shadow: var(--shadow-button) !important;
}
.room-action-card-red {
background: var(--danger) !important;
color: var(--text-on-color) !important;
box-shadow: var(--shadow-button) !important;
}
/* ═══════════════════════════════════════════════════════════════════
Phase 2: Payment card + Note card — compact two-column lower row
═══════════════════════════════════════════════════════════════════ */
.charge-note-row {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr !important;
gap: 10px !important;
align-items: stretch !important;
}
/* payment card: col 1 (aligns with ชื่อลูกค้า) */
.charge-summary-card {
grid-column: 1 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
gap: 3px !important;
height: 56px !important;
min-height: 56px !important;
padding: 0 14px !important;
border: 0 !important;
border-radius: 14px !important;
background: var(--paid) !important;
color: var(--text-on-color) !important;
box-shadow: var(--shadow-button) !important;
box-sizing: border-box !important;
cursor: pointer !important;
text-align: left !important;
transition: transform .12s, box-shadow .12s !important;
width: 100% !important;
}
.charge-summary-card:hover {
box-shadow: 0 4px 10px rgba(24,183,106,.35) !important;
}
.charge-summary-card:active {
transform: translateY(1px) !important;
box-shadow: 0 2px 5px rgba(24,183,106,.25) !important;
}
.charge-summary-card.disabled {
opacity: .55 !important;
cursor: not-allowed !important;
}
.charge-summary-card.field-invalid {
box-shadow: 0 0 0 2px var(--danger), var(--shadow-button) !important;
}
/* Item 3: engine not ready but a draft payment exists — never show green
(false "complete"); switch to an orange/pending warning surface. */
.charge-summary-card.engine-blocked {
background: var(--pending) !important;
box-shadow: 0 0 0 2px var(--danger), var(--shadow-button) !important;
}
.charge-summary-card.engine-blocked:hover {
box-shadow: 0 0 0 2px var(--danger), 0 4px 10px rgba(214,90,82,.30) !important;
}
.cscard-label {
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: normal !important;
text-transform: none !important;
color: var(--text-on-color) !important;
line-height: 1 !important;
}
.cscard-detail {
font-size: 11px !important;
font-weight: 500 !important;
color: rgba(255,255,255,0.85) !important;
line-height: 1.2 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 100% !important;
}
/* Right: note card — spans cols 2–3 (aligns with C/I + C/O) */
.note-card {
grid-column: 2 / span 2 !important;
display: flex !important;
align-items: stretch !important;
height: 56px !important;
min-height: 56px !important;
max-height: 56px !important;
border-radius: 14px !important;
background: var(--surface) !important;
box-shadow: 0 1px 2px rgba(0,0,0,.08) !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
.note-card-input {
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
padding: 0 13px !important;
border: 0 !important;
border-radius: 14px !important;
background: transparent !important;
color: var(--text-primary) !important;
font-size: 14px !important;
resize: none !important;
box-sizing: border-box !important;
box-shadow: none !important;
}
.note-card-input::placeholder {
color: var(--text-secondary) !important;
}
/* Payment Popup — ค่าห้อง + ยอดค้าง top row */
.pp-amount-row {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
margin-bottom: 2px !important;
}
.pp-amount-fld, .pp-balance-fld {
display: flex !important;
flex-direction: column !important;
gap: 3px !important;
padding: 8px 12px !important;
border-radius: 12px !important;
background: var(--surface) !important;
box-shadow: 0 1px 2px rgba(0,0,0,.08) !important;
box-sizing: border-box !important;
}
.pp-balance-fld.due {
background: var(--pending) !important;
}
.pp-field-lbl {
font-size: 8px !important;
font-weight: 700 !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
color: var(--text-secondary) !important;
}
.pp-balance-fld.due .pp-field-lbl {
color: rgba(255,255,255,.85) !important;
}
.pp-amount-input {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
height: auto !important;
font-size: 15px !important;
font-weight: 700 !important;
text-align: right !important;
color: var(--text-primary) !important;
}
.pp-balance-amt {
font-size: 15px !important;
font-weight: 700 !important;
color: var(--text-primary) !important;
text-align: right !important;
}
.pp-balance-fld.due .pp-balance-amt {
color: var(--text-on-color) !important;
}
@media (max-width: 950px) {
.charge-note-row {
grid-template-columns: 1fr !important;
}
.charge-summary-card {
grid-column: 1 !important;
height: auto !important;
min-height: 48px !important;
max-height: none !important;
}
.note-card {
grid-column: 1 !important;
height: auto !important;
min-height: 48px !important;
max-height: none !important;
}
}
/* ── note-card input: flat/transparent inside note card, no nested-box look ── */
.note-card .note-card-input,
.note-card input.note-card-input {
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
border-radius: 0 !important;
height: 100% !important;
width: 100% !important;
padding: 0 13px !important;
color: var(--text-primary) !important;
font-size: 13px !important;
outline: none !important;
}
.note-card .note-card-input:focus,
.note-card input.note-card-input:focus {
outline: none !important;
box-shadow: none !important;
}
/* ═══════════════════════════════════════════════════════════════════
PaymentPopup redesign — 4-card + method-card layout
Replaces pp-amount-row / pp-method-grid / loose fld rows.
═══════════════════════════════════════════════════════════════════ */
/* Popup width: keep compact */
.pp-popup {
width: min(460px, calc(100vw - 20px)) !important;
}
.pp-body {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
padding: 10px 14px 14px !important;
}
/* ── Card row: 4 equal columns ─────────────────────────────────── */
.pp-card-row {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 8px !important;
}
/* ── Base card ──────────────────────────────────────────────────── */
.pp-card {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 4px !important;
padding: 9px 10px 10px !important;
border-radius: 14px !important;
background: var(--surface) !important;
box-shadow:
0 1px 3px rgba(31,35,41,.10),
inset 0 0 0 1px rgba(0,0,0,.04) !important;
box-sizing: border-box !important;
min-height: 74px !important;
position: relative !important;
}
/* Label (top) */
.pp-card-lbl {
font-size: 9px !important;
font-weight: 700 !important;
letter-spacing: .07em !important;
text-transform: uppercase !important;
color: var(--text-secondary) !important;
line-height: 1 !important;
flex: none !important;
}
/* Primary input inside card */
.pp-card-input {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
flex: 1 !important;
font-size: 18px !important;
font-weight: 700 !important;
color: var(--text-primary) !important;
text-align: right !important;
outline: none !important;
-moz-appearance: textfield !important;
}
.pp-card-input::-webkit-outer-spin-button,
.pp-card-input::-webkit-inner-spin-button { -webkit-appearance: none !important; }
.pp-card-input:disabled {
color: var(--text-secondary) !important;
}
.pp-card-input:focus { outline: none !important; box-shadow: none !important; }
/* Read-only value (ยอดค้าง) */
.pp-card-value {
flex: 1 !important;
display: flex !important;
align-items: flex-end !important;
justify-content: flex-end !important;
font-size: 18px !important;
font-weight: 700 !important;
color: var(--text-primary) !important;
line-height: 1 !important;
}
/* Muted: input not available yet */
.pp-card.pp-card-muted {
opacity: .5 !important;
}
/* Error state */
.pp-card.pp-card-err {
box-shadow:
0 0 0 2px var(--danger),
0 1px 3px rgba(31,35,41,.10) !important;
}
.pp-card-errmsg {
font-size: 9px !important;
color: var(--danger) !important;
line-height: 1.2 !important;
margin-top: 2px !important;
}
/* Outstanding card (due / orange) */
.pp-card.pp-card-balance.due {
background: var(--pending) !important;
box-shadow: 0 1px 4px rgba(214,90,82,.18) !important;
}
.pp-card.pp-card-balance.due .pp-card-lbl {
color: rgba(255,255,255,.8) !important;
}
.pp-card.pp-card-balance.due .pp-card-value {
color: #fff !important;
}
/* ── Method card row (Row 2) ────────────────────────────────────── */
.pp-method-card {
min-height: 52px !important;
padding: 0 6px !important;
border: 0 !important;
border-radius: 14px !important;
background: var(--surface) !important;
color: var(--text-primary) !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: .03em !important;
cursor: pointer !important;
box-shadow:
0 1px 3px rgba(31,35,41,.10),
inset 0 0 0 1px rgba(0,0,0,.04) !important;
transition: transform .1s, box-shadow .1s !important;
}
.pp-method-card:active { transform: translateY(1px) !important; }
.pp-method-card.on {
background: var(--primary-blue) !important;
color: var(--text-on-color) !important;
box-shadow: 0 2px 6px rgba(63,115,217,.30) !important;
}
.pp-method-card:disabled {
opacity: .4 !important;
cursor: not-allowed !important;
}
/* ── Responsive: 2 columns below 540px ─────────────────────────── */
@media (max-width: 540px) {
.pp-card-row {
grid-template-columns: repeat(2, 1fr) !important;
}
.pp-card, .pp-method-card {
min-height: 64px !important;
}
}
/* ═══════════════════════════════════════════════════════════════════
PaymentPopup card center refinement — overrides previous block
═══════════════════════════════════════════════════════════════════ */
/* Card: centered column, fixed near-square height */
.pp-card {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: space-between !important;
gap: 6px !important;
padding: 10px 8px 10px !important;
border-radius: 14px !important;
background: var(--surface) !important;
box-shadow:
0 1px 3px rgba(31,35,41,.10),
inset 0 0 0 1px rgba(0,0,0,.05) !important;
box-sizing: border-box !important;
min-height: 80px !important;
}
/* Label: always centered */
.pp-card-lbl {
font-size: 9px !important;
font-weight: 700 !important;
letter-spacing: .07em !important;
text-transform: uppercase !important;
color: var(--text-secondary) !important;
line-height: 1 !important;
text-align: center !important;
width: 100% !important;
}
/* Inner input box — visible sunken panel */
.pp-card-inner {
width: 100% !important;
flex: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #f0ede8 !important;
border-radius: 9px !important;
box-shadow: inset 1px 1px 3px rgba(0,0,0,.10), inset -1px -1px 2px rgba(255,255,255,.6) !important;
padding: 0 8px !important;
box-sizing: border-box !important;
min-height: 36px !important;
}
/* Value display (ยอดค้าง) — no inset, no background */
.pp-card-inner.pp-card-inner-value {
background: transparent !important;
box-shadow: none !important;
}
/* Input inside inner box */
.pp-card-input {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
font-size: 16px !important;
font-weight: 700 !important;
color: var(--text-primary) !important;
text-align: center !important;
outline: none !important;
-moz-appearance: textfield !important;
}
.pp-card-input::-webkit-outer-spin-button,
.pp-card-input::-webkit-inner-spin-button { -webkit-appearance: none !important; }
.pp-card-input:disabled { color: var(--text-secondary) !important; opacity: .7 !important; }
.pp-card-input:focus { outline: none !important; box-shadow: none !important; }
/* Text input variant (เวลา QR) */
.pp-card-input-text { text-align: center !important; }
/* Read-only value */
.pp-card-value {
font-size: 16px !important;
font-weight: 700 !important;
color: var(--text-primary) !important;
text-align: center !important;
width: 100% !important;
line-height: 1 !important;
}
/* Muted */
.pp-card.pp-card-muted { opacity: .45 !important; }
/* Error ring */
.pp-card.pp-card-err {
box-shadow:
0 0 0 2px var(--danger),
0 1px 3px rgba(31,35,41,.10) !important;
}
.pp-card-errmsg {
font-size: 9px !important;
color: var(--danger) !important;
text-align: center !important;
line-height: 1.2 !important;
}
/* Outstanding card: orange */
.pp-card.pp-card-balance.due {
background: var(--pending) !important;
box-shadow: 0 1px 4px rgba(214,90,82,.20) !important;
}
.pp-card.pp-card-balance.due .pp-card-lbl { color: rgba(255,255,255,.75) !important; }
.pp-card.pp-card-balance.due .pp-card-value { color: #fff !important; }
/* Method card: same min-height as pp-card */
.pp-method-card {
min-height: 52px !important;
height: 52px !important;
padding: 0 4px !important;
border: 0 !important;
border-radius: 14px !important;
background: var(--surface) !important;
color: var(--text-primary) !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: .02em !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow:
0 1px 3px rgba(31,35,41,.10),
inset 0 0 0 1px rgba(0,0,0,.05) !important;
transition: transform .1s, box-shadow .1s !important;
}
.pp-method-card:active { transform: translateY(1px) !important; }
.pp-method-card.on {
background: var(--primary-blue) !important;
color: var(--text-on-color) !important;
box-shadow: 0 2px 6px rgba(63,115,217,.30) !important;
}
.pp-method-card:disabled { opacity: .4 !important; cursor: not-allowed !important; }
/* Responsive */
@media (max-width: 540px) {
.pp-card-row { grid-template-columns: repeat(2, 1fr) !important; }
.pp-card { min-height: 70px !important; }
}
/* ═══════════════════════════════════════════════════════════════════
PaymentPopup — TOP-TO-BOTTOM FLOW (item 2, no zigzag)
Sequence: 1 ค่าห้อง → 2 วิธีชำระเงิน → 3 ยอดรับ (+เวลา QR) → 4 ยอดค้าง.
Payment method sits directly between ค่าห้อง and ยอดรับ so the eye
never jumps back up. Overrides the old 4-card + method-row grid.
═══════════════════════════════════════════════════════════════════ */
.pp-body-flow {
display: flex !important;
flex-direction: column !important;
gap: 11px !important;
padding: 12px 14px 14px !important;
}
.pp-step {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
}
.pp-step-lbl {
font-size: 9px !important;
font-weight: 800 !important;
letter-spacing: .07em !important;
text-transform: uppercase !important;
color: var(--text-secondary) !important;
line-height: 1 !important;
padding-left: 2px !important;
}
.pp-step-err {
font-size: 10px !important;
font-weight: 700 !important;
color: var(--danger) !important;
padding-left: 2px !important;
line-height: 1.2 !important;
}
/* Method buttons — 4 equal columns, directly under ค่าห้อง */
.pp-method-row {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 8px !important;
}
/* ยอดรับ row: 1 column normally, 2 columns when เวลา QR is visible */
.pp-amount-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 8px !important;
}
.pp-amount-grid.has-qr {
grid-template-columns: 1fr 1fr !important;
}
/* Wide, compact horizontal card (ค่าห้อง, ยอดค้าง) — label left, value right.
Shorter than the square step cards so the stacked flow stays compact. */
.pp-card.pp-card-wide {
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
min-height: 50px !important;
padding: 8px 12px !important;
gap: 12px !important;
}
.pp-card.pp-card-wide .pp-card-lbl {
width: auto !important;
text-align: left !important;
flex: none !important;
white-space: nowrap !important;
}
.pp-card.pp-card-wide .pp-card-inner {
flex: 1 !important;
min-height: 34px !important;
max-width: 180px !important;
}
.pp-card.pp-card-wide .pp-card-inner-value {
max-width: none !important;
justify-content: flex-end !important;
}
.pp-card.pp-card-wide .pp-card-input,
.pp-card.pp-card-wide .pp-card-value {
text-align: right !important;
}
/* Engine-not-ready warning banner inside the payment popup (item 3) */
.pp-engine-warn {
margin-top: 2px !important;
padding: 9px 12px !important;
border-radius: 12px !important;
background: var(--danger) !important;
color: var(--text-on-color) !important;
font-size: 10.5px !important;
font-weight: 700 !important;
line-height: 1.4 !important;
text-align: center !important;
}
/* ╔═══════════════════════════════════════════════════════════════════╗
║ RIGHT PANEL — CLEAN SYSTEM v1 ║
║ Single source of truth. No conflicting overrides. ║
╚═══════════════════════════════════════════════════════════════════╝ */
/* ── Palette ─────────────────────────────────────────────────────── */
:root {
--rp-bg: #deded9;
--rp-card: #e2e1dc;
--rp-inset: #d6d4cf;
--rp-inset-blue:#dde8f4;
--rp-shadow: 3px 5px 10px rgba(20,18,14,.10), -2px -2px 5px rgba(255,255,255,.65);
--rp-inset-shadow: inset 1px 1px 3px rgba(20,18,14,.12), inset -1px -1px 2px rgba(255,255,255,.55);
--rp-blue: #185FA5;
--rp-red: #c0392b;
--rp-green: #18B76A;
--rp-text: #3d3935;
--rp-muted: #7a7268;
--rp-subtle: #8a8680;
}
/* ── App background ──────────────────────────────────────────────── */
body, .shell, .main-content, .page, .dash-page, .dash-grid {
background: var(--rp-bg) !important;
}
/* ── Right panel container ───────────────────────────────────────── */
.dash-right {
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
gap: 14px !important;
padding: var(--panel-pad) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
background: #D4D3CD !important;
border-radius: 24px !important;
box-shadow: 4px 6px 12px rgba(118,112,104,.18), -3px -3px 8px rgba(255,255,255,.55) !important;
width: 340px !important;
min-width: 340px !important;
box-sizing: border-box !important;
}
/* ── Shared raised card ──────────────────────────────────────────── */
.shift-card,
.mini-cal,
.room-sum-2,
.dash-fin-card {
background: var(--rp-card) !important;
border-radius: 14px !important;
box-shadow: var(--rp-shadow) !important;
overflow: hidden !important;
}
/* ── 1. Date selector bar ────────────────────────────────────────── */
.dash-date-wrap {
position: relative !important;
}
.dt-bar {
background: var(--rp-card) !important;
border-radius: 14px !important;
box-shadow: var(--rp-shadow) !important;
}
/* ── 2. Shift card ───────────────────────────────────────────────── */
.shift-card {
padding: 8px !important;
}
.shift-row {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 6px !important;
}
.shift-side {
display: flex !important;
flex-direction: column !important;
gap: 3px !important;
padding: 0 !important;
}
.shift-lbl, .shift-lbl-green {
font-size: 9px !important;
font-weight: 700 !important;
color: var(--rp-green) !important;
letter-spacing: .02em !important;
text-transform: none !important;
}
.shift-side input {
height: 30px !important;
font-size: 14px !important;
font-weight: 800 !important;
color: var(--rp-text) !important;
text-align: center !important;
background: var(--rp-inset) !important;
box-shadow: var(--rp-inset-shadow) !important;
border-radius: 8px !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* ── 3. Calendar ─────────────────────────────────────────────────── */
.mini-cal {
padding: 8px !important;
}
.mini-cal-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin-bottom: 5px !important;
}
.mini-cal-header span {
font-size: 11px !important;
font-weight: 700 !important;
color: var(--rp-text) !important;
}
.mini-cal-actions {
display: flex !important;
gap: 4px !important;
}
.mini-cal-actions button {
height: 20px !important;
min-width: 20px !important;
font-size: 9px !important;
border-radius: 6px !important;
background: var(--rp-inset) !important;
box-shadow: var(--rp-inset-shadow) !important;
color: var(--rp-text) !important;
border: 0 !important;
cursor: pointer !important;
padding: 0 6px !important;
}
.mini-cal-grid {
display: grid !important;
grid-template-columns: repeat(7, 1fr) !important;
gap: 2px !important;
}
.mini-cal-grid button {
height: 22px !important;
font-size: 9px !important;
border-radius: 5px !important;
background: var(--rp-inset) !important;
box-shadow: var(--rp-inset-shadow) !important;
color: var(--rp-text) !important;
font-weight: 600 !important;
border: 0 !important;
cursor: pointer !important;
padding: 0 !important;
}
.mini-cal-grid button.empty {
background: transparent !important;
box-shadow: none !important;
}
.mini-cal-grid button.today {
background: var(--rp-green) !important;
box-shadow: none !important;
color: #fff !important;
border-radius: 50% !important;
font-weight: 800 !important;
}
.mini-cal-grid button.selected:not(.today) {
background: var(--rp-blue) !important;
box-shadow: none !important;
color: #fff !important;
}
.mini-cal-grid button.has-data {
color: var(--rp-blue) !important;
font-weight: 800 !important;
}
.mini-cal-grid .cal-dow {
background: transparent !important;
box-shadow: none !important;
font-size: 8px !important;
font-weight: 700 !important;
color: var(--rp-subtle) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: default !important;
}
/* ── 4. Room KPI ─────────────────────────────────────────────────── */
.room-sum-2 {
padding: 7px !important;
display: grid !important;
grid-template-columns: 1fr 1fr 1.2fr !important;
gap: 6px !important;
align-items: stretch !important;
}
.rs-fb { display: contents !important; }
.rs-sub {
background: var(--rp-inset) !important;
box-shadow: var(--rp-inset-shadow) !important;
border-radius: 9px !important;
padding: 8px 4px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 2px !important;
min-height: 0 !important;
}
.rs-sn {
font-size: 24px !important;
font-weight: 800 !important;
line-height: 1 !important;
position: static !important;
}
.rs-sub.free .rs-sn { color: var(--rp-green) !important; }
.rs-sub.broken .rs-sn { color: var(--rp-red) !important; }
.rs-sl {
font-size: 8px !important;
font-weight: 700 !important;
color: var(--rp-subtle) !important;
position: static !important;
text-align: center !important;
}
.rs-card.rs-sold {
background: var(--rp-green) !important;
border-radius: 9px !important;
box-shadow: 2px 4px 8px rgba(24,183,106,.20) !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 2px !important;
padding: 8px 4px !important;
}
.rs-card.rs-sold.two-layer { padding: 8px 4px !important; }
.rs-card.rs-sold .psc-inner {
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 2px !important;
position: static !important;
width: 100% !important;
height: 100% !important;
}
.rs-card.rs-sold .psc-inner .rs-n {
font-size: 24px !important;
font-weight: 800 !important;
color: #fff !important;
position: static !important;
line-height: 1 !important;
}
.rs-card.rs-sold .psc-inner .rs-unit {
font-size: 8px !important;
font-weight: 700 !important;
color: rgba(255,255,255,.88) !important;
position: static !important;
}
/* ── 5. Financial summary ────────────────────────────────────────── */
.dash-fin-card {
display: flex !important;
flex-direction: column !important;
padding: 0 !important;
gap: 0 !important;
}
.dash-fin-title {
background: transparent !important;
padding: 9px 11px 6px !important;
font-size: 14px !important;
font-weight: 800 !important;
color: #3d3935 !important;
letter-spacing: 0 !important;
display: flex !important;
align-items: center !important;
gap: 7px !important;
margin: 0 !important;
}
.dash-fin-title::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: #1d63d6;
flex-shrink: 0;
display: inline-block;
}
.dash-fin-icon { display: none !important; }
.dash-fin-divider {
display: none !important;
}
.dash-fin-row {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 8px 12px !important;
font-size: 10px !important;
}
.dash-fin-row-icon { display: none !important; }
.dash-fin-lbl { color: var(--rp-muted) !important; font-size: 13px !important; flex: 1 !important; }
.dash-fin-amt { font-size: 14px !important; font-weight: 700 !important; color: var(--rp-text) !important; }
/* เงินสด inset blue */
.dash-fin-row.cash-row {
margin: 2px 9px 9px !important;
padding: 7px 10px !important;
background: #1d63d6 !important;
box-shadow: none !important;
border-radius: 8px !important;
}
.dash-fin-row.cash-row .dash-fin-lbl { color: #fff !important; font-weight: 700 !important; font-size: 13px !important; }
.dash-fin-row.cash-row .dash-fin-amt { color: #fff !important; font-weight: 700 !important; font-size: 15px !important; }
/* ── 6. Send total ───────────────────────────────────────────────── */
.dash-send-bar {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
background: var(--rp-green) !important;
border-radius: 14px !important;
box-shadow: 3px 5px 10px rgba(20,18,14,.10), -2px -2px 5px rgba(255,255,255,.40) !important;
padding: 10px 14px !important;
gap: 8px !important;
flex-shrink: 0 !important;
transition: background .15s, box-shadow .15s !important;
}
.dash-send-bar.negative {
background: #d63a30 !important;
box-shadow: 3px 5px 10px rgba(20,18,14,.10), -2px -2px 5px rgba(255,255,255,.40) !important;
}
.dash-send-icon { font-size: 14px !important; color: #fff !important; }
.dash-send-lbl { font-size: 18px !important; font-weight: 700 !important; color: #fff !important; flex: 1 !important; }
.dash-send-amt { font-size: 20px !important; font-weight: 800 !important; color: #fff !important; }
/* ── Room cards (left panel) ─────────────────────────────────────── */
.tx-card {
background: #e2e1dc !important;
border-radius: 18px !important;
box-shadow: 3px 6px 14px rgba(20,18,14,.11), -2px -2px 7px rgba(255,255,255,.72) !important;
}
.rc-num {
color: #5f5f5a !important;
font-weight: 700 !important;
top: 13px !important;
left: 13px !important;
}
.tx-grid {
grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
grid-template-rows: repeat(6, minmax(0, 1fr)) !important;
gap: 12px !important;
padding: 0 !important;
height: 100% !important;
box-sizing: border-box !important;
overflow: visible !important;
}
.tx-card-wrap {
width: 100% !important;
height: 100% !important;
aspect-ratio: unset !important;
min-height: 0 !important;
}
/* ═══ RIGHT PANEL FIXES ════════════════════════════════════════════ */
/* Fix: shift-side.set input — override warm gradient to match inset */
.shift-side.set input,
.shift-side:not(.set) input {
background: var(--rp-inset) !important;
box-shadow: var(--rp-inset-shadow) !important;
color: var(--rp-text) !important;
height: 30px !important;
font-size: 14px !important;
font-weight: 800 !important;
text-align: center !important;
border-radius: 8px !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
/* Fix: DateSelectorBar wrapper — raise as card */
.dash-date-wrap .dt-bar,
.dash-date-wrap > div:first-child {
background: var(--rp-card) !important;
border-radius: 14px !important;
box-shadow: var(--rp-shadow) !important;
}
/* Fix: Room KPI — tighter, number centered properly */
.rs-sub {
padding: 6px 4px !important;
justify-content: center !important;
align-items: center !important;
}
.rs-sn, .rs-sl { position: static !important; bottom: auto !important; left: auto !important; }
/* Fix: Expense list height — 4 rows only, no scroll */
div[style*="rp-inset"], .exp-list {
height: 90px !important;
min-height: 90px !important;
max-height: 90px !important;
}
/* Fix: dash-right no overflow, all sections visible */
.dash-right {
overflow-y: auto !important;
overflow-x: hidden !important;
}
/* ═══ RP-CARD base (ShiftCard wrapper) ════════════════════════════ */
.rp-card {
background: #e2e1dc !important;
border-radius: 14px !important;
box-shadow: 3px 5px 10px rgba(20,18,14,.10), -2px -2px 5px rgba(255,255,255,.65) !important;
}
/* ═══ MiniCalendar inline — override kit default ══════════════════ */
/* ═══ Housekeeping FRONT Phase 3 — supervisor board only ═══════════ */
.hk-page {
padding: 14px 24px 24px;
overflow-y: auto;
overflow-x: hidden;
max-width: 100%;
width: 100%;
margin: 0;
box-sizing: border-box;
}
.hk-page-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 0;
}
.hk-head-right {
display: flex;
align-items: center;
gap: 10px;
}
.hk-date-controls {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px;
border-radius: 12px;
background: #d6d4cf;
box-shadow: inset 1px 1px 3px rgba(20,18,14,.10), inset -1px -1px 2px rgba(255,255,255,.55);
}
.hk-date-controls button {
height: 28px;
min-width: 28px;
border: 0;
border-radius: 9px;
background: #f3f2ee;
box-shadow: 1px 2px 5px rgba(20,18,14,.10);
color: #1f2329;
font-size: 10px;
font-weight: 900;
cursor: pointer;
}
.hk-date-controls strong {
min-width: 92px;
text-align: center;
color: #1f2329;
font-size: 12px;
font-weight: 900;
}
.hk-page-sub {
font-size: 11px;
font-weight: 700;
color: #6a6560;
letter-spacing: .04em;
}
.hk-role-switch {
display: inline-flex;
gap: 4px;
padding: 3px;
border-radius: 12px;
background: #d6d4cf;
box-shadow: inset 1px 1px 3px rgba(20,18,14,.10), inset -1px -1px 2px rgba(255,255,255,.55);
}
.hk-role-switch button {
min-width: 66px;
height: 28px;
border: 0;
border-radius: 9px;
background: transparent;
color: #6a6560;
font-size: 10px;
font-weight: 800;
cursor: pointer;
}
.hk-role-switch button.active {
background: #f3f2ee;
color: #1f2329;
box-shadow: 1px 2px 5px rgba(20,18,14,.10);
}
.hk-sync-status {
font-size: 11px;
font-weight: 800;
color: #18B76A;
letter-spacing: 0;
}
.hk-sync-status.err { color: #D85A52; }
.hk-summary-row {
display: flex;
gap: 10px;
margin-top: 14px;
justify-content: flex-start;
}
.hk-summary-card {
min-height: 60px;
min-width: 100px;
max-width: 140px;
flex: 1;
border-radius: 14px;
background: #e2e1dc;
box-shadow: 3px 5px 10px rgba(20,18,14,.10), -2px -2px 5px rgba(255,255,255,.65);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 7px 12px;
}
.hk-sum-num { font-size: 22px; font-weight: 800; line-height: 1; color: #5f5f5a; }
.hk-sum-lbl { font-size: 10px; font-weight: 700; color: #6a6560; white-space: nowrap; }
.hk-summary-co .hk-sum-num { color: #185FA5; }
.hk-summary-stayover .hk-sum-num { color: #6d28d9; }
.hk-summary-wait .hk-sum-num { color: #E8914F; }
.hk-summary-done .hk-sum-num { color: #18B76A; }
.hk-summary-skip { opacity: .58; }
.hk-summary-skip .hk-sum-num { color: #9b9690; }
.hk-section { margin-top: 0; }
.hk-front-board {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
gap: 14px;
align-items: start;
margin-top: 0;
}
.hk-front-section { margin-top: 0; }
.hk-front-ready { grid-row: span 2; }
.hk-main-section {
padding: 12px;
border-radius: 18px;
background: #e2e1dc;
box-shadow: 3px 5px 10px rgba(20,18,14,.10), -2px -2px 5px rgba(255,255,255,.65);
}
.hk-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-size: 12px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
color: #3d3935;
margin-bottom: 10px;
}
.hk-section-count {
font-size: 11px;
font-weight: 700;
color: #6a6560;
letter-spacing: 0;
text-transform: none;
}
.hk-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
gap: 8px;
align-items: stretch;
}
.hk-card {
min-height: 78px;
border: 0;
border-radius: 16px;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 8px;
transition: transform .1s, box-shadow .1s;
position: relative;
}
.hk-card:active { transform: translateY(1px); }
.hk-card.has-note::before {
content: '';
position: absolute;
left: 0; top: 12px; bottom: 12px;
width: 4px;
border-radius: 0 3px 3px 0;
background: #FACC15;
}
.hk-card.urgent::after,
.hk-maid-ready-card.urgent::after,
.hk-mini-room.urgent::after {
content: "!";
position: absolute;
right: 5px;
top: 4px;
width: 18px;
height: 18px;
border-radius: 50%;
display: grid;
place-items: center;
background: #D65A52;
color: #fff;
font-size: 11px;
font-weight: 900;
}
.hk-room-num { font-size: 26px; font-weight: 900; line-height: 1; }
.hk-status-lbl { font-size: 11px; font-weight: 800; opacity: .82; line-height: 1; }
.hk-room-tag {
position: absolute;
left: 7px;
bottom: 6px;
font-size: 9px;
font-weight: 900;
opacity: .72;
}
/* FRONT: ทุกห้องที่ยังต้องทำ = เขียว (WAITING ทุก stay_type) */
.hk-active {
background: #18B76A;
box-shadow: 3px 5px 10px rgba(24,183,106,.28), -2px -2px 5px rgba(255,255,255,.55);
color: #fff;
}
/* FRONT: กด C/O แล้ว (READY) = เทา รอแม่บ้านเข้า */
.hk-ready-front {
background: #c8c7c2;
box-shadow: 2px 3px 7px rgba(20,18,14,.12), -2px -2px 5px rgba(255,255,255,.60);
color: #6a6560;
}
/* MAID: section รอ = เทาขาว */
.hk-maid-waiting {
background: #e2e1dc;
box-shadow: 2px 3px 7px rgba(20,18,14,.10), -2px -2px 5px rgba(255,255,255,.62);
color: #6a6560;
}
/* URGENT = แดง ทับทุก state */
.hk-urgent {
background: #D65A52;
box-shadow: 3px 5px 10px rgba(214,90,82,.30), -2px -2px 5px rgba(255,255,255,.45);
color: #fff;
}
/* DONE section = เทาเข้ม (ใช้ใน front done grid) */
.hk-done-card {
background: #c8c7c2;
box-shadow: none;
color: #77756f;
opacity: .75;
cursor: default;
pointer-events: none;
}
.hk-empty {
font-size: 11px; color: #8a8680;
padding: 6px 0;
}
.hk-floor-groups { display: grid; gap: 12px; }
.hk-floor-block { display: grid; gap: 8px; }
.hk-floor-title { font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #9a9690; }
.hk-done-group-label {
font-size: 10px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
color: #9a9690;
margin-bottom: 6px;
}
.hk-skip {
background: #e2e1dc;
box-shadow: none;
color: #b0aca7;
opacity: .38;
cursor: default;
pointer-events: none;
}
.hk-extra-section {
padding: 12px;
border-radius: 18px;
background: #e2e1dc;
box-shadow: 3px 5px 10px rgba(20,18,14,.10), -2px -2px 5px rgba(255,255,255,.65);
max-width: 680px;
}
.hk-extra-list {
display: grid;
gap: 8px;
}
.hk-add-extra-btn {
height: 28px;
border: 0;
border-radius: 10px;
background: #18B76A;
box-shadow: 1px 2px 5px rgba(24,183,106,.20);
color: #fff;
font-size: 10px;
font-weight: 900;
cursor: pointer;
}
.hk-add-extra-btn:disabled {
opacity: .42;
cursor: default;
}
.hk-extra-row {
min-height: 54px;
display: grid;
grid-template-columns: 80px 1fr auto;
align-items: stretch;
gap: 0;
padding: 0;
border-radius: 12px;
background: #f3f2ee;
box-shadow: 2px 3px 7px rgba(20,18,14,.09), -1px -1px 4px rgba(255,255,255,.68);
color: #25282f;
overflow: hidden;
}
.hk-extra-row.urgent { background: #f8e2df; }
.hk-extra-row.done {
background: #f0efeb;
box-shadow: 2px 3px 7px rgba(20,18,14,.07), -1px -1px 4px rgba(255,255,255,.60);
border-radius: 12px;
}
.hk-extra-room-done {
background: #c8c7c2 !important;
color: #6a6560 !important;
border-radius: 12px 0 0 12px;
}
.hk-extra-detail-done {
color: #9a9690 !important;
}
.hk-restore-btn {
border: 0;
border-radius: 10px;
background: #FACC15;
color: #8a7000;
min-height: 34px;
padding: 0 12px;
font-size: 11px;
font-weight: 900;
cursor: pointer;
}
.hk-extra-row.done .hk-extra-room {
background: #c8c7c2;
color: #6a6560;
}
.hk-extra-row.done .hk-extra-detail {
color: #9a9690;
}
.hk-extra-room {
border: 0;
border-radius: 0;
background: #3F73D9;
min-height: 100%;
font-size: 15px;
font-weight: 900;
color: #fff;
cursor: default;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 6px;
}
.hk-extra-room:disabled {
cursor: default;
opacity: .8;
}
.hk-extra-detail {
min-width: 0;
font-size: 13px;
font-weight: 800;
overflow-wrap: anywhere;
padding: 10px 12px;
display: flex;
align-items: center;
}
.hk-extra-status {
font-size: 10px;
font-weight: 900;
color: #18B76A;
}
.hk-extra-row.done .hk-extra-status { color: #8a8680; }
.hk-extra-done-list {
display: grid;
gap: 8px;
margin-top: 4px;
}
.hk-maid-board {
display: grid;
grid-template-columns: minmax(0, 520px);
justify-content: center;
gap: 12px;
margin-top: 16px;
}
.hk-maid-section {
padding: 12px;
border-radius: 18px;
background: #e2e1dc;
box-shadow: 3px 5px 10px rgba(20,18,14,.10), -2px -2px 5px rgba(255,255,255,.65);
}
.hk-maid-section.ready { grid-row: auto; }
.hk-maid-ready-list {
display: grid;
gap: 8px;
}
.hk-maid-ready-card {
min-height: 62px;
border: 0;
border-radius: 14px;
background: #dceaf6;
box-shadow: 2px 4px 8px rgba(24,95,165,.15), -2px -2px 5px rgba(255,255,255,.65);
color: #185FA5;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
position: relative;
cursor: pointer;
}
.hk-maid-ready-card strong { font-size: 26px; font-weight: 900; }
.hk-maid-ready-card span { font-size: 10px; font-weight: 900; }
.hk-mini-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 7px;
}
.hk-mini-room {
min-height: 42px;
border: 0;
border-radius: 11px;
background: #f0dfbf;
box-shadow: 2px 4px 8px rgba(130,88,38,.12), -2px -2px 5px rgba(255,255,255,.62);
color: #a35f17;
font-size: 16px;
font-weight: 900;
position: relative;
cursor: default;
}
.hk-mini-room span {
display: block;
font-size: 8px;
font-weight: 900;
}
.hk-mini-grid.muted .hk-mini-room {
background: #d9d8d3;
color: #77736e;
box-shadow: none;
}
.hk-mini-grid.muted .hk-mini-room:not(:disabled) { cursor: pointer; }
.hk-modal-backdrop {
position: fixed;
inset: 0;
z-index: 90;
display: grid;
place-items: center;
padding: 20px;
background: rgba(31,35,41,.36);
}
.hk-modal {
width: min(520px, 100%);
height: 360px;
padding: 24px;
border-radius: 22px;
background: #e2e1dc;
box-shadow: 8px 14px 30px rgba(20,18,14,.24), -3px -3px 12px rgba(255,255,255,.40);
position: relative;
}
.hk-modal-x {
position: absolute;
top: 12px;
right: 14px;
border: 0;
background: transparent;
color: #3d3935;
font-size: 26px;
font-weight: 800;
cursor: pointer;
}
.hk-modal p {
margin: 0;
color: #6a6560;
font-size: 11px;
font-weight: 800;
letter-spacing: .12em;
text-align: center;
}
.hk-modal h2 {
margin: 10px 0 8px;
color: #1f2329;
font-size: 72px;
line-height: 1;
text-align: center;
}
.hk-modal-info {
color: #6a6560;
font-size: 13px;
font-weight: 800;
text-align: center;
}
.hk-modal-actions {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
margin-top: 20px;
}
.hk-action {
min-height: 66px;
border: 0;
border-radius: 16px;
background: #f3f2ee;
box-shadow: 2px 4px 8px rgba(20,18,14,.12), -2px -2px 5px rgba(255,255,255,.65);
color: #1f2329;
font-weight: 900;
font-size: 15px;
cursor: pointer;
}
.hk-action:disabled {
opacity: .42;
cursor: default;
box-shadow: none;
}
.hk-action.ready { color: #185FA5; background: #dceaf6; }
.hk-action.done { color: #fff; background: #18B76A; }
.hk-action.skip { color: #77736e; background: #d9d8d3; }
.hk-action.urgent { color: #D65A52; }
.hk-note-box {
margin: 0 0 12px;
padding: 10px 12px;
border-radius: 12px;
background: #fef9e7;
border-left: 3px solid #FACC15;
display: flex;
gap: 8px;
align-items: flex-start;
}
.hk-note-box-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.hk-note-box-text { font-size: 13px; font-weight: 800; color: #92400e; line-height: 1.5; word-break: break-word; }
.hk-field {
display: grid;
gap: 5px;
margin-top: 12px;
color: #6a6560;
font-size: 11px;
font-weight: 800;
}
.hk-extra-modal {
height: auto;
min-height: 360px;
}
.hk-field select,
.hk-field input {
width: 100%;
height: 42px;
border: 0;
border-radius: 12px;
background: #f3f2ee;
box-shadow: inset 1px 1px 3px rgba(20,18,14,.10), inset -1px -1px 2px rgba(255,255,255,.55);
color: #1f2329;
padding: 0 12px;
font: inherit;
}
.hk-check {
display: flex;
align-items: center;
gap: 8px;
margin-top: 12px;
font-size: 12px;
font-weight: 900;
color: #D65A52;
}
.hk-undo-bar {
position: fixed;
z-index: 95;
left: 50%;
bottom: 18px;
transform: translateX(-50%);
width: min(420px, calc(100% - 28px));
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
border-radius: 16px;
background: #1f2329;
color: #fff;
box-shadow: 0 10px 24px rgba(20,18,14,.24);
}
.hk-undo-bar button {
border: 0;
background: transparent;
color: #82e7b2;
font-weight: 900;
cursor: pointer;
}
/* Housekeeping Final UI — client HK_Tasks adapter only */
/* HK layout — left content, right calendar panel */
.hk-body {
display: grid;
grid-template-columns: minmax(0, 1fr) 260px;
gap: 12px;
align-items: start;
margin-top: 12px;
}
.hk-content { display: flex; flex-direction: column; gap: 10px; }
.hk-right-panel {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 0;
padding-top: 0;
}
.hk-cal-stats { margin-top: 0; }
.hk-maid-active .hk-right-panel { display: none; }
.hk-maid-active .hk-body { grid-template-columns: minmax(0, 520px); justify-content: center; }
/* MiniCalendar — neumorphic warm gray style (HK + dashboard) */
.mini-cal {
background: #e2e1dc !important;
border-radius: 14px !important;
box-shadow: 3px 5px 10px rgba(20,18,14,.10), -2px -2px 5px rgba(255,255,255,.65) !important;
padding: 14px !important;
border: 0 !important;
}
.mini-cal-head {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin-bottom: 10px !important;
}
.mini-cal-title {
font-size: 14px !important;
font-weight: 900 !important;
color: #3d3935 !important;
}
.mini-cal-actions {
display: flex !important;
gap: 4px !important;
}
.mini-cal-actions button {
height: 26px !important;
min-width: 26px !important;
border: 0 !important;
border-radius: 9px !important;
background: #f3f2ee !important;
box-shadow: 1px 2px 4px rgba(20,18,14,.10), -1px -1px 3px rgba(255,255,255,.65) !important;
color: #6a6560 !important;
font-size: 11px !important;
font-weight: 900 !important;
cursor: pointer !important;
}
.mini-cal-today {
padding: 0 8px !important;
min-width: auto !important;
}
.mini-cal-week {
display: grid !important;
grid-template-columns: repeat(7, 1fr) !important;
gap: 2px !important;
margin-bottom: 4px !important;
}
.mini-cal-week span {
font-size: 10px !important;
font-weight: 900 !important;
color: #9a9690 !important;
text-align: center !important;
}
.mini-cal-grid {
display: grid !important;
grid-template-columns: repeat(7, 1fr) !important;
gap: 3px !important;
}
.mini-cal-grid button {
height: 32px !important;
border: 0 !important;
border-radius: 9px !important;
background: transparent !important;
color: #6a6560 !important;
font-size: 13px !important;
font-weight: 800 !important;
cursor: pointer !important;
box-shadow: none !important;
position: relative !important;
}
.mini-cal-grid button:hover {
background: #f3f2ee !important;
}
.mini-cal-grid button.today {
background: #18B76A !important;
color: #fff !important;
box-shadow: 2px 3px 7px rgba(24,183,106,.28) !important;
}
.mini-cal-grid button.selected:not(.today) {
background: #fef3e2 !important;
color: #ba7517 !important;
box-shadow: none !important;
border: 2px solid #E8914F !important;
font-weight: 900 !important;
}
.mini-cal-grid button.selected.today {
background: #18B76A !important;
color: #fff !important;
}
.mini-cal-grid button.has-data::after {
content: "" !important;
position: absolute !important;
bottom: 3px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 3px !important;
height: 3px !important;
border-radius: 50% !important;
background: #185FA5 !important;
}
/* HK stats under calendar */
.hk-cal-stats {
background: #e2e1dc;
border-radius: 14px;
padding: 6px 8px;
box-shadow: 4px 6px 12px rgba(20,18,14,.11), -3px -3px 8px rgba(255,255,255,.64);
}
.hk-cal-stats-title {
font-size: 8px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
color: #9a9690;
margin-bottom: 4px;
}
.hk-cal-stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3px;
}
.hk-cal-stat {
background: #f3f2ee;
border-radius: 8px;
padding: 6px 8px;
box-shadow: 1px 2px 4px rgba(20,18,14,.07), -1px -1px 3px rgba(255,255,255,.60);
height: 54px;
display: flex;
flex-direction: column;
justify-content: center;
}
.hk-cal-stat-num {
font-size: 20px;
font-weight: 900;
line-height: 1;
color: #3d3935;
}
.hk-cal-stat-lbl {
font-size: 9px;
font-weight: 800;
color: #9a9690;
}
.hk-cal-stat.co .hk-cal-stat-num { color: #185FA5; }
.hk-cal-stat.wait .hk-cal-stat-num { color: #6a6560; }
.hk-cal-stat.done .hk-cal-stat-num { color: #18B76A; }
.page.list-page:has(.hk-page) {
overflow-y: auto;
overflow-x: hidden;
padding: 0 !important;
}
.hk-page {
max-width: 100%;
width: 100%;
margin: 0;
padding: 14px 24px 24px !important;
overflow-y: auto;
}
.hk-page-head {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.hk-page-head > div:first-child {
min-width: 220px;
}
.hk-page-sub {
margin-top: 2px;
color: #6a6560;
font-size: 11px;
font-weight: 700;
}
.hk-date-controls,
.hk-role-switch {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px;
border-radius: 14px;
background: #d6d4cf;
box-shadow: inset 1px 1px 3px rgba(20,18,14,.10), inset -1px -1px 2px rgba(255,255,255,.55);
}
.hk-date-controls button,
.hk-role-switch button {
height: 30px;
min-width: 32px;
border: 0;
border-radius: 10px;
background: #f3f2ee;
color: #1f2329;
box-shadow: 1px 2px 5px rgba(20,18,14,.10);
font-size: 11px;
font-weight: 900;
}
.hk-date-controls strong {
min-width: 104px;
text-align: center;
color: #1f2329;
font-size: 13px;
font-weight: 900;
}
.hk-role-switch {
margin-left: auto;
}
.hk-role-switch button {
min-width: 72px;
background: transparent;
color: #6a6560;
box-shadow: none;
}
.hk-role-switch button.active {
background: #f3f2ee;
color: #1f2329;
box-shadow: 1px 2px 5px rgba(20,18,14,.10);
}
.hk-sync-status {
color: #18B76A;
font-size: 11px;
font-weight: 900;
}
.hk-summary-row {
display: flex;
gap: 10px;
margin-top: 13px;
justify-content: flex-start;
flex-wrap: nowrap;
}
.hk-summary-card {
min-height: 58px;
min-width: 90px;
max-width: 130px;
flex: 1;
border-radius: 16px;
background: #e2e1dc;
box-shadow: 4px 6px 12px rgba(20,18,14,.11), -3px -3px 8px rgba(255,255,255,.64);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
padding: 8px 12px;
}
.hk-sum-num {
font-size: 24px;
font-weight: 900;
line-height: 1;
color: #1f2329;
}
.hk-sum-lbl {
font-size: 10px;
font-weight: 800;
color: #6a6560;
white-space: nowrap;
}
.hk-summary-checkout .hk-sum-num,
.hk-summary-ready .hk-sum-num { color: #18B76A; }
.hk-summary-stayover .hk-sum-num { color: #8B6A36; }
.hk-summary-waiting .hk-sum-num { color: #77736e; }
.hk-summary-done .hk-sum-num { color: #8a8680; }
.hk-summary-skip .hk-sum-num { color: #8a8680; }
.hk-section { margin-top: 0; }
.hk-front-board {
display: flex;
flex-direction: column;
gap: 10px;
}
.hk-main-section,
.hk-maid-section,
.hk-extra-section {
padding: 13px;
border-radius: 18px;
background: #e2e1dc;
box-shadow: 4px 6px 12px rgba(20,18,14,.11), -3px -3px 8px rgba(255,255,255,.64);
}
.hk-section-ready {
grid-row: span 2;
}
.hk-front-room-section,
.hk-extra-front,
.hk-front-done-section {
width: 100%;
}
.hk-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
color: #3d3935;
font-size: 13px;
font-weight: 900;
}
.hk-section-count {
color: #6a6560;
font-size: 11px;
font-weight: 800;
}
/* Grid/card rhythm reused from Dashboard's .tx-grid/.tx-card room-card
panel via the --hk-maint-card-w/h variables (exact Dashboard size,
see :root comment). justify-content:start, not center — see the
scoped front-room override below for the left-position match.
Status colours (hk-waiting/hk-ready/urgent/etc. below) and all HK
logic untouched. */
.hk-grid {
display: grid;
grid-template-columns: repeat(7, var(--hk-maint-card-w));
justify-content: start;
gap: var(--tx-grid-gap);
align-items: start;
}
.hk-task-card {
min-height: 80px;
height: 80px;
border: 0;
border-radius: 12px;
background: #f3f2ee;
color: #1f2329;
box-shadow: 3px 5px 10px rgba(20,18,14,.10), -2px -2px 6px rgba(255,255,255,.66);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
position: relative;
padding: 12px 8px;
transition: transform .1s, box-shadow .1s;
}
.hk-task-card:active {
transform: translateY(1px);
box-shadow: 1px 2px 5px rgba(20,18,14,.12);
}
.hk-room-num {
color: inherit;
font-size: 30px;
font-weight: 900;
line-height: 1;
}
.hk-task-meta {
color: inherit;
opacity: .78;
font-size: 10px;
font-weight: 900;
line-height: 1.2;
}
.hk-task-card.urgent::after {
content: "ด่วน";
position: absolute;
right: 6px;
top: 6px;
padding: 2px 5px;
border-radius: 999px;
background: #D65A52;
color: #fff;
font-size: 8px;
font-weight: 900;
}
.hk-note-dot {
position: absolute;
left: 7px;
bottom: 6px;
color: #6a6560;
font-size: 8px;
font-weight: 900;
}
.hk-waiting {
background: #18B76A;
color: #fff;
box-shadow: 3px 5px 10px rgba(24,183,106,.20), -2px -2px 6px rgba(255,255,255,.56);
}
.hk-ready {
background: #d9d8d3;
color: #6f6a64;
}
.hk-maid-board .hk-ready {
background: #18B76A;
color: #fff;
box-shadow: 3px 5px 10px rgba(24,183,106,.20), -2px -2px 6px rgba(255,255,255,.56);
}
.hk-maid-board .hk-waiting {
background: #f3f2ee;
color: #1f2329;
}
.hk-done {
background: #d9d8d3;
color: #6f6a64;
}
.hk-skip {
background: #f3f2ee;
color: #6f6a64;
opacity: .68;
pointer-events: auto;
}
.hk-task-card.urgent:not(.hk-ready) {
background: #D65A52;
color: #fff;
box-shadow: 3px 5px 10px rgba(214,90,82,.20), -2px -2px 6px rgba(255,255,255,.50);
}
.hk-empty {
min-height: 40px;
display: flex;
align-items: center;
color: #8a8680;
font-size: 12px;
font-weight: 700;
}
.hk-maid-board {
display: grid;
grid-template-columns: minmax(320px, 430px);
justify-content: center;
gap: 12px;
margin-top: 14px;
}
.hk-maid-board > .hk-section {
width: 100%;
max-width: 430px;
margin-left: auto;
margin-right: auto;
}
.hk-maid-ready-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.hk-maid-ready-list .hk-task-card {
min-height: 76px;
}
.hk-mini-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.hk-task-card.compact {
min-height: 70px;
gap: 3px;
}
.hk-task-card.compact .hk-room-num {
font-size: 24px;
}
.hk-extra-section {
max-width: none;
}
.hk-add-extra-btn {
min-height: 30px;
border: 0;
border-radius: 11px;
padding: 0 12px;
background: #18B76A;
color: #fff;
box-shadow: 2px 4px 8px rgba(24,183,106,.18), -1px -1px 4px rgba(255,255,255,.58);
font-size: 11px;
font-weight: 900;
}
.hk-add-extra-btn:disabled {
opacity: .48;
cursor: not-allowed;
}
.hk-extra-list {
display: grid;
gap: 10px;
}
.hk-extra-row {
width: 100%;
min-height: 58px;
border: 0;
border-radius: 16px;
background: #f3f2ee;
box-shadow: 2px 4px 8px rgba(20,18,14,.09), -1px -1px 4px rgba(255,255,255,.66);
color: #1f2329;
display: grid;
grid-template-columns: 150px minmax(0, 1fr) auto;
align-items: center;
gap: 0;
padding: 0;
text-align: left;
overflow: hidden;
}
.hk-extra-row.urgent {
background: #f8e2df;
}
.hk-extra-room {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 58px;
border-radius: 0;
background: #3F73D9;
box-shadow: none;
color: #fff;
font-size: 20px;
font-weight: 900;
cursor: pointer;
}
.hk-extra-detail {
min-width: 0;
font-size: 14px;
font-weight: 800;
overflow-wrap: anywhere;
padding: 10px 14px;
}
.hk-extra-status {
color: #6a6560;
font-size: 10px;
font-weight: 900;
padding: 0 12px;
}
.hk-extra-actions {
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
}
.hk-extra-actions button {
min-height: 38px;
border: 0;
border-radius: 12px;
background: #f3f2ee;
color: #1f2329;
box-shadow: 1px 2px 5px rgba(20,18,14,.10);
padding: 0 12px;
font-size: 11px;
font-weight: 900;
}
.hk-extra-actions button.delete {
color: #D65A52;
}
.hk-extra-actions .hk-restore-btn {
background: #FACC15 !important;
color: #8a7000 !important;
box-shadow: none;
}
.hk-extra-done-list {
margin-top: 10px;
}
.hk-modal-backdrop {
position: fixed;
inset: 0;
z-index: 90;
display: grid;
place-items: center;
padding: 20px;
background: rgba(31,35,41,.34);
}
.hk-modal {
width: min(390px, 100%);
height: auto;
min-height: 300px;
max-height: 330px;
padding: 18px;
border-radius: 20px;
background: #e2e1dc;
box-shadow: 9px 14px 30px rgba(20,18,14,.24), -3px -3px 12px rgba(255,255,255,.42);
position: relative;
}
.hk-modal-x {
position: absolute;
top: 12px;
right: 14px;
width: 34px;
height: 34px;
border: 0;
border-radius: 12px;
background: #f3f2ee;
color: #3d3935;
box-shadow: 1px 2px 5px rgba(20,18,14,.10);
font-size: 22px;
font-weight: 900;
}
.hk-modal p {
margin: 0;
color: #6a6560;
font-size: 11px;
font-weight: 900;
text-align: center;
}
.hk-modal h2 {
margin: 4px 0 4px;
color: #1f2329;
font-size: 46px;
line-height: 1;
text-align: center;
}
.hk-modal-info {
color: #6a6560;
font-size: 12px;
font-weight: 900;
text-align: center;
}
.hk-modal-actions {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-top: 14px;
}
.hk-action {
min-height: 44px;
border: 0;
border-radius: 13px;
background: #f3f2ee;
color: #1f2329;
box-shadow: 2px 4px 8px rgba(20,18,14,.12), -2px -2px 5px rgba(255,255,255,.65);
font-size: 13px;
font-weight: 900;
}
.hk-action:disabled {
opacity: .4;
box-shadow: none;
cursor: not-allowed;
}
.hk-action.ready { background: #18B76A; color: #fff; }
.hk-action.done { background: #18B76A; color: #fff; }
.hk-action.skip { background: #d9d8d3; color: #77736e; }
.hk-action.urgent { background: #D65A52; color: #fff; }
.hk-action.wait { background: #f3eadb; color: #9a5e19; }
.hk-field {
display: grid;
gap: 5px;
margin-top: 10px;
color: #6a6560;
font-size: 11px;
font-weight: 900;
}
.hk-field input {
width: 100%;
height: 40px;
border: 0;
border-radius: 13px;
background: #f3f2ee;
color: #1f2329;
box-shadow: inset 1px 1px 3px rgba(20,18,14,.10), inset -1px -1px 2px rgba(255,255,255,.55);
padding: 0 12px;
font: inherit;
}
.hk-field select {
width: 100%;
height: 40px;
border: 0;
border-radius: 13px;
background: #f3f2ee;
color: #1f2329;
box-shadow: inset 1px 1px 3px rgba(20,18,14,.10), inset -1px -1px 2px rgba(255,255,255,.55);
padding: 0 12px;
font: inherit;
}
.hk-undo-bar {
position: fixed;
z-index: 95;
left: 50%;
bottom: 18px;
transform: translateX(-50%);
width: min(420px, calc(100% - 28px));
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
border-radius: 16px;
background: #1f2329;
color: #fff;
box-shadow: 0 10px 24px rgba(20,18,14,.24);
}
.hk-undo-bar button {
border: 0;
background: transparent;
color: #82e7b2;
font-weight: 900;
}
.hk-undo-bar {
display: none !important;
}
@media (max-width: 720px) {
.hk-page {
padding: 12px 10px 18px !important;
}
.hk-summary-row {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hk-maid-board {
grid-template-columns: minmax(0, 430px);
}
.hk-maid-ready-list,
.hk-mini-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hk-extra-row {
grid-template-columns: 92px minmax(0, 1fr);
}
.hk-extra-actions {
grid-column: 1 / -1;
justify-content: stretch;
}
.hk-extra-actions button {
flex: 1;
}
}
/* ═══ MAINTENANCE PAGE ═══════════════════════════════════════════════ */
.maint-page { padding: 14px 24px 32px; overflow-y: auto; }
.maint-subtitle { font-size: 12px; color: #9a9690; font-weight: 700; }
.maint-back-btn {
height: 32px; padding: 0 14px; border: 0; border-radius: 10px;
background: #e2e1dc; color: #5a5650; font-size: 12px; font-weight: 800;
box-shadow: 2px 3px 7px rgba(20,18,14,.10), -1px -1px 4px rgba(255,255,255,.65);
cursor: pointer;
}
.maint-add-btn {
height: 34px; padding: 0 16px; border: 0; border-radius: 10px;
background: #18B76A; color: #fff; font-size: 12px; font-weight: 900; cursor: pointer;
}
/* Room grid — exact Dashboard room-card size AND left position,
reused via the --hk-maint-card-w/h and --hk-maint-left-pad
variables defined in :root (see comments there for the formulas).
justify-content:start (not center) + the extra left padding makes
room 102 land at the identical x-position as Dashboard's room 102,
instead of floating centered in Maintenance's own (wider) page.
Status colours/logic below (ac-overdue/soon/never) untouched. */
.maint-room-grid {
display: grid;
grid-template-columns: repeat(7, var(--hk-maint-card-w));
justify-content: start;
padding-left: var(--hk-maint-left-pad);
gap: var(--tx-grid-gap);
margin-bottom: 16px;
}
.maint-room-card {
width: var(--hk-maint-card-w); height: var(--hk-maint-card-h);
border: 0; border-radius: 18px; cursor: pointer;
background: #e2e1dc;
box-shadow: 3px 6px 14px rgba(20,18,14,.11), -2px -2px 7px rgba(255,255,255,.72);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
padding: 10px 8px; transition: transform .1s;
}
.maint-room-card:active { transform: translateY(1px); }
.maint-room-card.ac-overdue { background: #fde8e6; box-shadow: 3px 5px 10px rgba(214,90,82,.15), -2px -2px 6px rgba(255,255,255,.65); }
.maint-room-card.ac-soon { background: #fef3e2; }
.maint-room-card.ac-never { background: #f0efeb; }
.maint-room-num { font-size: 22px; font-weight: 900; color: #3d3935; line-height: 1; }
.maint-room-tag { font-size: 9px; font-weight: 800; color: #185FA5; background: #e6f0fb; border-radius: 6px; padding: 1px 5px; }
.maint-room-count { font-size: 10px; font-weight: 700; color: #6a6560; }
.maint-room-alert { font-size: 9px; font-weight: 800; color: #c0392b; }
.maint-room-alert.maint-room-alert-soon { color: #ba7517; }
/* Legend */
.maint-legend { display: flex; gap: 16px; margin-top: 8px; }
.legend-item { font-size: 11px; font-weight: 700; color: #6a6560; }
.ac-overdue-dot { color: #c0392b; }
.ac-soon-dot { color: #ba7517; }
.ac-never-dot { color: #9a9690; }
/* AC status row */
.maint-ac-row { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.maint-ac-card {
flex: 1; min-width: 180px; border-radius: 14px; padding: 12px 14px;
background: #e2e1dc;
box-shadow: 3px 5px 10px rgba(20,18,14,.10), -2px -2px 6px rgba(255,255,255,.65);
}
.maint-ac-card.maint-ac-overdue { background: #fde8e6; }
.maint-ac-card.maint-ac-soon { background: #fef3e2; }
.maint-ac-card.maint-ac-never { background: #f0efeb; }
.maint-ac-label { font-size: 11px; font-weight: 900; color: #3d3935; margin-bottom: 4px; }
.maint-ac-date { font-size: 13px; font-weight: 800; color: #5a5650; }
.maint-ac-days { font-size: 11px; color: #9a9690; font-weight: 700; }
.maint-ac-alert { font-size: 11px; font-weight: 900; color: #c0392b; margin-top: 4px; }
/* Form */
.maint-form-card {
background: #e2e1dc; border-radius: 16px; padding: 14px;
box-shadow: 3px 5px 10px rgba(20,18,14,.10), -2px -2px 6px rgba(255,255,255,.65);
margin-bottom: 14px;
}
.maint-form-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.maint-form-row label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 800; color: #6a6560; flex: 1; min-width: 120px; }
.maint-form-row input, .maint-form-row select {
height: 34px; border: 0; border-radius: 10px; padding: 0 10px;
background: #f3f2ee; font-size: 13px; font-weight: 700; color: #3d3935;
box-shadow: inset 1px 1px 3px rgba(20,18,14,.10), inset -1px -1px 2px rgba(255,255,255,.55);
}
.maint-form-actions { display: flex; gap: 8px; }
.maint-save-btn {
height: 34px; padding: 0 18px; border: 0; border-radius: 10px;
background: #18B76A; color: #fff; font-size: 12px; font-weight: 900; cursor: pointer;
}
.maint-cancel-btn {
height: 34px; padding: 0 14px; border: 0; border-radius: 10px;
background: #f3f2ee; color: #6a6560; font-size: 12px; font-weight: 800; cursor: pointer;
box-shadow: 1px 2px 5px rgba(20,18,14,.10);
}
/* Filter */
.maint-filter-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.maint-filter-btn {
height: 28px; padding: 0 12px; border: 0; border-radius: 9px;
background: #e2e1dc; color: #6a6560; font-size: 11px; font-weight: 800; cursor: pointer;
box-shadow: 1px 2px 4px rgba(20,18,14,.09), -1px -1px 3px rgba(255,255,255,.60);
}
.maint-filter-btn.active {
background: #3d3935; color: #f3f2ee;
box-shadow: inset 1px 1px 3px rgba(20,18,14,.20);
}
/* Records */
.maint-record-list { display: flex; flex-direction: column; gap: 10px; }
.maint-record-card {
position: relative;
background: var(--surface); border-radius: 16px; padding: 13px 16px 13px 18px;
box-shadow: var(--shadow-card);
overflow: hidden;
}
.maint-record-card::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
/* Semantic: open/pending repair = amber (blue is reserved for
selected/active/navigation), completed = green. */
background: var(--pending);
}
.maint-record-card.maint-record-done::before { background: var(--paid); }
.maint-record-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.maint-record-type { font-size: 12px; font-weight: 900; color: #3d3935; background: #ecebe7; border-radius: 8px; padding: 3px 10px; }
.maint-record-status { font-size: 10px; font-weight: 800; border-radius: 999px; padding: 2px 9px; }
.maint-record-status.done { color: #2f7a4f; background: #d9efe2; }
.maint-record-status.open { color: #b06a1f; background: #f6e9d6; }
.maint-record-date { font-size: 11px; font-weight: 700; color: #9a9690; margin-left: auto; }
.maint-delete-btn { border: 0; background: transparent; color: #D65A52; font-size: 11px; font-weight: 900; cursor: pointer; padding: 2px 4px; }
.maint-record-detail { font-size: 14px; font-weight: 700; color: #3d3935; margin-bottom: 6px; }
.maint-record-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11px; font-weight: 700; color: #6a6560; }
.maint-record-note { font-size: 11px; font-weight: 600; color: #8a857e; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(20,18,14,.06); }
/* Room-detail record actions — complete (primary green) + delete (secondary) */
.maint-record-actions {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 12px; flex-wrap: wrap; margin-top: 10px;
padding-top: 10px; border-top: 1px solid rgba(20,18,14,.06);
}
.maint-record-complete { display: flex; align-items: flex-end; gap: 8px; }
.maint-complete-lbl {
display: flex; flex-direction: column; gap: 4px;
font-size: 10px; font-weight: 700; color: #7a7470;
}
.maint-complete-date {
height: 32px; box-sizing: border-box; border: 0; border-radius: 9px;
background: #ecebe7; padding: 0 10px; font-size: 12px; font-weight: 600;
color: #3d3935; font-family: inherit;
box-shadow: inset 1px 1px 3px rgba(20,18,14,.10), inset -1px -1px 2px rgba(255,255,255,.55);
}
.maint-complete-date:focus {
outline: none;
box-shadow: inset 0 0 0 2px var(--primary-blue), inset 1px 1px 3px rgba(20,18,14,.10);
}
.maint-complete-btn {
height: 32px; padding: 0 14px; border: 0; border-radius: 10px;
background: var(--paid); color: #fff; font-size: 12px; font-weight: 800;
cursor: pointer; box-shadow: var(--shadow-button); white-space: nowrap;
transition: transform .12s;
}
.maint-complete-btn:active { transform: translateY(1px); }
/* Delete stays a low-emphasis, destructive-only text action */
.maint-record-actions .maint-delete-btn { margin-left: auto; }
.maint-empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 6px; padding: 36px 16px; text-align: center;
}
.maint-empty-icon { font-size: 28px; opacity: .7; }
.maint-empty-title { color: #6a6560; font-size: 14px; font-weight: 800; }
.maint-empty-hint { color: #9a9690; font-size: 12px; font-weight: 600; }
/* ── Maintenance room DETAIL — contained panel matching project surface ──
Wrap the detail content in the same #DAD8D2 rounded panel used by the
Dashboard room panel so it stops feeling like raw full-width bars.
─────────────────────────────────────────────────────────────────────── */
.maint-detail-page { overflow-y: auto !important; }
.maint-detail-shell {
background: #DAD8D2;
border-radius: 26px;
box-shadow: 2px 3px 8px rgba(118,112,104,.14);
padding: 22px 24px 26px;
display: flex;
flex-direction: column;
gap: 16px;
}
.maint-detail-header { margin-bottom: 0 !important; align-items: center !important; }
.maint-detail-header .page-title { font-size: 20px !important; font-weight: 900 !important; }
.maint-detail-sub {
font-size: 11px; font-weight: 700; color: #8a857e;
background: rgba(20,18,14,.06); border-radius: 999px; padding: 3px 11px;
}
/* View-only note (replaces the removed “+ บันทึกงาน” button in room detail) */
.maint-detail-note {
font-size: 11px; font-weight: 700; color: #9a9690;
background: rgba(20,18,14,.05); border-radius: 999px; padding: 5px 13px;
white-space: nowrap;
}
/* Larger, clearer record cards consistent with the project card rhythm */
.maint-detail-shell .maint-record-card { padding: 15px 18px 15px 20px; }
.maint-detail-shell .maint-record-detail { font-size: 15px; }
.maint-detail-shell .maint-filter-row { flex-wrap: wrap; gap: 6px; }
.maint-detail-shell .maint-empty { padding: 48px 16px; }
.maint-detail-shell .maint-empty-icon { font-size: 34px; }
/* Inner cards lift onto the panel surface */
.maint-detail-shell .maint-ac-card { background: var(--surface); box-shadow: var(--shadow-card); border-radius: 16px; }
.maint-detail-shell .maint-ac-card.maint-ac-overdue { background: #fbe4e1; }
.maint-detail-shell .maint-ac-card.maint-ac-soon { background: #fbefdb; }
.maint-detail-shell .maint-form-card { background: var(--surface); box-shadow: var(--shadow-card); border-radius: 16px; }
.maint-detail-shell .maint-ac-row { margin-bottom: 0; }
.maint-detail-shell .maint-filter-row { margin-bottom: 0; }
.maint-detail-shell .maint-filter-btn { background: var(--surface); }
.maint-detail-shell .maint-filter-btn.active { background: #3d3935; color: #f3f2ee; }
/* ═══ OPTION B — All 3 sections as floating cards on BG ════════════
Topbar card: same radius/shadow language as dash-left / dash-right
═══════════════════════════════════════════════════════════════════ */
.mc-topbar {
background: #DAD8D2 !important;
border-bottom: 0 !important;
border-radius: 20px !important;
/* Topbar has NO drop shadow. A downward shadow here projects into the
8px gap above the panels AND through the 14px horizontal gap between
.dash-left and .dash-right — that projection is what reads as an
"incomplete shadow" band between card 204 and the date card. The
topbar still floats visually thanks to its rounded corners plus the
matching background tone shared with the panels. */
box-shadow: none !important;
height: 52px !important;
margin: var(--topbar-gap) var(--page-x) 8px var(--page-x) !important;
padding: 0 14px !important;
display: flex !important;
align-items: center !important;
gap: 0 !important;
}
.tb-nav {
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 0 !important;
margin-left: var(--card-inset) !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.tb-nav-item {
height: 36px !important;
padding: 0 16px !important;
border: 0 !important;
border-radius: 12px !important;
background: #e2e1dc !important;
color: #6a6560 !important;
font-size: 11px !important;
font-weight: 900 !important;
letter-spacing: .04em !important;
cursor: pointer !important;
box-shadow: 4px 6px 12px rgba(20,18,14,.22), -2px -2px 6px rgba(255,255,255,.65) !important;
transition: background .15s, color .15s !important;
}
.tb-nav-item .tb-nav-label { color: #6a6560 !important; }
.tb-nav-item:hover { background: #ebeae5 !important; color: #3d3935 !important; }
.tb-nav-item:hover .tb-nav-label { color: #3d3935 !important; }
.tb-nav-item.active {
background: #3F73D9 !important;
color: #fff !important;
box-shadow: 4px 6px 13px rgba(20,18,14,.30), -2px -2px 7px rgba(255,255,255,.40) !important;
}
.tb-nav-item.active .tb-nav-label { color: #fff !important; }
.tb-nav-item.active::after { display: none !important; }
.tb-right {
margin-left: auto !important;
width: 334px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 0 !important;
}
.mc-user { display: flex; align-items: center; gap: 8px; }
.mc-avatar {
width: 30px !important; height: 30px !important; border-radius: 50% !important;
background: #185FA5 !important; color: #fff !important;
font-size: 12px !important; font-weight: 900 !important;
display: flex !important; align-items: center !important; justify-content: center !important;
box-shadow: 1px 2px 5px rgba(20,18,14,.15) !important;
}
.mc-user-name { font-size: 12px !important; font-weight: 900 !important; color: #3d3935 !important; }
.mc-user-role { font-size: 10px !important; font-weight: 700 !important; color: #9a9690 !important; }
.tb-icon {
height: 32px !important; padding: 0 14px !important; border: 0 !important;
border-radius: 10px !important; font-size: 11px !important; font-weight: 900 !important;
cursor: pointer !important;
background: #e2e1dc !important; color: #5a5650 !important;
box-shadow: 2px 3px 7px rgba(20,18,14,.10), -1px -1px 4px rgba(255,255,255,.65) !important;
}
.tb-icon.green { background: #18B76A !important; color: #fff !important; }
.tb-icon.print { background: #e2e1dc !important; color: #3d3935 !important; }
.tb-icon.red { background: #e2e1dc !important; color: #3d3935 !important; }
/* ═══ HK FRONT — 41 rooms new layout ══════════════════════════════ */
.hk-card-vacant {
background: #E9E6E0 !important;
box-shadow: 2px 3px 5px rgba(20,18,14,.09), -1px -1px 3px rgba(255,255,255,.65) !important;
cursor: default !important;
justify-content: center !important;
align-items: center !important;
}
.hk-room-num-vacant {
font-size: 16px !important;
font-weight: 900 !important;
color: #b8b6b0 !important;
}
.hk-card-done {
background: #9A9890 !important;
box-shadow: 2px 3px 5px rgba(20,18,14,.12) !important;
cursor: pointer !important;
justify-content: center !important;
align-items: center !important;
gap: 4px !important;
}
.hk-room-num-done {
font-size: 16px !important;
font-weight: 900 !important;
color: #fff !important;
}
.hk-task-done-label {
font-size: 9px !important;
font-weight: 800 !important;
color: rgba(255,255,255,.75) !important;
}
/* HK grid card size + left position — exact Dashboard .tx-card size
AND room-102 x-position, reused via the --hk-maint-card-w/h and
--hk-maint-left-pad variables (see :root comments for formulas).
justify-content:start, plus padding-left makes up the difference
between Dashboard's chain (page-x 16 + panel-pad 14 + card-inset)
and HK's own chain (.hk-page's own 24px page padding — 8px more
than Dashboard's page-x — plus this section's existing 13px panel
padding), so room 102 lands at the same x as Dashboard's room 102
instead of floating centered in HK's own (different-width) panel.
Live-measured and confirmed pixel-identical (39.421875px from the
window's left edge on both pages) — not a guessed number. Room
number centered because the card mainly represents room identity
here. Status colours/logic (hk-waiting/hk-ready/urgent/vacant/done
etc.) are untouched — only shape/spacing/alignment/position are
shared. */
.hk-front-room-section .hk-grid {
grid-template-columns: repeat(7, var(--hk-maint-card-w)) !important;
justify-content: start !important;
padding-left: calc(var(--hk-maint-left-pad) - 21px) !important;
}
.hk-front-room-section .hk-task-card {
width: var(--hk-maint-card-w) !important;
height: var(--hk-maint-card-h) !important;
min-height: 0 !important;
border-radius: 18px !important;
box-shadow: 3px 6px 14px rgba(20,18,14,.11), -2px -2px 7px rgba(255,255,255,.72) !important;
padding: 8px 6px !important;
align-items: center !important;
justify-content: center !important;
}
.hk-front-room-section .hk-room-num {
font-size: 19px !important;
}
.hk-front-room-section .hk-task-meta {
font-size: 9px !important;
}
/* ════════════════════════════════════════════════════════════════
"HK" tab — Dashboard-styled room cards, Housekeeping logic/status.
Reuses the same --hk-maint-card-w/h/left-pad variables (exact
Dashboard size + position, see :root comments) since this page
shares the identical .hk-page chrome (24px page padding + 13px
section padding) as the Housekeeping tab. No right panel yet, per
instruction — size still matches Dashboard regardless.
Colours below are NEW, dedicated classes (hk-skin-*) — they mirror
Housekeeping's own existing status colours (.hk-active/.hk-ready-
front/.hk-urgent/.hk-skip/.hk-card-done/.hk-card-vacant) one-to-
one, just renamed so they never collide with or get confused for
Dashboard's own financial-status classes (.tx-card.paid/.due/
.broken/.comp), which remain completely untouched. */
.tx-grid.hk-skin-grid {
grid-template-columns: repeat(7, var(--hk-maint-card-w)) !important;
justify-content: start !important;
padding-left: calc(var(--hk-maint-left-pad) - 21px) !important;
gap: var(--tx-grid-gap) !important;
}
.hk-skin-grid .tx-card-wrap {
width: var(--hk-maint-card-w) !important;
height: var(--hk-maint-card-h) !important;
max-width: none !important;
}
.hk-skin-grid .tx-card {
width: 100% !important;
height: 100% !important;
border-radius: 18px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
box-shadow: 3px 6px 14px rgba(20,18,14,.11), -2px -2px 7px rgba(255,255,255,.72) !important;
}
.hk-skin-grid .tx-room.hk-skin-num {
position: static !important;
font-size: 19px !important;
font-weight: 900 !important;
}
.hk-skin-meta, .hk-skin-done-label {
font-size: 9px !important;
font-weight: 800 !important;
opacity: .85 !important;
}
/* Status colours — one-to-one match with Housekeeping's own:
WAITING→.hk-active (green), READY→.hk-ready-front (grey),
URGENT→.hk-urgent (red, overrides all), SKIP→.hk-skip (dimmed),
DONE→.hk-card-done (dark grey), no-task→.hk-card-vacant (pale). */
.tx-card.hk-skin-waiting { background: #18B76A !important; color: #fff !important; }
.tx-card.hk-skin-ready { background: #c8c7c2 !important; color: #6a6560 !important; }
.tx-card.hk-skin-urgent { background: #D65A52 !important; color: #fff !important; }
.tx-card.hk-skin-skip { background: #e2e1dc !important; color: #b0aca7 !important; opacity: .38 !important; pointer-events: none !important; }
.tx-card.hk-skin-done { background: #9A9890 !important; color: #fff !important; cursor: pointer !important; }
.tx-card.hk-skin-vacant { background: #E9E6E0 !important; color: #b8b6b0 !important; cursor: default !important; }
/* Right panel stat cards ใหญ่ขึ้น */
.hk-cal-stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.hk-cal-stat {
background: #f3f2ee;
border-radius: 10px;
padding: 8px 10px;
box-shadow: 1px 2px 4px rgba(20,18,14,.07), -1px -1px 3px rgba(255,255,255,.60);
height: 64px;
display: flex;
flex-direction: column;
justify-content: center;
}
.hk-cal-stat-num {
font-size: 24px;
font-weight: 900;
line-height: 1;
color: #3d3935;
}
.hk-cal-stat-lbl {
font-size: 9px;
font-weight: 800;
color: #9a9690;
margin-top: 3px;
}
.hk-cal-stat.co .hk-cal-stat-num { color: #185FA5; }
.hk-cal-stat.wait .hk-cal-stat-num { color: #6a6560; }
.hk-cal-stat.done .hk-cal-stat-num { color: #18B76A; }
/* ═══ Dashboard room card — status bar redesign ══════════════════════ */
.tx-card.status-bar-card {
background: #e2e1dc !important;
color: #2a2825 !important;
padding: 0 !important;
}
.tx-card.status-bar-card * {
color: inherit !important;
}
.tx-card.status-bar-card .tx-room {
position: absolute !important;
top: 12px !important;
left: 14px !important;
font-size: 19px !important;
font-weight: 900 !important;
color: #2a2825 !important;
}
.tx-card.status-bar-card .tx-tag.inv-status {
position: absolute !important;
top: 12px !important;
right: 14px !important;
left: auto !important;
min-width: 34px !important;
height: 19px !important;
line-height: 19px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 6px !important;
padding: 0 8px !important;
font-size: 8px !important;
font-weight: 900 !important;
color: #fff !important;
}
.tx-card.status-bar-card .tx-tag.inv-number { background: #3F73D9 !important; }
.tx-card.status-bar-card .tx-tag.waiting-inv { background: #E8914F !important; }
.tx-card.status-bar-card .tx-guest {
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: 30px !important;
bottom: 36px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
padding: 0 8px !important;
font-size: 19px !important;
font-weight: 800 !important;
color: #423e38 !important;
overflow: hidden !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
}
.tx-card.status-bar-card .tx-divider { display: none !important; }
.tx-card.status-bar-card .tx-foot.status-bar {
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
top: auto !important;
height: 36px !important;
border-radius: 0 0 14px 14px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 14px !important;
}
.tx-card.status-bar-card .tx-foot.status-bar.paid { background: var(--paid) !important; }
.tx-card.status-bar-card .tx-foot.status-bar.due,
.tx-card.status-bar-card .tx-foot.status-bar.partial { background: var(--pending) !important; }
.tx-card.status-bar-card .tx-foot.status-bar .tx-night,
.tx-card.status-bar-card .tx-foot.status-bar .tx-due {
color: #fff !important;
font-size: 15px !important;
font-weight: 900 !important;
}
/* ═══ UI Polish — consistency & shadow fixes ════════════════════════
1. Topbar buttons: uniform border-radius so LOCK/PRINT/LOGOUT match
2. Colored block-totals: equal shadow on cashnavy / red / send
3. Status bar separator: subtle top border for visual depth
4. Panel shadows: replace hard neumorphic 2-layer shadow with soft
natural downward shadow — removes hard edge-lines on panel sides
5. Topbar button shadow: softer, horizontal-spread so sides don't
look like a hard line against the topbar background
═══════════════════════════════════════════════════════════════════ */
/* 1. Uniform topbar button radius */
.tb-nav-item, .tb-icon, .act, .pbtn,
.popup-x, .dt-step, .shift-today, .mini-cal-actions button {
border-radius: 12px !important;
}
/* 2. Consistent shadow on all colored summary blocks */
.block-total.cashnavy,
.block-total.red,
.block-total.send {
box-shadow: 0 3px 8px rgba(31,35,41,.18), 0 1px 2px rgba(31,35,41,.10) !important;
}
/* 3. Subtle separator between card body and status bar */
.tx-card.status-bar-card .tx-foot.status-bar {
border-top: 1px solid rgba(255,255,255,0.22) !important;
}
/* 4. Panel drop shadow — soft, single direction, NO upper-left white
glow. Rationale for each choice:
• Soft (2px 3px 8px .14): a stronger value (like 0 4px 16px .18)
leaks through the 14px horizontal gap between .dash-left and
.dash-right, producing a visible vertical shadow-seam at the top
that reads as an "incomplete shadow" between card 204 and the
date card.
• No white glow: the -2px -2px 6px .55 highlight on .dash-right
projects up-left into the same 14px gap, brightening a narrow
strip that ends abruptly at the gap edges — also reads as an
incomplete edge.
Right/bottom padding is 22px (not var(--panel-pad)=14px) so the
`.tx-card-wrap::after` rear pseudo-shadow (translate(6,6) + blur(5)
≈ 18px reach) on the last-column/last-row cards fades fully before
.dash-left's overflow:hidden clips it. */
.dash-left,
.dash-right {
background: #DAD8D2 !important;
box-shadow: 2px 3px 8px rgba(118,112,104,.14) !important;
padding: 14px 22px 22px 14px !important;
}
/* 5. Topbar buttons — diffuse shadow, sides fade into topbar bg */
.tb-nav-item, .tb-icon, .act, .pbtn,
.popup-x, .dt-step, .shift-today, .mini-cal-actions button {
box-shadow:
0 2px 6px rgba(0,0,0,.10),
0 1px 2px rgba(0,0,0,.06) !important;
}
/* 6. Room cards — more visible shadow so card edge blends into panel */
.tx-card {
box-shadow:
0 2px 8px rgba(118,112,104,.18),
0 1px 3px rgba(118,112,104,.10) !important;
}
/* ═══ MiniCalendar — collapsible state ════════════════════════════ */
.mini-cal.mini-cal-collapsed {
display: flex !important;
cursor: pointer !important;
transition: transform .12s, box-shadow .12s !important;
padding: 8px !important;
}
.mini-cal-collapsed:active {
transform: translateY(1px) !important;
}
.mini-cal-collapsed-field {
position: relative !important;
width: 100% !important;
height: 36px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 10px !important;
font-size: 17px !important;
font-weight: 900 !important;
letter-spacing: .02em !important;
}
.mini-cal-collapsed-field.is-today {
background: #18B76A !important;
color: #fff !important;
box-shadow: 2px 3px 7px rgba(24,183,106,.28) !important;
}
.mini-cal-collapsed-field.is-other {
background: #E8914F !important;
color: #fff !important;
box-shadow: 2px 3px 7px rgba(232,145,79,.28) !important;
}
.mini-cal-collapse-btn {
height: 26px !important;
min-width: 26px !important;
border: 0 !important;
border-radius: 9px !important;
background: #f3f2ee !important;
box-shadow: 1px 2px 4px rgba(20,18,14,.10), -1px -1px 3px rgba(255,255,255,.65) !important;
color: #6a6560 !important;
font-size: 11px !important;
font-weight: 900 !important;
cursor: pointer !important;
}
/* ═══ MiniCalendar — floating overlay popover (does not push layout) ══ */
.mini-cal-anchor {
position: relative !important;
z-index: 1 !important;
}
.mini-cal-scrim {
position: fixed !important;
inset: 0 !important;
background: rgba(31,35,41,.18) !important;
z-index: 998 !important;
}
.mini-cal-popover {
position: absolute !important;
top: calc(100% + 6px) !important;
left: 0 !important;
right: 0 !important;
z-index: 999 !important;
box-shadow: 6px 10px 24px rgba(20,18,14,.22), -3px -3px 10px rgba(255,255,255,.55) !important;
}
/* MiniCalendar embedded in the Transactions date bar (clickable date):
the bar shows a SINGLE calendar pill — no prev/next/today siblings. */
/* The bar itself carries .glass (overflow:hidden) which would clip the
calendar dropdown to the 38px-tall bar. Let the popover escape. */
.dt-bar.dt-bar-cal { overflow: visible !important; }
/* Single-column row so the pill fills the bar cleanly on its own. */
.dt-bar.dt-bar-cal .dt-row { grid-template-columns: 1fr !important; }
.dt-bar .mini-cal-anchor { align-self: center !important; }
.dt-bar .mini-cal.mini-cal-collapsed {
background: transparent !important;
box-shadow: none !important;
border-radius: 10px !important;
padding: 0 !important;
width: 100% !important;
}
.dt-bar .mini-cal-collapsed-field {
height: 38px !important;
font-size: 15px !important;
padding: 0 14px !important;
}
/* Hide the 📅 affordance on the Transactions pill — the whole pill is
clickable; the icon just crowds the date text and adds no meaning. */
.dt-bar .mini-cal-collapsed-field::after {
content: none !important;
display: none !important;
}
/* The popover needs the app's card surface (the collapsed card lost it above) */
.dt-bar .mini-cal.mini-cal-popover {
background: var(--surface) !important;
border-radius: 16px !important;
padding: 14px !important;
/* The pill is narrow (~150px). Don't pin the popover to that width —
grow it leftward from the right edge of the pill to a comfortable
calendar size. */
left: auto !important;
right: 0 !important;
width: 300px !important;
z-index: 1000 !important;
}
/* Popover header — keep "July 2026" on one line, buttons on the right. */
.dt-bar .mini-cal.mini-cal-popover .mini-cal-head {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
margin-bottom: 8px !important;
}
.dt-bar .mini-cal.mini-cal-popover .mini-cal-title {
font-size: 14px !important;
font-weight: 800 !important;
white-space: nowrap !important;
}
.dt-bar .mini-cal.mini-cal-popover .mini-cal-actions {
display: flex !important;
gap: 4px !important;
flex-shrink: 0 !important;
}
.dt-bar .mini-cal.mini-cal-popover .mini-cal-actions button {
width: 28px !important;
height: 28px !important;
padding: 0 !important;
border-radius: 8px !important;
}
/* Weekday row — even columns, readable spacing. */
.dt-bar .mini-cal.mini-cal-popover .mini-cal-week {
display: grid !important;
grid-template-columns: repeat(7, 1fr) !important;
gap: 3px !important;
margin-bottom: 6px !important;
font-size: 11px !important;
color: var(--text-secondary) !important;
text-align: center !important;
}
.dt-bar .mini-cal.mini-cal-popover .mini-cal-week > span {
padding: 4px 0 !important;
}
/* Date grid — 7 equal columns, taller cells so numbers don't crowd. */
.dt-bar .mini-cal.mini-cal-popover .mini-cal-grid {
display: grid !important;
grid-template-columns: repeat(7, 1fr) !important;
gap: 3px !important;
}
.dt-bar .mini-cal.mini-cal-popover .mini-cal-grid button,
.dt-bar .mini-cal.mini-cal-popover .mini-cal-grid > span {
height: 32px !important;
min-width: 0 !important;
padding: 0 !important;
font-size: 12px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* ═══ Expense placeholder — no border/line ════════════════════════ */
.exp-row.exp-placeholder {
box-shadow: none !important;
background: transparent !important;
}
/* ═══ Expense item rows — plain data row, not raised card ═════════ */
.exp-row:not(.exp-placeholder) {
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 6px 4px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
/* ═══ Expense item row typography — match INVOICE/NO INVOICE data-row family ═══ */
.exp-cat {
font-size: 9px !important;
font-weight: 400 !important;
color: #8a8680 !important;
}
.exp-detail {
font-size: 9px !important;
font-weight: 400 !important;
color: #8a8680 !important;
}
.exp-amt {
font-size: 9px !important;
font-weight: 600 !important;
color: #3d3935 !important;
}
/* ════════════════════════════════════════════════════════════════
"HK" tab — true Dashboard shell (.page.dash > .dash-body.hk-board).
LEFT = .dash-left with the 41-room hk-skin grid; RIGHT = .dash-right
(340px, --right-panel-w) holding the FRONT/MAID toggle, งานเพิ่มเติม
and เสร็จแล้ว. Everything is scoped under .hk-board / .hk-board-right
so Dashboard, Maintenance and the HOUSEKEEPING tab stay untouched.
════════════════════════════════════════════════════════════════ */
/* The grid now lives in the REAL .dash-left, so it must reproduce
Dashboard's grid mechanics EXACTLY — not the old hk-page geometry:
• columns = repeat(7, 1fr) (= 204.86px tracks), NOT fixed 186px, so
the card sits centred in its track and the visible card-to-card gap
matches Dashboard's ~30.84px (12px gap + 2×9.43 inset) instead of a
packed 12px.
• rows pinned to --hk-maint-card-h so the global
.tx-grid{rows:repeat(7,1fr);height:100%} rule can't stretch them.
• padding 0 / gap 12 (--tx-grid-gap) = Dashboard's computed values.
Room 102 still lands at 39.42 (16 page-x + 14 panel-pad + 9.43 inset),
the inset coming from centring the 186px card in the 1fr track — the
same way Dashboard does it. */
.hk-board .tx-grid.hk-skin-grid {
grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
grid-template-rows: repeat(6, var(--hk-maint-card-h)) !important;
grid-auto-rows: var(--hk-maint-card-h) !important;
justify-content: normal !important;
justify-items: stretch !important;
align-content: start !important;
height: auto !important;
padding: 0 !important;
padding-left: 0 !important;
gap: var(--tx-grid-gap) !important;
}
/* MAID left-panel section grids: identical columns/card sizing to the board
above, but rows FIT the section's content (not the fixed 6-row board
height) so the C/O / รอ / เสร็จ sections can stack. Card size, gap, and
chrome are inherited unchanged — only the reserved row count differs. */
.hk-board .hk-maid-section-grid.tx-grid.hk-skin-grid {
grid-template-rows: none !important;
}
/* Wrapper: 186px wide, capped + centred in the 1fr track (= Dashboard's
width:100%/max-width:186 + centring). Height = --hk-maint-card-h. */
.hk-board .hk-skin-grid .tx-card-wrap {
width: 100% !important;
max-width: var(--hk-maint-card-w) !important;
height: var(--hk-maint-card-h) !important;
justify-self: center !important;
}
/* Card chrome = Dashboard's .tx-grid .tx-card exactly: 14px radius +
inset bevel (NOT the old hk drop shadow / 18px radius). The soft 3D
rear shadow comes free from the shared .tx-card-wrap::after. Keep the
hk-skin flex centring so the room number stays centred. */
.hk-board .hk-skin-grid .tx-card {
border-radius: 14px !important;
padding: 10px !important;
box-shadow:
inset 2px 2px 3px var(--bevel-light),
inset -3px -3px 4px var(--bevel-dark) !important;
}
.hk-board .tx-card-wrap:active .tx-card {
box-shadow:
inset 1px 1px 2px var(--bevel-light),
inset -2px -2px 3px var(--bevel-dark) !important;
}
/* Empty room matches Dashboard's empty card colour (#E2E1DC) instead of
the old cream #E9E6E0; status colours (waiting/ready/urgent/skip/done)
keep their Housekeeping hues, now wearing the Dashboard chrome above. */
.hk-board .tx-card.hk-skin-vacant {
background: #E2E1DC !important;
}
/* Right panel: vertical stack — override Dashboard's 2-col card grid
while keeping the .dash-right panel chrome (bg / radius / shadow). */
.dash-right.hk-board-right {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
}
.dash-right.hk-board-right > * {
grid-column: auto !important;
width: 100% !important;
}
.hk-board-switch {
display: flex !important;
width: 100%;
}
.hk-board-switch button { flex: 1; }
.hk-board-right .hk-section { margin-top: 0 !important; }
/* ════════════════════════════════════════════════════════════════
Visual Refactor — appended 2026-07-01
Covers: HK skin colors, HK right panel summary, Maintenance
dashboard layout, Transactions panel, Login card balance,
Room action popup size, Dashboard financial typography.
════════════════════════════════════════════════════════════════ */
/* ── HK skin card colors — improved readability ─────────────────
WAITING = muted green (not full bright green)
READY = soft warm gray (C/O waiting)
URGENT = red strip/badge only; kept as-is (full card is spec)
SKIP = dimmed neutral, still readable
DONE = medium gray, readable
VACANT = warm neutral matching Dashboard empty card, fully readable
─────────────────────────────────────────────────────────────── */
.tx-card.hk-skin-waiting {
/* Use the shared system green (--paid #18B76A) so HK waiting/active rooms
match Dashboard green, Maintenance-completed green, and success buttons —
one green family, no separate HK shade. */
background: var(--paid) !important;
color: #fff !important;
}
.tx-card.hk-skin-ready {
background: #d6d4cf !important;
color: #5a5651 !important;
}
.tx-card.hk-skin-urgent {
background: #c94040 !important;
color: #fff !important;
}
.tx-card.hk-skin-skip {
background: #d6d4cf !important;
color: #9a9690 !important;
opacity: .55 !important;
}
.tx-card.hk-skin-done {
background: #8a8880 !important;
color: #fff !important;
}
.tx-card.hk-skin-vacant {
background: #E2E1DC !important;
color: #3d3935 !important;
cursor: default !important;
}
/* Room number inside HK skin: always readable */
.hk-skin-grid .tx-room.hk-skin-num,
.hk-board .hk-skin-grid .tx-room.hk-skin-num {
color: inherit !important;
font-size: 17px !important;
font-weight: 800 !important;
}
.tx-card.hk-skin-vacant .tx-room,
.tx-card.hk-skin-vacant .hk-skin-num {
color: #3d3935 !important;
font-weight: 800 !important;
opacity: 1 !important;
}
/* ── Housekeeping right panel — calendar + summary ──────────────
.hk-board-right already uses flex column; these add the new
summary block and keep the MiniCalendar anchor tidy.
─────────────────────────────────────────────────────────────── */
.dash-right.hk-board-right {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
overflow-y: auto !important;
/* Stack sections top-down by content — do NOT inherit .dash-right's
space-between, which spreads the sections apart to fill the panel.
When extras grow, the done section is pushed down naturally. */
justify-content: flex-start !important;
align-content: flex-start !important;
}
.dash-right.hk-board-right .mini-cal-anchor {
width: 100% !important;
}
.hk-board-summary {
background: #e2e1dc;
border-radius: 14px;
box-shadow: 3px 5px 10px rgba(20,18,14,.10), -2px -2px 5px rgba(255,255,255,.65);
padding: 10px 12px;
}
.hk-board-summary-title {
font-size: 10px;
font-weight: 800;
color: #9a9690;
text-transform: uppercase;
letter-spacing: .04em;
margin-bottom: 8px;
}
.hk-board-summary-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7px;
}
.hk-sum-card {
background: #d6d4cf;
border-radius: 10px;
box-shadow: inset 1px 1px 3px rgba(20,18,14,.10), inset -1px -1px 2px rgba(255,255,255,.55);
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 3px;
min-height: 60px;
justify-content: center;
}
.hk-sum-num {
font-size: 26px;
font-weight: 900;
color: #3d3935;
line-height: 1;
font-family: var(--font-mono, monospace);
}
.hk-sum-lbl {
font-size: 9px;
font-weight: 700;
color: #9a9690;
}
.hk-sum-card.hk-sum-pending .hk-sum-num { color: #c4823a; }
.hk-sum-card.hk-sum-co .hk-sum-num { color: #185fa5; }
.hk-sum-card.hk-sum-done .hk-sum-num { color: #3a9460; }
/* ── Maintenance — Dashboard-like 2-panel layout ────────────────
.maint-dash-page reuses .page.dash so the .dash-body grid fires.
Room cards use .tx-card inside .tx-card-wrap for pixel parity.
─────────────────────────────────────────────────────────────── */
.maint-dash-page { overflow: hidden !important; padding-top: 0 !important; }
.maint-room-tx-grid {
grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
grid-template-rows: repeat(6, minmax(0, 1fr)) !important;
gap: 12px !important;
height: 100% !important;
}
.maint-tx-card {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 3px !important;
position: relative !important;
cursor: pointer !important;
background: #e2e1dc !important;
border-radius: 14px !important;
width: 100% !important;
height: 100% !important;
box-shadow: inset 2px 2px 3px rgba(255,255,255,.72), inset -3px -3px 4px rgba(118,112,104,.18) !important;
}
.maint-tx-card .tx-room {
position: static !important;
font-size: 17px !important;
font-weight: 800 !important;
color: #3d3935 !important;
}
.maint-tx-card.maint-ac-overdue-card { background: #f0d4d0 !important; }
.maint-tx-card.maint-ac-overdue-card .tx-room { color: #9a2a20 !important; }
.maint-tx-card.maint-ac-soon-card { background: #f0e8d4 !important; }
.maint-tx-card.maint-ac-soon-card .tx-room { color: #7a5820 !important; }
.maint-tx-card.maint-has-issue-card { background: #dce0f0 !important; }
.maint-tx-card.maint-has-issue-card .tx-room { color: #2a3a7a !important; }
.maint-tx-tag {
font-size: 7px;
font-weight: 800;
color: #7a7470;
line-height: 1;
}
.maint-tx-count {
position: absolute !important;
top: 6px !important;
right: 7px !important;
font-size: 8px !important;
font-weight: 800 !important;
color: #185fa5 !important;
}
/* Clean maintenance status dot on the room card (replaces the bare "1"
number badge). Amber = has open repair, green = only completed repair.
Small, inset, top-right — a proper indicator, not floating noise. */
.maint-tx-dot {
position: absolute !important;
top: 8px !important;
right: 8px !important;
width: 8px !important;
height: 8px !important;
border-radius: 999px !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), 0 1px 2px rgba(20,18,14,.18) !important;
}
.maint-tx-dot.open { background: var(--pending) !important; }
.maint-tx-dot.done { background: var(--paid) !important; }
.maint-tx-alert {
font-size: 8px;
font-weight: 900;
color: #c94040;
}
/* Maintenance right panel */
.maint-right-panel {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
overflow-y: auto !important;
/* Don't inherit .dash-right's space-between; keep the first card at the top
and stack sections by content, aligned with the other pages' panels. */
justify-content: flex-start !important;
align-content: flex-start !important;
}
.maint-rp-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.maint-rp-title {
font-size: 14px;
font-weight: 800;
color: #3d3935;
}
.maint-rp-subtitle {
font-size: 11px;
font-weight: 700;
color: #9a9690;
}
.maint-rp-add-btn {
height: 32px;
padding: 0 14px;
border: 0;
border-radius: 10px;
background: var(--primary-blue);
color: #fff;
font-size: 12px;
font-weight: 700;
cursor: pointer;
box-shadow: var(--shadow-button);
}
.maint-rp-add-btn:disabled { opacity: .4; cursor: not-allowed; }
.maint-rp-hint {
font-size: 11px;
color: #9a9690;
text-align: center;
padding: 8px 0;
}
.maint-rp-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7px;
}
.maint-stat-card {
background: #d6d4cf;
border-radius: 10px;
box-shadow: inset 1px 1px 3px rgba(20,18,14,.10), inset -1px -1px 2px rgba(255,255,255,.55);
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 3px;
min-height: 58px;
justify-content: center;
}
.maint-stat-num {
font-size: 24px;
font-weight: 900;
line-height: 1;
color: #3d3935;
font-family: var(--font-mono, monospace);
}
.maint-stat-lbl {
font-size: 9px;
font-weight: 700;
color: #9a9690;
}
.maint-stat-card.maint-stat-open .maint-stat-num { color: #c4823a; }
.maint-stat-card.maint-stat-done .maint-stat-num { color: #3a9460; }
.maint-stat-card.maint-stat-rooms { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
.maint-stat-card.maint-stat-rooms .maint-stat-num { font-size: 20px; }
.maint-legend-rp {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 4px;
}
.maint-legend-item {
font-size: 9px;
font-weight: 600;
color: #7a7470;
padding: 3px 7px;
border-radius: 6px;
}
.maint-legend-item.maint-ac-overdue-card { color: #9a2a20; background: #f5e0de; }
.maint-legend-item.maint-ac-soon-card { color: #7a5820; background: #f5eedc; }
.maint-legend-item.maint-has-issue-card { color: #2a3a7a; background: #dce0f0; }
/* ── Maintenance MAIN right-panel: create form + open/done job lists ──
Create repair work directly from the right panel and attach to a room.
Matches the Dashboard/HK right-panel surface + radius + shadow.
──────────────────────────────────────────────────────────────────── */
.maint-rp-add-btn.open { background: var(--danger); }
/* Maintenance right-panel create form — FIXED & STABLE (item 4).
The form keeps a consistent structure and never pushes the stats/job
lists off screen: the fields grid has a capped height with internal
scroll, while the Save/Cancel actions stay pinned and always visible.
The 2-col grid rhythm no longer shifts when the conditional ตัวแอร์
field appears (it is full-width, so column pairing is preserved). */
.maint-rp-form {
background: var(--surface);
border-radius: 16px;
box-shadow: var(--shadow-card);
padding: 12px;
display: flex;
flex-direction: column;
gap: 10px;
flex: none; /* never stretch/collapse with sibling content */
}
.maint-rp-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: min-content; /* rows keep their natural height, no stretch */
align-content: start;
gap: 8px;
max-height: 300px; /* stable cap — fields scroll, actions stay */
overflow-y: auto;
overflow-x: hidden;
padding-right: 2px;
}
.maint-rp-fld {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 10px;
font-weight: 700;
color: #7a7470;
min-width: 0; /* prevent grid blowout / horizontal shift */
}
.maint-rp-fld-full { grid-column: 1 / -1; }
.maint-rp-fld select,
.maint-rp-fld input {
height: 34px;
min-height: 34px;
width: 100%;
box-sizing: border-box;
border: 0;
border-radius: 10px;
background: #ecebe7;
box-shadow: inset 1px 1px 3px rgba(20,18,14,.10), inset -1px -1px 2px rgba(255,255,255,.55);
padding: 0 10px;
font-size: 12px;
font-weight: 600;
color: #3d3935;
font-family: inherit;
}
.maint-rp-fld input::placeholder { color: #b3afa8; font-weight: 500; }
.maint-rp-fld select.is-empty { color: #b3afa8; font-weight: 500; }
.maint-rp-fld-bare { gap: 0; }
/* Focus ring stays INSIDE the control (inset), so it never spills past the
field/card boundary the way the browser's default outline does. */
.maint-rp-fld select:focus,
.maint-rp-fld input:focus {
outline: none;
box-shadow: inset 0 0 0 2px var(--primary-blue), inset 1px 1px 3px rgba(20,18,14,.10);
}
/* Multi-room picker trigger — visually mirrors the .maint-rp-fld select
field so the room row keeps the same rhythm as the rest of the form,
but opens the MaintRoomPicker popup instead of a native dropdown. */
.maint-rp-room-btn {
height: 34px;
width: 100%;
box-sizing: border-box;
border: 0;
border-radius: 10px;
background: #ecebe7;
box-shadow: inset 1px 1px 3px rgba(20,18,14,.10), inset -1px -1px 2px rgba(255,255,255,.55);
padding: 0 10px;
font-size: 12px;
font-weight: 600;
color: #3d3935;
font-family: inherit;
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
text-align: left;
}
.maint-rp-room-btn:focus { outline: none; box-shadow: inset 0 0 0 2px var(--primary-blue), inset 1px 1px 3px rgba(20,18,14,.10); }
.maint-rp-room-btn.is-empty { color: #b3afa8; font-weight: 500; }
.maint-rp-room-btn-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maint-rp-room-btn-chev { flex: none; font-size: 12px; color: #7a7470; opacity: .7; }
/* MaintRoomPicker popup — inherits .popup/.rp-body/.rp-floor/.rp-grid/.rm.
Only additions: force a comfortable min-height for the confirm bar so
the Clear + Confirm actions stay balanced when many rooms are picked. */
.maint-room-picker .rp-confirm-bar { min-height: 52px; }
.maint-room-picker .rp-sel-count { font-size: 11.5px; }
.maint-rp-form-actions { display: flex; gap: 8px; }
.maint-rp-save {
flex: 1;
height: 38px;
border: 0;
border-radius: 12px;
background: var(--primary-blue);
color: #fff;
font-size: 13px;
font-weight: 800;
cursor: pointer;
box-shadow: var(--shadow-button);
transition: transform .12s, box-shadow .12s;
}
.maint-rp-save:active { transform: translateY(2px); box-shadow: 0 3px 7px rgba(31,35,41,.13); }
.maint-rp-save:disabled { opacity: .45; cursor: not-allowed; }
.maint-rp-cancel {
height: 38px;
padding: 0 14px;
border: 0;
border-radius: 12px;
background: #dddbd6;
color: #5b554e;
font-size: 12px;
font-weight: 700;
cursor: pointer;
box-shadow: var(--shadow-button);
}
.maint-rp-form-hint { font-size: 10px; color: #c4823a; font-weight: 700; text-align: center; }
/* Open / completed job list blocks — fixed height, internal scroll (≥3 cards) */
.maint-rp-list-block {
background: var(--surface);
border-radius: 16px;
box-shadow: var(--shadow-card);
padding: 10px 10px 8px;
display: flex;
flex-direction: column;
gap: 6px;
}
.maint-rp-list-head {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
font-weight: 800;
color: #3d3935;
padding: 0 2px;
}
.maint-rp-list-count {
font-size: 10px;
font-weight: 700;
color: #7a7470;
background: rgba(20,18,14,.06);
border-radius: 999px;
padding: 2px 9px;
}
.maint-rp-list {
display: flex;
flex-direction: column;
gap: 6px;
max-height: 168px;
overflow-y: auto;
padding-right: 2px;
}
.maint-rp-list-empty {
font-size: 11px;
color: #9a9690;
font-weight: 600;
text-align: center;
padding: 14px 0;
}
.maint-job-card {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
text-align: left;
border: 0;
border-radius: 11px;
background: #ecebe7;
box-shadow: inset 1px 1px 3px rgba(20,18,14,.08), inset -1px -1px 2px rgba(255,255,255,.5);
padding: 7px 9px;
cursor: pointer;
min-height: 44px;
transition: transform .12s, box-shadow .12s;
}
.maint-job-card:active { transform: translateY(1px); }
/* Open-job card holds a clickable body + a "ซ่อมเสร็จ" action, so the
outer element is a row container (not itself a button). Amber left
accent = pending/open work. */
.maint-job-card.maint-job-open {
cursor: default;
padding: 6px 8px 6px 10px;
border-left: 3px solid var(--pending);
}
.maint-job-card.maint-job-open:active { transform: none; }
.maint-job-main {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
gap: 9px;
border: 0;
background: transparent;
padding: 0;
cursor: pointer;
text-align: left;
}
.maint-job-complete {
flex: 0 0 auto;
height: 28px;
padding: 0 10px;
border: 0;
border-radius: 9px;
background: var(--paid);
color: #fff;
font-size: 11px;
font-weight: 800;
cursor: pointer;
white-space: nowrap;
box-shadow: 0 1px 3px rgba(24,183,106,.28);
transition: transform .12s;
}
.maint-job-complete:active { transform: translateY(1px); }
.maint-job-room {
flex: 0 0 38px;
font-size: 14px;
font-weight: 900;
color: #2a3a7a;
font-family: var(--font-mono, monospace);
text-align: center;
}
/* Open job room number in amber (pending), completed in green. */
.maint-job-open .maint-job-room { color: var(--pending-dark, #c4823a); }
.maint-job-done .maint-job-room { color: #3a9460; }
.maint-job-body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.maint-job-type {
font-size: 11px;
font-weight: 800;
color: #3d3935;
}
.maint-job-detail {
font-size: 10px;
font-weight: 600;
color: #8a857e;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.maint-job-date {
flex: 0 0 auto;
font-size: 9px;
font-weight: 700;
color: #9a9690;
white-space: nowrap;
}
/* ── Transactions page — Dashboard-aligned visual ───────────────
Panel-based layout with card surfaces, consistent typography.
─────────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════
TRANSACTIONS page — contained sections, panel rhythm, designed empty
states. Outer body wrapped in the same #DAD8D2 rounded surface used by
the Dashboard room panel (.dash-left) so the content width/feel aligns.
═══════════════════════════════════════════════════════════════════ */
.tx-page { display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 0; }
.tx-page-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
/* Lift above the sibling .tx-page-body so the calendar popover paints
on top of the section headers (+Invoice / count badge) below. */
position: relative;
z-index: 10;
}
.tx-page-title {
font-size: 16px;
font-weight: 800;
color: #3d3935;
letter-spacing: .02em;
}
.tx-page-controls {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
/* Outer panel surface — matches .dash-left (room panel) */
.tx-page-body {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
background: #DAD8D2 !important;
border-radius: 30px !important;
box-shadow: 2px 3px 8px rgba(118,112,104,.14) !important;
padding: 14px !important;
}
.tx-panel {
display: flex;
flex-direction: column;
gap: 14px;
min-height: 100%;
}
/* Each INV / NO-INV block is a contained card that shares vertical space */
.tx-panel-section {
flex: 1 1 0;
min-height: 232px;
display: flex;
flex-direction: column;
background: var(--surface) !important;
border-radius: 20px !important;
box-shadow: var(--shadow-card) !important;
overflow: hidden;
}
/* Section header — name + sub + count chip, with a left accent strip */
.tx-section-head {
display: flex;
align-items: baseline;
gap: 10px;
padding: 12px 16px;
border-bottom: 1px solid rgba(20,18,14,.07);
position: relative;
}
.tx-section-head::before {
content: "";
position: absolute;
left: 0; top: 10px; bottom: 10px;
width: 4px;
border-radius: 0 4px 4px 0;
}
.tx-section-inv .tx-section-head::before { background: var(--primary-blue); }
.tx-section-noinv .tx-section-head::before { background: var(--text-secondary); }
.tx-section-name {
font-size: 14px;
font-weight: 800;
letter-spacing: .02em;
}
.tx-section-inv .tx-section-name { color: #185fa5; }
.tx-section-noinv .tx-section-name { color: #5b554e; }
.tx-section-sub {
font-size: 11px;
font-weight: 600;
color: var(--text-secondary);
}
.tx-section-count {
margin-left: auto;
font-size: 11px;
font-weight: 700;
color: var(--text-secondary);
background: rgba(20,18,14,.06);
border-radius: 999px;
padding: 3px 12px;
}
/* Per-section add button — sits in the header of the list it adds to.
Soft raised control matching the app; primary-action blue text. */
.tx-section-add {
align-self: center;
height: 30px;
padding: 0 13px;
border: 0;
border-radius: 10px;
background: var(--surface);
color: var(--primary-blue);
font-size: 12px;
font-weight: 800;
white-space: nowrap;
cursor: pointer;
box-shadow: var(--shadow-button);
transition: transform .12s, box-shadow .12s;
}
.tx-section-add:active { transform: translateY(1px); box-shadow: 0 3px 7px rgba(31,35,41,.13); }
.tx-section-add:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.tx-section-noinv .tx-section-add { color: #5b554e; }
.tx-section-body {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
/* Tables inside the section feel integrated (no double card) */
.tx-section-body .tcard { box-shadow: none !important; border-radius: 0 !important; flex: 1; min-height: 0; }
.tx-section-body .tcard-head { display: none !important; }
.tx-panel table.dt td { background: #f0eeea !important; }
.tx-panel table.dt tr:hover td { background: #e8e6e0 !important; }
/* Payment status row — the app already ships .pending-amount styled as
orange bold text (color:var(--pending); font-weight:700 at line 142),
which mirrors DB's own colour token for "guest still owes". No extra fill
or chip needed — the coloured number IS the state indicator. Sort keeps
pending rows on top so scanning stays fast. Received / no_payment / private
/ pg_member rows stay plain so attention goes only where action is due. */
/* PRIVATE OTA pill — moved inline into the guest cell so removing the
สถานะ column doesn't lose this important signal. */
.private-tag { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; background: rgba(20,18,14,.06); color: var(--text-secondary); vertical-align: middle; }
/* TX right panel — the shared .dash-right uses justify-content: space-between
so DB's ~6 stacked cards fill the column top-to-bottom. Transactions only
has 3-4 stacked cards, so space-between pushes them apart with big gaps.
Scope an override here so DB is untouched and TX aligns from the top. */
.tx-dash-page .dash-right { justify-content: flex-start !important; }
/* OTA Pending — the right-panel card is a BUTTON that opens a popup; the
popup lists each pending row and routes clicks back through openEdit so
staff can settle the outstanding balance without leaving the TX page. Card
is hidden entirely when there are no pending rows so the panel stays tidy. */
.ota-pending-btn { text-align: left !important; width: 100% !important; font-family: inherit !important; cursor: pointer; display: flex !important; flex-direction: column !important; }
.ota-pending-btn:hover:not(:disabled) { transform: translateY(-1px); }
.ota-pending-btn:disabled { cursor: default; opacity: .78; }
.ota-pending-btn .ota-pending-btn-hint { font-size: 11px; color: var(--text-secondary); margin-top: 4px; padding: 0 var(--pad-md, 10px) 2px; }
/* Empty-state — centre the "ไม่มี OTA Pending" message so the card doesn't
feel lopsided when there's nothing to act on. min-height matches the filled
state so switching states doesn't collapse the layout. */
.ota-pending-btn.empty { min-height: 96px; }
.ota-pending-btn.empty .dash-fin-empty { flex: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 6px 12px 12px !important; font-size: 12px !important; color: var(--text-secondary) !important; }
.ota-pending-popup { width: min(560px, calc(100vw - 24px)) !important; max-height: min(80vh, 720px); display: flex; flex-direction: column; overflow: hidden; }
.ota-pending-popup .popup-head h3 { font-size: 14px; font-weight: 800; margin: 0; }
.ota-pending-list { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.ota-pending-item { display: grid; gap: 6px; padding: 12px 14px; border: 0; border-radius: 12px; background: var(--surface); color: var(--text-primary); text-align: left; cursor: pointer; box-shadow: var(--shadow-button); transition: transform .12s, box-shadow .12s; font-family: inherit; }
.ota-pending-item:hover:not(:disabled) { transform: translateY(-1px); }
.ota-pending-item:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 3px 6px rgba(31,35,41,.14); }
.ota-pending-item:disabled { cursor: default; opacity: .6; }
.ota-item-top { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--text-secondary); }
.ota-item-source { font-weight: 800; color: var(--primary-blue); letter-spacing: .02em; }
.ota-item-room { font-weight: 700; color: var(--text-primary); }
.ota-item-bkid { font-size: 10px; color: var(--text-secondary); padding: 1px 6px; border-radius: 6px; background: rgba(20,18,14,.06); }
.ota-item-kind { margin-left: auto; font-size: 10px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.ota-item-bottom { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ota-item-guest { font-size: 15px; font-weight: 700; }
.ota-item-amount { font-size: 17px; font-weight: 800; color: var(--pending); }
.ota-pending-empty { padding: 40px 12px; text-align: center; color: var(--text-secondary); font-size: 13px; }
/* Designed empty state */
.tx-empty {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 24px 16px;
text-align: center;
}
.tx-empty-badge {
font-size: 11px;
font-weight: 800;
letter-spacing: .04em;
padding: 5px 14px;
border-radius: 999px;
}
.tx-empty-badge.inv { background: var(--primary-blue); color: var(--text-on-color); }
.tx-empty-badge.noinv { background: var(--surface); color: #5b554e; box-shadow: inset 0 0 0 1.5px var(--text-secondary); }
.tx-empty-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.tx-empty-hint { font-size: 12px; color: var(--text-secondary); }
.tx-empty-add {
margin-top: 6px;
height: 36px;
padding: 0 18px;
border: 0;
border-radius: 14px;
background: var(--surface);
color: var(--text-primary);
font-weight: 700;
font-size: 13px;
box-shadow: var(--shadow-button);
cursor: pointer;
transition: transform .12s, box-shadow .12s;
}
.tx-empty-add:active { transform: translateY(2px); box-shadow: 0 3px 7px rgba(31,35,41,.13); }
.tx-empty-add:disabled { opacity: .5; cursor: not-allowed; }
/* Transactions right panel — compact vertical card stack.
Scoped to the Transactions page so Dashboard/HK/Maintenance panels keep
their existing grid behavior. */
.tx-dash-page .tx-right-panel {
display: flex !important;
flex-direction: column !important;
align-content: initial !important;
justify-content: flex-start !important;
gap: 10px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
.tx-right-panel > .tx-rp-card,
.tx-right-panel > .tx-rp-cash-bar {
flex: 0 0 auto !important;
width: 100% !important;
}
.tx-rp-card {
padding: 12px !important;
border: 0 !important;
border-radius: 16px !important;
background: var(--surface) !important;
color: var(--text-primary) !important;
box-shadow: var(--shadow-card) !important;
}
.tx-rp-date-card {
padding: 8px !important;
}
.tx-rp-date-card .dt-bar {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.tx-rp-date-card .dt-bar .dt-row {
width: 100% !important;
}
.tx-rp-date-card .mini-cal-collapsed-field {
width: 100% !important;
justify-content: center !important;
padding-left: 12px !important;
padding-right: 12px !important;
box-shadow: var(--shadow-button) !important;
}
.tx-rp-label {
margin: 0 0 8px !important;
font-size: 13px !important;
line-height: 1.25 !important;
font-weight: 800 !important;
color: var(--text-primary) !important;
}
.tx-rp-row {
min-height: 24px !important;
display: grid !important;
grid-template-columns: minmax(0,1fr) auto !important;
align-items: center !important;
gap: 10px !important;
padding: 3px 0 !important;
border-bottom: 1px solid rgba(20,18,14,.08) !important;
font-size: 12px !important;
font-weight: 600 !important;
}
.tx-rp-row:last-child {
border-bottom: 0 !important;
}
.tx-rp-row span:first-child {
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.tx-rp-row .mono {
font-size: 12px !important;
font-weight: 800 !important;
white-space: nowrap !important;
}
.tx-rp-inv-name {
color: var(--primary-blue) !important;
font-weight: 800 !important;
}
.tx-rp-noinv-name {
color: var(--text-secondary) !important;
font-weight: 800 !important;
}
.tx-rp-total {
margin-top: 3px !important;
padding-top: 7px !important;
border-top: 1px solid rgba(20,18,14,.12) !important;
border-bottom: 0 !important;
font-weight: 800 !important;
}
.tx-rp-ota-card {
background: color-mix(in srgb, var(--pending) 12%, var(--surface)) !important;
}
.tx-rp-empty {
min-height: 34px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 8px !important;
border-radius: 12px !important;
background: rgba(255,255,255,.42) !important;
color: var(--text-secondary) !important;
font-size: 12px !important;
font-weight: 700 !important;
text-align: center !important;
}
.tx-rp-cash-bar {
min-height: 52px !important;
display: grid !important;
grid-template-columns: minmax(0,1fr) auto !important;
align-items: center !important;
gap: 10px !important;
padding: 12px !important;
border-radius: 16px !important;
background: var(--primary-blue) !important;
color: #fff !important;
box-shadow: var(--shadow-card) !important;
}
.tx-rp-cash-bar span {
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
color: #fff !important;
font-size: 13px !important;
font-weight: 800 !important;
}
.tx-rp-cash-bar .mono {
color: #fff !important;
font-size: 16px !important;
font-weight: 900 !important;
white-space: nowrap !important;
}
/* ── Login/PIN — equal status cards, larger numbers ─────────────
Override the two-layer sold card to match siblings exactly.
Numbers bumped to 26px across all cards.
─────────────────────────────────────────────────────────────── */
.pre-summary-card.sold.two-layer {
background: var(--paid) !important;
padding: 12px 6px !important;
position: relative !important;
}
.pre-summary-card.sold .psc-inner {
background: transparent !important;
box-shadow: none !important;
min-height: 0 !important;
border-radius: 0 !important;
}
.pre-summary-card.sold .psc-inner .z {
color: #fff !important;
font-size: 26px !important;
font-weight: 900 !important;
}
.pre-summary-card.sold .psc-inner small {
color: rgba(255,255,255,.88) !important;
opacity: 1 !important;
}
/* Larger numbers for all cards */
.prelogin-summary > div.pre-summary-card .z {
font-size: 26px !important;
font-weight: 900 !important;
}
/* Pin card theme alignment */
.pin-card {
border-radius: 24px !important;
box-shadow: var(--shadow-card) !important;
}
/* ── Room action popup — quick-action card (tier: mini) ───────
Sits in the tier ladder mini(300) → sm(380) → md(460) → lg(600) → xl(720).
Wider than the previous 244px cramped version so the two primary buttons
clear the 44px touch minimum with breathing room, and the room number
reads as the anchor of the card rather than a subscript. */
.room-action-pop {
width: var(--popup-w-mini) !important;
min-height: 0 !important;
padding: 16px 16px 18px !important;
gap: 14px !important;
border-radius: 20px !important;
}
.room-action-x {
top: 9px !important;
right: 9px !important;
width: 28px !important;
height: 28px !important;
font-size: 18px !important;
border-radius: 9px !important;
}
.room-action-number {
flex: 0 0 auto !important;
font-size: 40px !important;
padding: 4px 0 2px !important;
letter-spacing: -.5px !important;
}
.room-action-card {
height: 60px !important;
min-height: 60px !important;
padding: 0 10px !important;
font-size: 15px !important;
border-radius: 14px !important;
}
.room-action-cards { gap: 10px !important; }
/* ═══════════════════════════════════════════════════════════════════
DASHBOARD RIGHT PANEL — responsive, no-clip financial bar (Image 11)
.dash-right is a fixed-height flex column. Its section cards were
allowed to flex-shrink below their content, so on shorter desktop
viewports .dash-fin-card (overflow:hidden) compressed and CLIPPED the
blue "เงินสด / ยอดรับทั้งหมด" bar — it rendered as a thin textless
strip. Pinning section cards to flex-shrink:0 keeps every section at
its natural height; overflow is absorbed by the panel's own scroll and
the internal expense-list scroll. Short heights additionally scale the
panel down proportionally so all sections + the blue bar stay visible.
═══════════════════════════════════════════════════════════════════ */
.dash-right > * { flex-shrink: 0 !important; }
/* Proportional scale-down for shorter desktop heights (laptops, split
screens, browser chrome) — reduce gaps, paddings, font sizes and the
internal expense-list height instead of pushing sections off-screen. */
@media (max-height: 840px) {
.dash-right { gap: 9px !important; }
.dash-fin-row { padding: 6px 12px !important; }
.dash-fin-row.cash-row { margin: 2px 9px 7px !important; padding: 6px 10px !important; }
.dash-right .exp-list { max-height: 132px !important; }
.mini-cal { padding: 8px !important; }
}
@media (max-height: 740px) {
.dash-right { gap: 7px !important; }
.dash-fin-title { padding: 7px 11px 4px !important; font-size: 13px !important; }
.dash-fin-row { padding: 5px 12px !important; }
.dash-fin-lbl, .dash-fin-amt { font-size: 12px !important; }
.dash-right .exp-list { max-height: 96px !important; }
.dash-send-bar { padding: 8px 14px !important; }
.dash-send-lbl { font-size: 16px !important; }
.dash-send-amt { font-size: 18px !important; }
.mini-cal { padding: 6px !important; }
.mini-cal-grid button { font-size: 10px !important; }
}
@media (max-height: 660px) {
.dash-right { gap: 6px !important; }
.dash-right .exp-list { max-height: 70px !important; }
.dash-fin-row { padding: 4px 12px !important; }
}
/* ═══════════════════════════════════════════════════════════════════
VISUAL REFINEMENT — Add Transaction modal (B) + Payment popup (C)
Aligns both surfaces with the Dashboard's soft muted neumorphic
language: warm surface, calm elevated shadow, intentional field cards.
Visual only — no layout/size/logic change beyond compacting the
payment popup. Appended last so it wins over the earlier flat
`0 1px 2px` shadow patches at equal specificity.
═══════════════════════════════════════════════════════════════════ */
/* Shared soft "raised field" shadow — same hue family as --shadow-button
(warm grey drop + white highlight) but scaled for dense modal fields. */
:root {
--field-raise: 2px 3px 6px rgba(118,112,104,.16), -2px -2px 5px rgba(255,255,255,.55);
--modal-float: 0 22px 55px -14px rgba(31,35,41,.32), 0 6px 18px rgba(31,35,41,.14);
--pop-float: 0 16px 40px -12px rgba(31,35,41,.26), 0 4px 12px rgba(31,35,41,.12);
}
/* ── B. Add Transaction modal ──────────────────────────────────────── */
/* Modal shell: refined radius + calm floating elevation (was flat 0 1px 2px) */
.income-popup {
border-radius: 20px !important;
box-shadow: var(--modal-float) !important;
}
/* Field cards read as intentional raised surfaces, not flat rectangles. */
.income-popup .inside-fld > input,
.income-popup .room-pick-btn,
.income-popup .ch-trigger,
.income-popup .note-card,
.income-popup .note-card-input,
.income-popup .doc-choice-card,
.income-popup .invoice-number-input {
box-shadow: var(--field-raise) !important;
}
/* Green ชำระเงิน summary card: same raised language as the fields (was flat),
so it belongs to the form rhythm instead of looking like a stray button.
Prefixed with .income-popup to beat the `.income-popup button` flat rule. */
.income-popup .charge-summary-card {
box-shadow: var(--field-raise) !important;
}
.income-popup .charge-summary-card:hover {
box-shadow: 0 4px 10px rgba(24,183,106,.28), var(--field-raise) !important;
}
/* INV number input stays inset (sunken) inside its card — keep it thin. */
.income-popup .doc-choice-grid .invoice-number-input {
box-shadow:
inset 1px 1px 2px var(--bevel-light),
inset -2px -2px 3px var(--bevel-dark) !important;
}
/* Bottom button row: give the actions the soft button elevation (they were
flattened by the generic `.income-popup button` rule) so the row reads as
balanced, tactile controls consistent with the rest of the app. */
.income-popup .popup-foot .pbtn {
box-shadow: var(--shadow-button) !important;
}
.income-popup .popup-foot .pbtn:active {
box-shadow: 0 3px 7px rgba(31,35,41,.13) !important;
}
/* ── C. Payment popup — compact operational panel ──────────────────── */
/* Narrower + calm elevation, lighter than the modal behind it. */
.pp-popup {
width: min(392px, calc(100vw - 20px)) !important;
border-radius: 18px !important;
box-shadow: var(--pop-float) !important;
}
/* Tighter rhythm: less padding + gap so the panel fits its content. */
.pp-body-flow {
gap: 8px !important;
padding: 10px 12px 12px !important;
}
.pp-step { gap: 5px !important; }
/* Amount row stacks single-column (ยอดรับ, then เวลา QR below when QR) so
every card is a uniform full-width compact bar. */
.pp-amount-grid,
.pp-amount-grid.has-qr { grid-template-columns: 1fr !important; }
/* Compact bars: shorter height, consistent raised field surface. */
.pp-card { min-height: 48px !important; }
.pp-card.pp-card-wide {
min-height: 44px !important;
padding: 6px 12px !important;
box-shadow: var(--field-raise) !important;
}
.pp-card.pp-card-wide.pp-card-balance.due {
box-shadow: 0 2px 6px rgba(214,90,82,.16) !important;
}
/* Payment method buttons: smaller, balanced — clearly clickable but not
dominating the modal. Active = blue (selected), not over-saturated. */
.pp-method-row { gap: 6px !important; }
.pp-method-card {
min-height: 38px !important;
height: 38px !important;
font-size: 12px !important;
box-shadow: var(--field-raise) !important;
}
.pp-method-card.on {
box-shadow: 0 2px 6px rgba(63,115,217,.24) !important;
}
/* Labels/values a touch smaller to suit the compact bars. */
.pp-card-lbl { font-size: 9px !important; }
.pp-card-input, .pp-card-value { font-size: 15px !important; }
/* Engine warning stays readable but not oversized. */
.pp-engine-warn { font-size: 10px !important; padding: 8px 11px !important; }
/* ═══════════════════════════════════════════════════════════════════
HOUSEKEEPING "งานเพิ่มเติม" (extra tasks) — readable card layout.
SCOPED to .hk-board-right ONLY (the HK board's right panel), so it can
never touch Dashboard/Transactions/Maintenance room or expense cards.
Fixes the squeezed 3-column (150px blue block | detail | 3 buttons)
row: switches to a 2-row card — compact room chip + full-width detail
on top, actions on their own row — so detail wraps naturally and
buttons never crowd. MAID = mobile-first (prominent green ทำเสร็จ);
FRONT = compact Dashboard "รายจ่าย" right-panel rhythm. Visual only.
═══════════════════════════════════════════════════════════════════ */
/* List spacing */
.hk-board-right .hk-extra-list { display: grid !important; gap: 8px !important; }
/* Row: 2-row card (room+detail / actions), soft neumorphic surface */
.hk-board-right .hk-extra-row {
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) !important;
grid-template-areas: "room detail" "actions actions" !important;
align-items: center !important;
gap: 8px 10px !important;
min-height: 0 !important;
padding: 11px 13px !important;
border-radius: 14px !important;
background: var(--surface) !important;
box-shadow: var(--shadow-button) !important;
overflow: visible !important;
}
.hk-board-right .hk-extra-row.urgent { background: #f8e2df !important; }
/* Room = small pill chip (NOT the old oversized 58px blue block) */
.hk-board-right .hk-extra-room {
grid-area: room !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
align-self: center !important;
justify-self: start !important;
min-height: 0 !important;
padding: 3px 11px !important;
border-radius: 999px !important;
background: var(--primary-blue) !important;
color: var(--text-on-color) !important;
font-size: 12px !important;
font-weight: 900 !important;
line-height: 1.3 !important;
box-shadow: none !important;
cursor: default !important;
}
/* Detail = full width, wraps naturally */
.hk-board-right .hk-extra-detail {
grid-area: detail !important;
min-width: 0 !important;
padding: 0 !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
overflow-wrap: anywhere !important;
white-space: normal !important;
color: var(--text-primary) !important;
}
/* Actions = own full-width row, evenly spaced, comfortable tap targets */
.hk-board-right .hk-extra-actions {
grid-area: actions !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 0 !important;
}
.hk-board-right .hk-extra-actions button {
min-height: 34px !important;
padding: 0 12px !important;
border: 0 !important;
border-radius: 10px !important;
background: #f3f2ee !important;
color: var(--text-primary) !important;
box-shadow: 1px 2px 5px rgba(20,18,14,.10), -1px -1px 3px rgba(255,255,255,.6) !important;
font-size: 11px !important;
font-weight: 800 !important;
white-space: nowrap !important;
}
.hk-board-right .hk-extra-actions button.delete { color: var(--danger) !important; }
/* DONE rows: muted grey chip, keep restore (คืนงาน) styling */
.hk-board-right .hk-extra-row.done { background: #eceae5 !important; }
.hk-board-right .hk-extra-row.done .hk-extra-room,
.hk-board-right .hk-extra-room-done {
background: #d6d4cf !important;
color: #6a6560 !important;
}
.hk-board-right .hk-extra-row.done .hk-extra-detail { color: #8a857e !important; }
.hk-board-right .hk-extra-actions .hk-restore-btn {
background: #FACC15 !important;
color: #8a7000 !important;
box-shadow: none !important;
}
/* ── FRONT variant — compact Dashboard "รายจ่าย" right-panel rhythm ── */
.hk-board-right .hk-extra-front .hk-extra-list { gap: 6px !important; }
.hk-board-right .hk-extra-front .hk-extra-row { padding: 10px 12px !important; border-radius: 12px !important; }
.hk-board-right .hk-extra-front .hk-extra-actions { justify-content: flex-end !important; }
/* ── MAID variant — mobile-first, ทำเสร็จ as prominent primary action ── */
.hk-board-right .hk-extra-maid .hk-extra-list { gap: 10px !important; }
.hk-board-right .hk-extra-maid .hk-extra-row { padding: 13px 14px !important; gap: 10px 12px !important; }
/* First open-row action = ทำเสร็จ → fills width, green primary, big tap target */
.hk-board-right .hk-extra-maid .hk-extra-row:not(.done) .hk-extra-actions button:first-child {
flex: 1 1 auto !important;
min-height: 40px !important;
background: var(--paid) !important;
color: var(--text-on-color) !important;
box-shadow: 2px 4px 8px rgba(24,183,106,.18), -1px -1px 4px rgba(255,255,255,.55) !important;
font-size: 13px !important;
}
/* Edit/Delete stay small/secondary so they don't crowd the primary action */
.hk-board-right .hk-extra-maid .hk-extra-row:not(.done) .hk-extra-actions button:not(:first-child) {
flex: 0 0 auto !important;
}
/* ================================================================
CONSIGNMENT + SUPPLY — project neumorphic design system
================================================================ */
.stock-normal{color:var(--text-secondary)!important}
.stock-low{color:var(--pending)!important;font-weight:600!important}
.stock-out{color:var(--danger)!important;font-weight:600!important}
.stock-in{color:var(--paid)!important;font-weight:600!important}
.stock-out-label{color:var(--danger)!important}
.voided-label{color:var(--danger)!important;font-weight:600!important;font-size:11px!important}
.voided{opacity:.5!important}
.inactive{opacity:.45!important}
/* ── Consignment/Supply use .dash-body/.dash-left/.dash-right (shared with Dashboard/Maintenance) ── */
.con-dash-page .dash-left,.sup-dash-page .dash-left{overflow-y:auto!important}
.con-right-panel,.sup-right-panel{display:flex!important;flex-direction:column!important}
.con-header,.sup-header{display:flex!important;align-items:center!important;gap:10px!important;margin-bottom:12px!important;flex-wrap:wrap!important}
.con-header h2,.sup-header h2{font-size:15px!important;font-weight:700!important;margin:0!important;color:var(--text-primary)!important}
.con-today-total{font-size:13px!important;color:var(--paid)!important;font-weight:600!important}
.con-manage-btn,.sup-manage-btn{height:36px!important;padding:0 13px!important;border:0!important;border-radius:14px!important;background:var(--surface)!important;color:var(--text-primary)!important;box-shadow:var(--shadow-button)!important;font-size:12px!important;cursor:pointer!important;transition:transform .12s,box-shadow .12s!important}
.con-manage-btn:active,.sup-manage-btn:active{transform:translateY(2px)!important;box-shadow:0 3px 7px rgba(31,35,41,.13)!important}
/* ── Unified goods cards (Consignment + Supply share identical size /
3D raised shadow / typography — only the right panel differs) ──
Shadow mirrors the room card: a floating rear-shadow on the wrapper
pseudo-element (same 6px/6px offset, blur, --shadow-3d-dark gradient
as .tx-card-wrap::after) + an inset bevel on the card face. */
.con-grid,.sup-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(138px,1fr))!important;gap:12px!important;align-content:start!important;padding:4px!important}
.goods-card-wrap{position:relative!important;width:100%!important;height:104px!important}
.goods-card-wrap::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:15px;background:linear-gradient(to right,transparent 60%,var(--shadow-3d-dark) 100%),linear-gradient(to bottom,transparent 55%,var(--shadow-3d-dark) 100%);background-position:0 0,25% 0;background-size:100% 100%,75% 100%;background-repeat:no-repeat;transform:translate(5px,5px);filter:blur(4px);opacity:.42;z-index:0;pointer-events:none;transition:transform .1s,opacity .1s,filter .1s}
.goods-card-wrap:active::after{transform:translate(3px,3px);opacity:.28;filter:blur(3px)}
/* Outer = transparent; blue kept for selected state only (like DB status pattern) */
.con-card,.sup-card{position:relative!important;z-index:1!important;width:100%!important;height:100%!important;display:flex!important;flex-direction:column!important;background:transparent!important;border:0!important;border-radius:15px!important;padding:0!important;cursor:pointer!important;overflow:hidden!important;box-shadow:none!important;transition:transform .1s!important}
.goods-card-wrap:active .con-card,.goods-card-wrap:active .sup-card{transform:translate(2px,2px)!important}
.con-card-selected,.sup-card-selected{background:var(--primary-blue)!important;color:var(--text-on-color)!important}
.con-card-selected *,.sup-card-selected *{color:var(--text-on-color)!important}
.con-card-disabled,.sup-card-disabled{opacity:.42!important;cursor:not-allowed!important}
/* ── 2-color: top white (identity, ~60%) / bottom beige (KPI, ~40%) ── */
.goods-card-top{flex:1 1 auto!important;display:flex!important;flex-direction:column!important;justify-content:center!important;padding:10px 12px 6px!important;background:#FFFFFF!important;border-radius:15px 15px 0 0!important}
.goods-card-bottom{flex:0 0 44px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;padding:6px 12px 8px!important;background:var(--surface)!important;border-radius:0 0 15px 15px!important}
.con-card-selected .goods-card-top,.sup-card-selected .goods-card-top,.con-card-selected .goods-card-bottom,.sup-card-selected .goods-card-bottom{background:transparent!important}
/* ── Identity (name = biggest) ── */
.con-card-name,.sup-card-name{font-size:15px!important;font-weight:600!important;color:var(--text-primary)!important;line-height:1.35!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;margin:0!important;padding:1px 0!important}
.con-card:has(.goods-owner-tools) .con-card-name,.sup-card:has(.goods-owner-tools) .sup-card-name{padding-right:52px!important}
.sup-card-cat{font-size:10px!important;font-weight:500!important;letter-spacing:.35px!important;text-transform:uppercase!important;color:var(--text-secondary)!important;margin-top:1px!important;line-height:1!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
/* ── KPI (bottom zone): ต้องเล็กกว่าชื่อ (name 15px = biggest) ── */
.con-card-price{font-family:var(--font-mono)!important;font-variant-numeric:tabular-nums!important;font-size:13px!important;font-weight:700!important;line-height:1!important;color:var(--text-primary)!important}
.con-card-selected .con-card-price{color:var(--text-on-color)!important}
.con-card-sub{display:flex!important;gap:5px!important;align-items:baseline!important;margin-top:2px!important;font-family:var(--font-mono)!important;font-variant-numeric:tabular-nums!important;font-size:10px!important;color:var(--text-secondary)!important;line-height:1!important}
.con-card-stock{font-weight:500!important}
.con-card-cost{opacity:.85!important}
.con-card-selected .con-card-stock,.con-card-selected .con-card-cost{color:var(--text-on-color)!important;opacity:.82!important}
.sup-card-stock{font-family:var(--font-mono)!important;font-variant-numeric:tabular-nums!important;font-size:13px!important;font-weight:700!important;line-height:1!important;color:var(--text-primary)!important}
.sup-card-selected .sup-card-stock{color:var(--text-on-color)!important}
/* Owner-only mini tools (＋stock / edit) pinned to the card corner —
stopPropagation in JSX keeps a tap here from selling/selecting. */
.goods-owner-tools{position:absolute!important;top:6px!important;right:6px!important;display:flex!important;gap:4px!important;z-index:2!important}
.goods-tool-btn{width:22px!important;height:22px!important;padding:0!important;border:0!important;border-radius:7px!important;background:var(--surface)!important;color:var(--text-primary)!important;box-shadow:5px 6px 10px rgba(118,112,104,.24),-2px -2px 6px rgba(255,255,255,.6)!important;font-size:12px!important;line-height:1!important;cursor:pointer!important;display:flex!important;align-items:center!important;justify-content:center!important}
.goods-tool-btn:active{transform:translateY(1px)!important}
.con-card-selected .goods-tool-btn,.sup-card-selected .goods-tool-btn{background:rgba(255,255,255,.25)!important;color:var(--text-on-color)!important;box-shadow:none!important}
/* Add-card placeholder: same footprint, dashed, no floating shadow */
.goods-add-card{height:112px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;border:2px dashed rgba(31,35,41,.2)!important;border-radius:15px!important;background:transparent!important;box-shadow:none!important;cursor:pointer!important;opacity:.6!important;transition:opacity .12s!important}
.goods-add-card:hover{opacity:1!important}
/* ── Sales summary (top of right panel) — separate account, not mixed with Transactions ── */
.con-sales-summary{background:var(--surface)!important;border-radius:16px!important;padding:14px 16px!important;box-shadow:var(--shadow-button)!important;margin-bottom:14px!important;display:flex!important;flex-direction:column!important;gap:10px!important}
.con-sales-summary.clickable{cursor:pointer!important;transition:transform .12s!important}
.con-sales-summary.clickable:active{transform:translateY(1px)!important}
.con-summary-head{display:flex!important;align-items:baseline!important;justify-content:space-between!important;gap:8px!important}
.con-summary-title{font-size:14px!important;font-weight:700!important;margin:0!important;color:var(--text-primary)!important}
.con-summary-count{font-size:11px!important;color:var(--text-secondary)!important;font-weight:500!important}
.con-sales-summary.clickable .con-summary-count{color:var(--primary-blue)!important;font-weight:600!important}
.con-summary-rows{display:flex!important;flex-direction:column!important;gap:6px!important}
.con-summary-row{display:flex!important;align-items:baseline!important;justify-content:space-between!important;font-size:13px!important}
.con-summary-label{color:var(--text-secondary)!important;font-weight:500!important}
.con-summary-value{font-family:var(--font-mono)!important;font-variant-numeric:tabular-nums!important;font-weight:600!important;color:var(--text-primary)!important}
.con-summary-total-row{padding-top:8px!important;border-top:1px solid rgba(31,35,41,.08)!important;margin-top:2px!important}
.con-summary-total-row .con-summary-label{color:var(--text-primary)!important;font-weight:700!important;font-size:14px!important}
.con-summary-total-row .con-summary-value{color:var(--paid)!important;font-weight:700!important;font-size:15px!important}
/* ── Sales entry (cart) — below summary ── */
.con-cart-section{display:flex!important;flex-direction:column!important;flex:1 1 auto!important;min-height:0!important}
.con-entry-title{font-size:13px!important;font-weight:700!important;margin:0 0 10px!important;color:var(--text-secondary)!important;letter-spacing:.3px!important;text-transform:uppercase!important}
.con-empty,.sup-empty{font-size:13px!important;color:var(--text-secondary)!important;text-align:center!important;padding:24px 0!important}
.con-cart-item{display:flex!important;align-items:center!important;gap:8px!important;padding:8px 10px!important;margin-bottom:6px!important;background:var(--surface)!important;border-radius:12px!important;box-shadow:var(--shadow-button)!important}
.con-cart-name{flex:1!important;font-size:13px!important;color:var(--text-primary)!important}
.con-cart-qty{display:flex!important;align-items:center!important;gap:5px!important}
.con-cart-qty button{width:28px!important;height:28px!important;border:0!important;border-radius:10px!important;background:var(--surface)!important;box-shadow:var(--shadow-button)!important;cursor:pointer!important;font-size:14px!important;color:var(--text-primary)!important}
.con-cart-qty span{font-size:14px!important;font-weight:600!important;min-width:20px!important;text-align:center!important}
.con-cart-subtotal{font-size:13px!important;font-weight:600!important;min-width:48px!important;text-align:right!important}
.con-cart-remove{border:0!important;background:none!important;color:var(--danger)!important;cursor:pointer!important;font-size:16px!important;padding:0 2px!important}
.con-cart-total{font-size:17px!important;font-weight:700!important;text-align:right!important;padding:10px 0!important;margin-top:auto!important;color:var(--text-primary)!important}
.con-pay-btns{display:flex!important;gap:8px!important;margin:8px 0!important}
.con-pay-btns button{flex:1!important;height:40px!important;border:0!important;border-radius:14px!important;background:var(--surface)!important;box-shadow:var(--shadow-button)!important;cursor:pointer!important;font-size:13px!important;font-weight:500!important;color:var(--text-primary)!important;transition:transform .12s!important}
.con-pay-btns button.active{background:var(--primary-blue)!important;color:var(--text-on-color)!important}
.con-pay-btns button:active{transform:translateY(2px)!important}
.con-confirm-btn{width:100%!important;height:44px!important;background:var(--paid)!important;color:var(--text-on-color)!important;border:0!important;border-radius:14px!important;font-size:14px!important;font-weight:600!important;cursor:pointer!important;box-shadow:var(--shadow-button)!important;transition:transform .12s!important}
.con-confirm-btn:active{transform:translateY(2px)!important}
.con-feedback,.sup-feedback{text-align:center!important;padding:10px!important;margin-top:8px!important;background:var(--paid)!important;color:var(--text-on-color)!important;border-radius:14px!important;font-size:13px!important;font-weight:600!important}
/* ── Manage/Edit popups (neumorphic) ── */
.con-manage-popup,.sup-manage-popup{max-width:560px!important;width:min(560px,calc(100vw - 24px))!important;max-height:calc(100vh - 24px)!important;overflow-y:auto!important}
.con-history-popup{max-width:640px!important;width:min(640px,calc(100vw - 24px))!important;max-height:calc(100vh - 24px)!important;overflow-y:auto!important}
.con-edit-popup,.sup-edit-popup{max-width:420px!important;width:min(420px,calc(100vw - 24px))!important}
.con-edit-popup label,.sup-edit-popup label{display:flex!important;flex-direction:column!important;gap:4px!important;margin-bottom:10px!important;font-size:12px!important;font-weight:600!important;color:var(--text-secondary)!important}
.con-edit-popup input,.con-edit-popup select,.sup-edit-popup input,.sup-edit-popup select{height:42px!important;padding:0 12px!important;background:var(--surface)!important;color:var(--text-primary)!important;border:0!important;border-radius:12px!important;box-shadow:var(--shadow-button)!important;font-size:14px!important}
.con-edit-popup input:focus,.con-edit-popup select:focus,.sup-edit-popup input:focus,.sup-edit-popup select:focus{outline:0!important;box-shadow:var(--shadow-button),var(--focus)!important}
/* Match the app's custom select chevron (kill the native OS double-arrow) */
.con-edit-popup select,.sup-edit-popup select{appearance:none!important;-webkit-appearance:none!important;background-color:var(--surface)!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235F6670' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 12px center!important;padding-right:32px!important}
/* Kill the native number-input spinner in these popups */
.con-edit-popup input[type=number]::-webkit-inner-spin-button,.con-edit-popup input[type=number]::-webkit-outer-spin-button,.sup-edit-popup input[type=number]::-webkit-inner-spin-button,.sup-edit-popup input[type=number]::-webkit-outer-spin-button,.goods-restock-body input::-webkit-inner-spin-button,.goods-restock-body input::-webkit-outer-spin-button{-webkit-appearance:none!important;margin:0!important}
.con-edit-popup input[type=number],.sup-edit-popup input[type=number],.goods-restock-body input[type=number]{-moz-appearance:textfield!important}
/* ── Restock popup (owner) — same neumorphic language as edit popup ── */
.goods-restock-popup{max-width:300px!important;width:min(300px,calc(100vw - 24px))!important;border-radius:18px!important}
.goods-restock-body{padding:8px 12px 12px!important;display:flex!important;flex-direction:column!important;gap:8px!important}
.goods-restock-name{font-size:16px!important;font-weight:700!important;color:var(--text-primary)!important}
.goods-restock-current{font-family:var(--font-mono)!important;font-variant-numeric:tabular-nums!important;font-size:12px!important;color:var(--text-secondary)!important;margin-top:-8px!important}
.goods-restock-body label{display:flex!important;flex-direction:column!important;gap:3px!important;font-size:10.5px!important;font-weight:600!important;letter-spacing:.4px!important;text-transform:uppercase!important;color:var(--text-secondary)!important}
.goods-restock-body input{height:34px!important;padding:0 10px!important;border:0!important;border-radius:10px!important;background:var(--surface)!important;color:var(--text-primary)!important;font-family:var(--font-mono)!important;font-variant-numeric:tabular-nums!important;font-size:14px!important;font-weight:600!important;box-shadow:var(--shadow-button)!important}
.goods-restock-body input:focus{outline:0!important;box-shadow:var(--shadow-button),var(--focus)!important}
/* Pill submit, right-aligned — mirrors .sup-request-popup .sup-save-btn (see feedback_no_bulky_popups). */
.goods-restock-btn{width:auto!important;min-width:112px!important;align-self:flex-end!important;height:34px!important;padding:0 18px!important;background:var(--paid)!important;color:var(--text-on-color)!important;border:0!important;border-radius:11px!important;font-size:13px!important;font-weight:700!important;cursor:pointer!important;box-shadow:var(--shadow-button)!important;transition:transform .12s!important;margin-top:3px!important}
.goods-restock-btn:active{transform:translateY(2px)!important}
.con-save-btn,.sup-save-btn{width:100%!important;height:44px!important;background:var(--primary-blue)!important;color:var(--text-on-color)!important;border:0!important;border-radius:14px!important;font-size:14px!important;font-weight:600!important;cursor:pointer!important;box-shadow:var(--shadow-button)!important;margin-top:8px!important}
.con-add-prod-btn,.sup-add-btn{height:36px!important;padding:0 14px!important;border:0!important;border-radius:14px!important;background:var(--surface)!important;box-shadow:var(--shadow-button)!important;cursor:pointer!important;font-size:13px!important;color:var(--text-primary)!important;margin-bottom:12px!important}
.con-manage-list,.sup-manage-list{display:flex!important;flex-direction:column!important;gap:8px!important}
.con-manage-row,.sup-manage-row{display:flex!important;align-items:center!important;gap:8px!important;padding:10px 12px!important;background:var(--surface)!important;border:0!important;border-radius:12px!important;box-shadow:var(--shadow-button)!important;font-size:13px!important}
.con-manage-row button,.sup-manage-row button{height:30px!important;padding:0 10px!important;border:0!important;border-radius:10px!important;background:var(--surface)!important;box-shadow:var(--shadow-button)!important;cursor:pointer!important;font-size:11px!important;color:var(--text-primary)!important}
.con-m-name,.sup-m-name{flex:1!important;font-weight:600!important}
.con-m-stock,.sup-m-stock{min-width:60px!important;color:var(--text-secondary)!important}
.con-m-price{min-width:50px!important;text-align:right!important;font-weight:600!important}
.con-restock-form,.sup-restock-form{display:flex!important;align-items:center!important;gap:8px!important;padding:10px 12px!important;background:var(--surface)!important;border-radius:14px!important;box-shadow:var(--shadow-button)!important;margin-top:10px!important;font-size:13px!important}
.con-restock-form input,.sup-restock-form input{width:70px!important;height:36px!important;padding:0 8px!important;border:0!important;border-radius:10px!important;background:var(--bg-app)!important;box-shadow:inset 2px 2px 4px rgba(118,112,104,.18),inset -1px -1px 3px rgba(255,255,255,.5)!important;font-size:14px!important}
.con-restock-form button,.sup-restock-form button{height:30px!important;padding:0 10px!important;border:0!important;border-radius:10px!important;background:var(--surface)!important;box-shadow:var(--shadow-button)!important;cursor:pointer!important;font-size:12px!important}
.con-history-list{display:flex!important;flex-direction:column!important;gap:6px!important}
.con-history-row{display:flex!important;align-items:center!important;gap:8px!important;padding:8px 10px!important;background:var(--surface)!important;border-radius:12px!important;box-shadow:var(--shadow-button)!important;font-size:12px!important}
.con-history-row button{height:26px!important;padding:0 8px!important;border:0!important;border-radius:8px!important;background:var(--danger)!important;color:var(--text-on-color)!important;cursor:pointer!important;font-size:11px!important}
/* ── Supply page ── */
.sup-form-title{font-size:14px!important;font-weight:700!important;margin:0 0 10px!important;color:var(--text-primary)!important}
.sup-withdraw-form{display:flex!important;flex-direction:column!important;gap:10px!important}
.sup-sel-name{font-size:14px!important;font-weight:600!important;color:var(--text-primary)!important}
.sup-withdraw-form label{display:flex!important;flex-direction:column!important;gap:4px!important;font-size:12px!important;color:var(--text-secondary)!important;font-weight:600!important}
.sup-withdraw-form input,.sup-withdraw-form select{height:42px!important;padding:0 12px!important;background:var(--surface)!important;color:var(--text-primary)!important;border:0!important;border-radius:12px!important;box-shadow:var(--shadow-button)!important;font-size:14px!important}
.sup-withdraw-btn{height:44px!important;background:var(--primary-blue)!important;color:var(--text-on-color)!important;border:0!important;border-radius:14px!important;font-size:14px!important;font-weight:600!important;cursor:pointer!important;box-shadow:var(--shadow-button)!important}
.sup-log-title{font-size:13px!important;font-weight:600!important;margin:16px 0 8px!important;color:var(--text-secondary)!important}
.sup-log-list{display:flex!important;flex-direction:column!important;gap:6px!important}
.sup-log-row{display:flex!important;gap:8px!important;font-size:11px!important;padding:6px 8px!important;background:var(--surface)!important;border-radius:10px!important;box-shadow:var(--shadow-button)!important}
/* ── Add-card icon/label (used by .goods-add-card in both grids) ── */
.con-add-icon{font-size:24px!important;font-weight:400!important;color:var(--text-secondary)!important;line-height:1!important}
.con-add-label{font-size:11px!important;color:var(--text-secondary)!important;margin-top:4px!important}
/* ── Today summary link in right panel ── */
.con-today-summary{margin-top:auto!important;padding:10px!important;text-align:center!important;font-size:12px!important;font-weight:600!important;color:var(--primary-blue)!important;cursor:pointer!important;border-radius:12px!important;background:var(--surface)!important;box-shadow:var(--shadow-button)!important}
.con-today-summary.muted{color:var(--text-secondary)!important;font-weight:500!important}
/* =================================================================
SUPPLY — request/deliver workflow.
Reuses .dash-body/.dash-left/.dash-right two-column layout from
Dashboard; overrides here narrow the right panel to a single column
of pending cards and stack everything vertically on mobile.
================================================================= */
/* Right panel is a single-column pending-request list, not the
Dashboard's 1-1 grid. */
.sup-dash-page .dash-right{display:flex!important;flex-direction:column!important;gap:12px!important}
/* Header row: title + category chips + spacer + action buttons. */
.sup-header{display:flex!important;align-items:center!important;gap:10px!important;margin-bottom:12px!important;flex-wrap:wrap!important}
.sup-header-spacer{flex:1 1 auto!important}
.sup-cat-chips{display:flex!important;gap:6px!important;flex-wrap:wrap!important}
.sup-cat-chip{height:30px!important;padding:0 12px!important;border:0!important;border-radius:15px!important;background:var(--surface)!important;color:var(--text-secondary)!important;box-shadow:var(--shadow-button)!important;font-size:12px!important;font-weight:600!important;cursor:pointer!important;transition:transform .1s,box-shadow .1s!important}
.sup-cat-chip:active{transform:translateY(1px)!important}
.sup-cat-chip.active{background:var(--primary-blue)!important;color:var(--text-on-color)!important}
/* Right-panel sections (สั่งของ / จ่ายของ) */
.sup-section{display:flex!important;flex-direction:column!important;margin-bottom:14px!important}
.sup-section-dispatch{flex:1 1 auto!important;min-height:0!important;margin-bottom:0!important}
.sup-section-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;margin-bottom:8px!important}
.sup-section-title{font-size:11px!important;font-weight:700!important;letter-spacing:.6px!important;text-transform:uppercase!important;color:var(--text-secondary)!important;margin:0!important}
.sup-section-actions{display:flex!important;gap:5px!important}
.sup-section-actions .sup-manage-btn{height:26px!important;padding:0 10px!important;font-size:11px!important;border-radius:11px!important}
.sup-section-order .sup-cat-chips{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:6px!important}
.sup-section-order .sup-cat-chip{height:32px!important;padding:0 10px!important;font-size:12px!important}
/* Pending panel head — title + count pill. */
.sup-pending-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;margin-bottom:8px!important}
.sup-pending-count{font-size:12px!important;font-weight:600!important;color:var(--text-secondary)!important;padding:4px 10px!important;border-radius:12px!important;background:var(--surface)!important;box-shadow:var(--shadow-button)!important}
.sup-pending-count.has{background:var(--pending)!important;color:var(--text-on-color)!important}
.sup-pending-list{display:flex!important;flex-direction:column!important;gap:10px!important;overflow-y:auto!important;padding-right:2px!important}
/* Pending card. */
.sup-pending-card{background:var(--surface)!important;border-radius:16px!important;box-shadow:var(--shadow-card)!important;padding:12px 14px!important;display:flex!important;flex-direction:column!important;gap:6px!important;position:relative!important;border-left:4px solid var(--primary-blue)!important}
.sup-pending-card.shortage{border-left-color:var(--danger, #dc2626)!important;background:linear-gradient(180deg,#fbe9e6 0%,var(--surface) 60%)!important}
/* Subtle attention flash for a freshly-arrived request; runs once. */
@keyframes supFresh{0%{box-shadow:0 0 0 0 rgba(63,115,217,.35)}70%{box-shadow:0 0 0 8px rgba(63,115,217,0)}100%{box-shadow:var(--shadow-card)}}
.sup-pending-card.fresh{animation:supFresh 1.4s ease-out 1!important}
.spc-top{display:flex!important;align-items:baseline!important;justify-content:space-between!important;gap:8px!important}
.spc-name{font-size:15px!important;font-weight:700!important;color:var(--text-primary)!important;line-height:1.2!important}
.spc-cat{font-size:11px!important;color:var(--text-secondary)!important;padding:2px 8px!important;border-radius:10px!important;background:var(--bg-app,#EDE9E1)!important}
.spc-row{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important}
.spc-qty{font-family:var(--font-mono)!important;font-variant-numeric:tabular-nums!important;font-size:16px!important;font-weight:700!important;color:var(--primary-blue)!important}
.spc-loc{font-size:13px!important;color:var(--text-primary)!important;font-weight:600!important;text-align:right!important}
.spc-note{font-size:12px!important;color:var(--text-secondary)!important;font-style:italic!important;padding:4px 8px!important;background:var(--bg-app,#EDE9E1)!important;border-radius:8px!important}
.spc-meta{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:6px!important;font-size:11px!important;color:var(--text-secondary)!important}
.spc-meta .stock-out{color:var(--danger,#dc2626)!important;font-weight:700!important}
.spc-actions{display:flex!important;gap:8px!important;margin-top:6px!important}
.spc-actions-readonly{justify-content:space-between!important;align-items:center!important}
.spc-actions-readonly:has(.spc-waiting:only-child){justify-content:center!important}
.spc-waiting{font-size:12px!important;color:var(--text-secondary)!important;padding:8px!important}
.spc-btn{flex:1!important;min-height:44px!important;padding:10px 14px!important;border:0!important;border-radius:14px!important;font-size:14px!important;font-weight:700!important;cursor:pointer!important;box-shadow:var(--shadow-button)!important;transition:transform .1s,box-shadow .1s!important}
.spc-btn:active{transform:translateY(1px)!important}
.spc-btn:disabled{opacity:.5!important;cursor:not-allowed!important}
.spc-deliver{background:var(--paid,#3aa972)!important;color:var(--text-on-color)!important}
.spc-cancel{background:var(--surface)!important;color:var(--danger,#dc2626)!important;flex:0 0 40%!important}
/* Feedback banner (ok/warn/err). */
.sup-feedback{text-align:center!important;padding:10px!important;margin-bottom:10px!important;color:var(--text-on-color)!important;border-radius:14px!important;font-size:13px!important;font-weight:600!important}
.sup-feedback-ok{background:var(--paid,#3aa972)!important}
.sup-feedback-warn{background:var(--pending,#d97706)!important}
.sup-feedback-err{background:var(--danger,#dc2626)!important}
/* Request-supply popup — compact quick-action card. Item name/stock live IN the
header row so the body carries only the two form fields + submit pill.
Target height ≈ 200px (was ~330px with the old preview-card layout). */
.sup-request-popup{max-width:300px!important;width:min(300px,calc(100vw - 24px))!important;border-radius:18px!important}
.sup-req-head{align-items:flex-start!important;padding:11px 12px 9px!important;gap:8px!important}
.sup-req-head-info{display:flex!important;flex-direction:column!important;gap:2px!important;min-width:0!important;flex:1!important}
.sup-req-head-name{font-size:14px!important;font-weight:700!important;color:var(--text-primary)!important;line-height:1.2!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.sup-req-head-meta{display:flex!important;align-items:center!important;gap:6px!important;font-size:11px!important;color:var(--text-secondary)!important;font-weight:500!important}
.sup-req-head-cat{letter-spacing:.3px!important;text-transform:uppercase!important;font-size:10px!important}
.sup-req-head-dot{opacity:.5!important}
.sup-req-head-stock{font-family:var(--font-mono)!important;font-variant-numeric:tabular-nums!important;font-weight:700!important;color:var(--text-primary)!important}
.sup-req-head-stock.stock-low{color:var(--pending)!important}
.sup-req-head-stock.stock-out{color:var(--danger)!important}
.sup-req-body{display:flex!important;flex-direction:column!important;gap:7px!important;padding:2px 12px 12px!important}
.sup-req-body label{display:flex!important;flex-direction:column!important;gap:3px!important;font-size:10.5px!important;font-weight:600!important;letter-spacing:.4px!important;text-transform:uppercase!important;color:var(--text-secondary)!important}
.sup-req-body input,.sup-req-body select{height:34px!important;padding:0 10px!important;background:var(--surface)!important;color:var(--text-primary)!important;border:0!important;border-radius:10px!important;box-shadow:var(--shadow-button)!important;font-size:13px!important;font-weight:500!important}
/* Pill submit, right-aligned — NEVER a full-width slab (see feedback_no_bulky_popups). */
.sup-request-popup .sup-save-btn{width:auto!important;min-width:112px!important;align-self:flex-end!important;height:34px!important;padding:0 18px!important;font-size:13px!important;margin-top:3px!important;border-radius:11px!important}
.sup-req-body select{appearance:none!important;-webkit-appearance:none!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235F6670' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 12px center!important;padding-right:32px!important}
/* History popup rows. */
.sup-history-popup{max-width:560px!important;width:min(560px,calc(100vw - 24px))!important;max-height:calc(100vh - 24px)!important;overflow-y:auto!important}
.sup-history-list{display:flex!important;flex-direction:column!important;gap:6px!important}
.sup-history-row{display:grid!important;grid-template-columns:80px 1fr 60px 90px 80px 90px!important;gap:8px!important;align-items:center!important;padding:8px 10px!important;background:var(--surface)!important;border-radius:12px!important;box-shadow:var(--shadow-button)!important;font-size:12px!important}
.sup-history-row .shr-status{font-weight:700!important;padding:2px 8px!important;border-radius:8px!important;text-align:center!important;font-size:11px!important}
.sup-history-row.ok .shr-status{background:var(--paid,#3aa972)!important;color:var(--text-on-color)!important}
.sup-history-row.cancel .shr-status{background:var(--surface)!important;color:var(--danger,#dc2626)!important}
.sup-history-row .shr-name{font-weight:600!important}
.sup-history-row .shr-qty{font-family:var(--font-mono)!important;font-variant-numeric:tabular-nums!important}
.sup-history-row .shr-time{color:var(--text-secondary)!important;text-align:right!important}
/* Manage popup rows — new schema uses .sup-m-cat. */
.sup-manage-row{display:grid!important;grid-template-columns:1fr 90px 80px auto auto auto!important;gap:8px!important;align-items:center!important}
.sup-manage-row.inactive{opacity:.5!important}
.sup-m-cat{font-size:11px!important;color:var(--text-secondary)!important}
/* NAV badge on the Supply nav button. */
.tb-nav-item{position:relative!important}
.tb-nav-badge{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:20px!important;height:20px!important;padding:0 6px!important;margin-left:6px!important;border-radius:10px!important;background:var(--pending,#d97706)!important;color:var(--text-on-color)!important;font-family:var(--font-mono)!important;font-variant-numeric:tabular-nums!important;font-size:11px!important;font-weight:700!important;line-height:1!important;box-shadow:0 1px 3px rgba(0,0,0,.15)!important}
/* ── Mobile: single-column stack, big tap targets ── */
@media (max-width: 950px){
.sup-dash-page .dash-body{display:block!important;height:auto!important}
.sup-dash-page .dash-left,.sup-dash-page .dash-right{width:100%!important;max-width:100%!important}
.sup-dash-page .dash-right{margin-top:14px!important}
.sup-header{gap:8px!important}
.sup-cat-chip{height:36px!important;padding:0 14px!important;font-size:13px!important}
.sup-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))!important;gap:14px!important}
/* Pending cards go single-column with larger internal spacing. */
.sup-pending-list{gap:12px!important}
.sup-pending-card{padding:14px 16px!important;gap:8px!important}
.spc-name{font-size:16px!important}
.spc-qty{font-size:18px!important}
.spc-loc{font-size:14px!important}
.spc-btn{min-height:52px!important;font-size:15px!important;border-radius:16px!important}
.sup-history-row{grid-template-columns:1fr 1fr!important;grid-auto-flow:row!important;row-gap:4px!important;padding:10px!important}
.sup-history-row .shr-time{text-align:left!important}
.sup-manage-row{grid-template-columns:1fr auto!important;grid-auto-flow:row!important}
.sup-request-popup{width:min(440px,calc(100vw - 16px))!important}
.sup-req-body input,.sup-req-body select{height:48px!important;font-size:16px!important}
}
@media (max-width: 480px){
.sup-grid{grid-template-columns:repeat(auto-fill,minmax(46vw,1fr))!important}
.sup-cat-chips{width:100%!important;overflow-x:auto!important;flex-wrap:nowrap!important}
.sup-cat-chip{flex:0 0 auto!important}
.spc-btn{font-size:16px!important;min-height:56px!important}
.spc-cancel{flex:0 0 44%!important}
}
/* ---------------- Login screen (v1 Cloudflare-backed auth) ---------------- */
/* Standalone screen shown before App() renders. Uses the same soft-neu palette
as the rest of the app so the login → dashboard transition feels seamless. */
.login-screen {
position: fixed; inset: 0;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(160deg, #f5f2ec 0%, #eeeae2 100%);
padding: 24px;
z-index: 100;
}
.login-card {
width: 100%; max-width: 340px;
background: #ecebe7;
border-radius: 22px;
padding: 32px 28px 24px;
box-shadow: 8px 8px 24px rgba(20,18,14,.10), -6px -6px 16px rgba(255,255,255,.60);
}
.login-title {
font-size: 22px; font-weight: 700; color: #3d3935;
text-align: center; letter-spacing: .5px;
}
.login-sub {
font-size: 12px; color: #8a827c; font-weight: 500;
text-align: center; margin-top: 4px; margin-bottom: 22px;
}
.login-form { display: flex; flex-direction: column; gap: 16px; }
.login-field { display: flex; flex-direction: column; gap: 6px; }
.login-field > span { font-size: 11px; font-weight: 700; color: #7a7470; letter-spacing: .3px; }
.login-field input {
height: 44px; border: 0; border-radius: 12px;
background: #ecebe7;
box-shadow: inset 2px 2px 5px rgba(20,18,14,.10), inset -1px -1px 3px rgba(255,255,255,.55);
padding: 0 14px; font-size: 18px; font-weight: 600; color: #3d3935;
text-align: center; letter-spacing: 3px;
font-family: inherit;
}
.login-field input:focus {
outline: none;
box-shadow: inset 0 0 0 2px var(--primary-blue), inset 2px 2px 5px rgba(20,18,14,.10);
}
.login-role { display: flex; gap: 8px; }
.login-role-btn {
flex: 1; height: 40px; border: 0; border-radius: 12px;
background: #ecebe7;
box-shadow: 3px 3px 6px rgba(20,18,14,.10), -2px -2px 4px rgba(255,255,255,.55);
font-size: 13px; font-weight: 600; color: #7a7470;
cursor: pointer;
font-family: inherit;
}
.login-role-btn.is-active {
color: #fff; background: var(--primary-blue);
box-shadow: inset 2px 2px 4px rgba(0,0,0,.15);
}
.login-error {
padding: 8px 12px; border-radius: 10px;
background: #f9e4e0; color: #b03a2e;
font-size: 12px; font-weight: 600; text-align: center;
}
.login-submit {
height: 46px; border: 0; border-radius: 14px;
background: var(--primary-blue); color: #fff;
font-size: 15px; font-weight: 700;
cursor: pointer; margin-top: 4px;
font-family: inherit;
box-shadow: 3px 3px 6px rgba(20,18,14,.15);
}
.login-submit:disabled { background: #b0b7cc; cursor: not-allowed; box-shadow: none; }
/* Full-screen loading state after login while /state?date fetches for the first time. */
.app-loading {
position: fixed; inset: 0;
display: flex; align-items: center; justify-content: center;
background: #f5f2ec;
font-size: 14px; color: #7a7470;
z-index: 90;
}
/* ---------------- Mobile responsive (v1.1) ---------------- */
/* Room grid on the Dashboard was being forced to 7 columns on phones after
the 950px block already tried to hand it to 4 columns — a later rule at
line ~74 kept the row grid untouched but the column count re-inherited
the desktop 7. These queries make the mobile layout survive that
ordering: force column count + card dimensions explicitly. */
/* Tablet-portrait / small tablet */
@media (max-width: 900px) {
.tx-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
grid-template-rows: none !important;
grid-auto-rows: 62px !important;
gap: 10px !important;
}
.tx-card { min-height: 62px !important; height: 62px !important; }
}
/* Phone landscape / large phone portrait */
@media (max-width: 640px) {
.tx-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
grid-auto-rows: 64px !important;
gap: 10px !important;
}
.tx-card { min-height: 64px !important; height: 64px !important; padding: 10px !important; }
.tx-room { font-size: 16px !important; top: 10px !important; left: 12px !important; }
.dash-left { padding: 12px !important; border-radius: 20px !important; }
.dash-right { padding: 12px !important; border-radius: 20px !important; margin-top: 12px !important; }
.mc-topbar { padding: 6px 10px !important; }
.tb-nav-item, .tb-icon { min-width: auto !important; padding: 0 10px !important; font-size: 12px !important; }
}
/* Small phone portrait — most restrictive layout */
@media (max-width: 480px) {
.tx-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
grid-auto-rows: 60px !important;
gap: 8px !important;
}
.tx-card { min-height: 60px !important; height: 60px !important; padding: 8px !important; }
.tx-room { font-size: 15px !important; top: 8px !important; left: 10px !important; }
.tx-guest, .tx-state-main, .tx-free-label { font-size: 9px !important; }
.dash-body { padding: 0 !important; gap: 10px !important; }
.page { padding: 8px !important; }
/* Top nav becomes horizontally scrollable so all six tabs stay reachable */
.tb-nav { overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; }
.tb-nav-item { flex: 0 0 auto !important; }
/* KPI cards go from 3-across (เสีย/ฟรี/ขายแล้ว) to still 3-across but shorter */
.room-sum-2 { grid-template-columns: repeat(3, 1fr) !important; }
/* Payment summary side-by-side becomes stacked so numbers stay legible */
.payment-summary-card .rs-sub { grid-template-columns: 1fr !important; }
}
/* ---------------- Mobile topbar wrap + dashboard stack (v1.1 patch) ---------------- */
/* Round 2 mobile issue: on <640px the .mc-topbar was still single-row flex
with .tb-nav (DASHBOARD / TRANSACTIONS / …) shoved off the right edge by
.tb-right (avatar + LOCK / PRINT / LOGOUT). Users had no way to switch
pages. Also the dashboard's right panel (.dash-right, KPIs + calendar)
overlapped the left panel because the parent grid didn't switch to a
single column early enough. */
@media (max-width: 640px) {
/* Topbar becomes two rows: user actions on top, nav tabs below, scrollable. */
.mc-topbar {
height: auto !important;
min-height: 48px !important;
flex-wrap: wrap !important;
padding: 6px 8px !important;
gap: 6px !important;
align-items: center !important;
}
.tb-brand { display: none !important; }
.tb-right {
order: 1 !important;
margin-left: auto !important;
gap: 6px !important;
flex-wrap: nowrap !important;
}
.tb-nav {
order: 2 !important;
width: 100% !important;
display: flex !important;
overflow-x: auto !important;
overflow-y: hidden !important;
flex-wrap: nowrap !important;
gap: 6px !important;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
padding-bottom: 2px !important;
}
.tb-nav::-webkit-scrollbar { height: 3px; }
.tb-nav-item {
flex: 0 0 auto !important;
height: 32px !important;
padding: 0 12px !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: .3px !important;
white-space: nowrap !important;
}
.tb-icon {
height: 32px !important;
min-width: auto !important;
padding: 0 10px !important;
font-size: 10px !important;
font-weight: 700 !important;
}
.mc-avatar {
width: 32px !important;
height: 32px !important;
font-size: 13px !important;
}
/* Dashboard: kill the desktop 2-col grid so left+right panels stack. */
.dash-body {
grid-template-columns: 1fr !important;
display: flex !important;
flex-direction: column !important;
height: auto !important;
}
.dash-left {
order: 1 !important;
min-height: 60vh !important;
}
.dash-right {
order: 2 !important;
width: 100% !important;
max-width: 100% !important;
grid-template-columns: 1fr 1fr !important;
}
}
/* Extra squeeze at <480px so DASHBOARD / TRANSACTIONS / HOUSEKEEPING fit
without a horizontal scroll bar dominating the header. */
@media (max-width: 480px) {
.tb-nav-item { padding: 0 10px !important; font-size: 10.5px !important; }
.tb-icon { padding: 0 8px !important; font-size: 9.5px !important; }
.mc-topbar { padding: 6px !important; }
}
/* ---------------- Mobile: Housekeeping grid + hide desktop-only top actions ---------------- */
/* Round 2 patch: .hk-grid is a hard 7-column layout via
grid-template-columns: repeat(7, var(--hk-maint-card-w)). On mobile those
columns compressed the room number card into an unreadable pill. Force
3 columns on phones so the numbers stay legible. Also .maint-rp-list-block
and MaintenancePage share the same class family, so scope this only to
the HK page and its embedded views. */
@media (max-width: 900px) {
.hk-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 10px !important;
}
.hk-task-card, .hk-card { min-height: 66px !important; height: auto !important; }
}
@media (max-width: 640px) {
.hk-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 8px !important;
}
.hk-task-card, .hk-card {
min-height: 68px !important;
padding: 8px !important;
border-radius: 12px !important;
}
.hk-room-num, .tx-room { font-size: 15px !important; }
/* Owner-only top-bar actions are unnecessary on phones — hide them so the
limited horizontal space goes to the avatar + LOGOUT. LOCK / UNLOCK
(day-close, owner-only) and PRINT (A5 report) belong on desktop. */
.tb-icon.green { display: none !important; } /* LOCK */
.tb-icon.print { display: none !important; } /* PRINT */
.tb-icon[title*="ปลดล็อก"] { display: none !important; } /* UNLOCK */
}
/* ==================================================================
Mobile round-3: bottom tab bar (Option B) + role-based nav visibility
================================================================== */
@media (max-width: 640px) {
/* Kill the wrapped top nav — it moves to a fixed bottom bar. */
.tb-nav { display: none !important; }
/* Topbar collapses to a single 44px row: avatar + spacer + LOGOUT */
.mc-topbar {
min-height: 44px !important;
height: 44px !important;
flex-wrap: nowrap !important;
justify-content: space-between !important;
padding: 6px 10px !important;
}
.tb-right { margin-left: auto !important; }
/* Content bottom padding so the last row of room cards clears the tab bar. */
.shell, .main-content { padding-bottom: 66px !important; }
body { padding-bottom: env(safe-area-inset-bottom); }
/* Housekeeping room grid uses .tx-grid.hk-skin-grid (both classes → higher
specificity than .tx-grid). Match it exactly at the media-query level so
we win by cascade order, not specificity gymnastics. */
.tx-grid.hk-skin-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
padding-left: 0 !important;
gap: 10px !important;
justify-content: stretch !important;
}
.hk-skin-grid .tx-card-wrap {
width: 100% !important;
height: auto !important;
aspect-ratio: 1.1 / 1 !important;
min-height: 68px !important;
}
.hk-skin-grid .tx-card { height: 100% !important; border-radius: 14px !important; }
.hk-skin-grid .tx-room.hk-skin-num { font-size: 17px !important; }
}
/* ---- Bottom tab bar ---- */
.mobile-tabbar { display: none; }
@media (max-width: 640px) {
.mobile-tabbar {
position: fixed;
left: 0; right: 0; bottom: 0;
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
background: #dad8d2;
border-top: 1px solid rgba(20,18,14,.08);
padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
z-index: 60;
box-shadow: 0 -2px 8px rgba(20,18,14,.08);
}
.mtab {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 2px;
background: transparent;
border: 0;
padding: 6px 2px;
font-size: 10px;
font-weight: 700;
color: #6c655e;
letter-spacing: .2px;
cursor: pointer;
border-radius: 10px;
-webkit-tap-highlight-color: transparent;
position: relative;
}
.mtab .mtab-icon { font-size: 20px; line-height: 1; }
.mtab .mtab-label { line-height: 1; }
.mtab.on { color: #3F73D9; }
.mtab.on .mtab-icon { transform: scale(1.05); }
.mtab .mtab-badge {
position: absolute; top: 4px; right: 18%;
background: #e07a5f; color: #fff;
border-radius: 8px; padding: 1px 5px;
font-size: 8px; font-weight: 800;
min-width: 14px; text-align: center;
}
/* Maid: single-tab bar */
.mobile-tabbar.only-hk { grid-template-columns: 1fr; }
}
/* ---------------- Mobile HK grid — round 4 fix ----------------
The .hk-board wrapper on HousekeepingPage adds a THIRD class ahead of
.tx-grid.hk-skin-grid, giving those rules higher specificity than my
previous @media rule. Match .hk-board explicitly here so we win. Also
drop the fixed --hk-maint-card-w cap on .tx-card-wrap so cards stretch
to the 3-column track like Dashboard's cards do. */
@media (max-width: 640px) {
.hk-board .tx-grid.hk-skin-grid,
.hk-board .hk-maid-section-grid.tx-grid.hk-skin-grid,
.tx-grid.hk-skin-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
grid-template-rows: none !important;
grid-auto-rows: min-content !important;
height: auto !important;
padding: 0 !important;
gap: 10px !important;
justify-content: stretch !important;
justify-items: stretch !important;
}
.hk-board .hk-skin-grid .tx-card-wrap,
.hk-skin-grid .tx-card-wrap {
width: 100% !important;
max-width: 100% !important;
height: 64px !important;
min-height: 64px !important;
justify-self: stretch !important;
}
.hk-board .hk-skin-grid .tx-card,
.hk-skin-grid .tx-card {
width: 100% !important;
height: 100% !important;
padding: 8px 10px !important;
border-radius: 14px !important;
/* Dashboard-style: room number pinned top-left, meta below.
Keep the flex column so hk-skin-num + hk-skin-meta don't overlap. */
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
gap: 2px !important;
}
.hk-skin-grid .tx-room.hk-skin-num,
.hk-board .hk-skin-grid .tx-room.hk-skin-num {
font-size: 15px !important;
font-weight: 800 !important;
line-height: 1 !important;
text-align: left !important;
align-self: flex-start !important;
}
.hk-skin-meta, .hk-skin-done-label {
font-size: 9px !important;
text-align: left !important;
}
/* The .hk-board wrapper itself: on mobile the Dashboard 2-col grid
(left panel + right side card) has to collapse into a single stacked
column, otherwise the HK room grid gets squeezed into ~30% of the
viewport. */
.hk-board.dash-body {
grid-template-columns: 1fr !important;
display: flex !important;
flex-direction: column !important;
height: auto !important;
}
.hk-board .dash-left, .hk-board .dash-right { width: 100% !important; }
}