/* One layout rule for every page (customer: buttons and search must sit in the same place on every page)
   heading: title left, actions right -> tabs -> summary cards -> toolbar: filters left, search right -> content */
.gs-bar{display:none!important}
#app .page-heading .actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
/* same search box everywhere */
#app .page-search input{height:40px;border-radius:8px;padding-left:36px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237a879b' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:12px center!important}
#app .page-search{display:block;width:320px;max-width:100%;margin-left:auto}
#app .page-search input{width:100%}
#app .page-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
/* parking toolbar */
#app .pk-bar .pk-rates{margin:0;flex:1;min-width:220px;font-size:13px;color:var(--ui-muted,#5e6b7d)}
#app .pk-bar .pk-q{flex:0 1 320px;min-width:0}
/* calendar toolbar: selects left, search right */
#app .bc-filter{align-items:flex-end}#app .bc-filter .bc-q{flex:0 1 320px;min-width:200px;margin-left:auto}
#app .bc-today{margin-bottom:14px}
/* room plan: summary cards first, then the search / filter toolbar (filters left, search right) */
#app .rph-overview{display:flex;flex-direction:column}
#app .rph-overview .rph-stats{order:-1}
#app .rph-search-row{align-items:center}
#app .rph-search-row .rph-q{order:5;margin-left:auto;width:320px;max-width:100%}
#app .rph-search-row .rph-q-box{width:100%;min-width:0}
#app .page-heading .rph-lead-button{display:inline-flex;align-items:center;gap:6px}
#app .page-heading .rph-lead-button .lead-count{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#e8590c;color:#fff;font-size:12px;font-weight:700;display:inline-grid;place-items:center}
@media(max-width:700px){#app .page-search,#app .rph-search-row .rph-q,#app .bc-filter .bc-q,#app .pk-bar .pk-q{width:100%;flex-basis:100%;margin-left:0}}
/* tenants: building filter left, search right */
#app .tenant-toolbar .tenant-search-field{order:9;margin-left:auto;width:320px;max-width:100%;flex:0 1 320px}
#app .tenant-toolbar .tenant-search-field input{width:100%}
/* repairs / parcels / vehicles: same search width and look, pushed right */
#app .filters input.tenant-search,#app .kind-filters input[type=search]{width:320px;max-width:100%;margin-left:auto;height:40px;border-radius:8px;padding-left:36px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237a879b' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:12px center!important}
@media(max-width:700px){#app .tenant-toolbar .tenant-search-field{order:-1;width:100%;flex-basis:100%;margin-left:0}#app .filters input.tenant-search,#app .kind-filters input[type=search]{width:100%;margin-left:0}}
#app .rph-q>.rph-q-box{display:flex!important}
/* phones: the room-plan actions now live in the heading, so keep that row visible */
@media(max-width:600px){#app[data-view=rooms]>.page-heading{display:flex!important}#app[data-view=rooms]>.page-heading .actions{display:grid!important;grid-template-columns:1fr 1fr;width:100%;gap:8px}#app[data-view=rooms]>.page-heading .actions .btn{justify-content:center;min-height:44px}}
@media(max-width:600px){.shell:not(:has(#app[data-view=rooms],#app[data-view=meters],#app[data-view=billing],#app[data-view=repairs]))>.gs-bar{display:none!important}}
@media(max-width:600px){#app[data-view=rooms]>.page-heading .actions>.btn{width:100%;margin:0!important;grid-column:auto!important}}
#app .rph-search-row .rph-bld{display:inline-flex}
@media(max-width:600px){#app .rph-search-row .rph-bld{flex:1}#app .rph-search-row .rph-bld button{flex:1}}
/* building chip on floor cards: clear, solid (customer: ทำให้ชัดๆ) */
#app .rph-floor-head .rph-building-label{display:inline-flex!important;align-items:center;background:#24446a!important;color:#fff!important;border:0!important;font-size:14px!important;font-weight:700!important;padding:3px 12px!important;border-radius:6px!important;margin-right:10px;letter-spacing:.2px}
html[data-theme=dark] body #app .rph-floor .rph-floor-head h3 .rph-building-label{background:#3b6db0!important;color:#fff!important}
@media(max-width:600px){#app .rph-search-row{flex-wrap:wrap!important}#app .rph-search-row .rph-bld{flex:1 1 0!important;min-width:0!important;width:auto!important;display:flex!important;overflow:visible!important}#app .rph-search-row .rph-bld button{flex:1 1 0;min-width:0;white-space:nowrap}}
@media(max-width:600px){#app .rph-overview .rph-search-row{grid-template-columns:44px minmax(0,1fr)!important}#app .rph-overview .rph-search-row .rph-q{grid-column:1/-1;order:5}#app .rph-overview .rph-search-row .rph-bld{grid-column:2}}
/* menu bar when the window is narrow: no scrollbar drawn over the labels, compact buttons, fade at the edges */
@media (min-width:601px){
  html body aside nav#nav{scrollbar-width:none!important;-ms-overflow-style:none;scroll-behavior:smooth}
  html body aside nav#nav::-webkit-scrollbar{display:none!important;height:0!important}
  html body aside.nav-more-r nav#nav{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
  html body aside.nav-more-l nav#nav{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px);mask-image:linear-gradient(90deg,transparent,#000 48px)}
  html body aside.nav-more-l.nav-more-r nav#nav{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent)}
}
@media (min-width:601px) and (max-width:1180px){
  html body aside nav#nav button{min-width:58px!important;padding:8px 7px!important;gap:3px!important}
  html body aside nav#nav button .nav-text{font-size:11.5px!important}
  html body aside nav#nav button .count{right:2px!important}
}
@media (min-width:601px) and (max-width:900px){#app .rph-overview .rph-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
/* tenants: one simple line per tenant (customer: คนละ 1 บรรทัด ไม่ต้องสูง) */
@media (min-width:601px){
  #app .tenant-current-table tbody td{padding-top:9px!important;padding-bottom:9px!important;vertical-align:middle!important;white-space:nowrap}
  #app .tenant-current-table .td-room>small,#app .tenant-current-table .td-contract>small,#app .tenant-current-table .td-line>small{display:none!important}
  #app .tenant-current-table .td-person{display:table-cell}
  #app .tenant-current-table .td-person>*{display:inline-block!important;vertical-align:middle;margin:0!important}
  #app .tenant-current-table .td-person>small{margin-left:14px!important;font-size:14px!important}
  #app .tenant-current-table .td-person>small a{color:var(--ui-muted,#5e6b7d)!important;text-decoration:none}
  #app .tenant-current-table .td-contract>*{display:inline-block!important;vertical-align:middle;margin:0 8px 0 0!important}
  #app .tenant-current-table .td-room .room-no{font-size:15px}
  #app .tenant-current-table .tenant-row-actions{display:flex;gap:6px;justify-content:flex-end}
  #app .tenant-current-table .tenant-row-actions .btn{min-height:32px;padding:4px 12px}
}

/* 1line: one record = one row on desktop (skill /1line) */
@media (min-width:601px){
  #app table.one-line tbody td,#app:is([data-view=repairs],[data-view=leaves],[data-view=users],[data-view=summary],[data-view=tenants],[data-view=vehicles],[data-view=parking]) .card table tbody td{padding:9px 12px!important;vertical-align:middle!important;white-space:nowrap}
  #app table.one-line tbody td>small,#app:is([data-view=leaves],[data-view=users]) .card table tbody td>small{display:inline-block!important;margin:0 0 0 8px!important;font-size:12px!important;color:var(--ui-muted,#5e6b7d)!important;font-weight:400}
  #app table.one-line tbody td .badge{vertical-align:middle}
  #app table.one-line .btn,#app[data-view=repairs] .card table .btn{min-height:30px;padding:3px 10px;font-size:13px}
  #app[data-view=repairs] .card table select{min-height:32px;padding:3px 8px;font-size:13px}
  #app .parcel-list:has(table){display:block;padding:0;background:var(--ui-surface,#fff);border:1px solid var(--ui-line,#e2e6ec);border-radius:12px;overflow:hidden}
  #app .news-list:has(table){display:block;padding:0}
  #app table.one-line thead th{white-space:nowrap}
  #app .parcel-table tr.done td,#app .news-table tr:not(.pinned) td .badge.wait{opacity:.8}
  #app .parcel-table tr{cursor:pointer}
  #app .parcel-thumb{width:28px;height:28px;border-radius:4px;object-fit:cover;vertical-align:middle;margin-right:6px}
  #app .news-table td strong{font-weight:600}
  #app .news-acts .btn,#app .parcel-act .btn{margin-left:4px}
  #app .pk-plate-inline b{display:inline-block;border:2px solid #253247;border-radius:5px;padding:0 8px;background:#fff;color:#111;font-size:15px;line-height:24px}
  html[data-theme=dark] #app .pk-plate-inline b{background:#f5f5f5;color:#111}
  #app .pk-table .pk-tags{display:inline-flex;gap:6px;flex-wrap:nowrap}
}
@media (min-width:601px){#app[data-view=repairs] .card table .repair-cost-summary{display:inline-flex!important;gap:6px;align-items:center;white-space:nowrap}#app[data-view=repairs] .card table .repair-cost-summary>*{display:inline!important}#app[data-view=repairs] .card table .repair-cost-note{font-size:12px}}
@media (min-width:601px){html body #app[data-view=repairs] .card table .repair-cost-summary{display:inline-flex!important;flex-direction:row!important;align-items:center!important;gap:6px!important}html body #app[data-view=repairs] .card table .repair-cost-summary>*{display:inline!important;line-height:1.3!important}html body #app[data-view=repairs] .card table :is(select,.assign-select,.status-select){height:32px!important;min-height:32px!important;padding:2px 8px!important}}
/* 1line: meter sheet — one row per room, input and note on the same line */
@media (min-width:601px){
  #app[data-view=meters] .ms-table tbody td{padding:7px 12px!important;vertical-align:middle!important;white-space:nowrap}
  #app[data-view=meters] .ms-table tbody td .ms-input{display:inline-flex!important;align-items:center;vertical-align:middle;margin:0}
  #app[data-view=meters] .ms-table tbody td .ms-input input{height:36px!important;min-height:0!important;padding:4px 8px!important;width:110px!important;font-size:15px}
  #app[data-view=meters] .ms-table tbody td .ms-input>span{font-size:14px;padding:0 6px}
  #app[data-view=meters] .ms-table tbody td>small{display:inline-block!important;margin:0 0 0 10px!important;font-size:12px!important;vertical-align:middle}
  #app[data-view=meters] .ms-table tbody td .ms-more{min-height:30px;height:30px;width:30px;padding:0}
  #app[data-view=meters] .ms-table tbody td .badge{vertical-align:middle}
  #app[data-view=meters] .ms-floor-head{padding:10px 16px}
}
/* ---------- one toolbar rule for every page: building buttons first (left), filters next, search last (right, 320px) ---------- */
#app .bld-toolbar{display:flex!important;flex-wrap:wrap;align-items:center;gap:8px 10px}
#app .bld-toolbar>.bld-seg{order:-10;display:inline-flex}
#app .bld-toolbar>input[type=search],#app .bld-toolbar>.tenant-search{order:20;margin-left:auto!important;width:320px!important;max-width:100%;flex:0 1 320px!important;height:40px;border-radius:8px;padding-left:36px!important;background:var(--ui-surface,#fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237a879b' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center!important}
#app .bld-toolbar>.ms-floor-pick{order:10;height:40px;margin:0}
#app .bc-filter .bc-bldseg{align-self:flex-end;order:-10}
#app .bc-filter .bc-bldseg .bld-seg{display:inline-flex}
/* generic desktop.js toolbars (ค่ามัดจำ etc.) */
#app .desktop-filter-toolbar .bld-select-hidden{display:none!important}
#app .desktop-filter-toolbar>.bld-seg.from-select{order:-10;display:inline-flex}
#app .desktop-filter-toolbar:not(:has(.bp-ftoggle)){display:flex!important;flex-wrap:wrap;align-items:center;gap:8px 10px}
#app .desktop-filter-toolbar:not(:has(.bp-ftoggle))>.desktop-filter-search{order:20;margin-left:auto!important;width:320px!important;max-width:100%;flex:0 1 320px!important;display:flex!important}
#app .desktop-filter-toolbar:not(:has(.bp-ftoggle))>.desktop-filter-search>span{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#app .desktop-filter-toolbar:not(:has(.bp-ftoggle))>.desktop-filter-search input{width:100%;height:40px!important;border-radius:8px!important;padding-left:36px!important;background:var(--ui-surface,#fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237a879b' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center!important}
/* period (ปี / เดือน) always in the heading on the right, labels hidden like the bill page */
#app[data-view=meters] .page-heading .actions .period-inline{display:flex;gap:8px;margin:0;padding:0;background:none;border:0;box-shadow:none}
#app[data-view=meters] .page-heading .actions .period-inline .field{margin:0}
#app[data-view=meters] .page-heading .actions .period-inline label{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#app[data-view=meters] .page-heading .actions .period-inline select{min-width:120px;height:42px}
/* same 320px search box on room plan + tenants */
#app .tenant-toolbar .tenant-search-field{flex:0 1 320px!important;width:320px!important}
@media(max-width:600px){
  #app .bld-toolbar>input[type=search],#app .bld-toolbar>.tenant-search,#app .desktop-filter-toolbar:not(:has(.bp-ftoggle))>.desktop-filter-search{order:-20;width:100%!important;flex:1 1 100%!important;margin-left:0!important}
  #app .bld-toolbar>.bld-seg,#app .desktop-filter-toolbar>.bld-seg.from-select{flex:1 1 100%}#app .bld-toolbar>.bld-seg button,#app .desktop-filter-toolbar>.bld-seg button{flex:1}
  #app[data-view=meters] .page-heading .actions .period-inline{width:100%}#app[data-view=meters] .page-heading .actions .period-inline .field{flex:1}#app[data-view=meters] .page-heading .actions .period-inline select{width:100%}
}
/* every toolbar sits in the same card with the same inner spacing (12px 16px), so building buttons and search line up page to page */
#app .bld-toolbar{background:var(--ui-surface,#fff)!important;border:1px solid var(--ui-line,#e2e6ec)!important;border-radius:12px!important;padding:12px 16px!important;margin:0 0 14px!important;box-shadow:none!important}
#app .bc-filter{padding:12px 16px!important}
#app .desktop-filter-toolbar{padding:12px 16px!important}
#app .rph-overview .rph-search{padding:12px 16px!important}
#app .tenant-toolbar{padding:12px 16px!important}
@media (min-width:601px){
  #app .rph-search-row>.rph-bld,#app .desktop-filter-toolbar>.bp-bldseg{order:-10}
  #app .rph-search-row>.rph-filter-btn,#app .desktop-filter-toolbar>.bp-ftoggle{order:-5}
}