/* Phase 8.7.7 — real 3-row paging, transaction tab fix, and loose frame spacing */

/* Hidden must win against older !important grid/list styles. This fixes page 1 showing every service/product/row. */
.phase876-paged-grid > [hidden],
.phase876-paged-grid > .phase877-page-hidden,
.phase876-paged-list > [hidden],
.phase876-paged-list > .phase877-page-hidden,
.list-table > [hidden],
.report-table tbody tr[hidden],
.report-table tbody tr.phase877-page-hidden{
  display:none!important;
}

/* Real 3-row button windows: 6 columns x 3 rows = 18 buttons per page. */
.phase876-paged-grid,
.phase872-product-grid{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  grid-template-rows:repeat(3,64px)!important;
  grid-auto-rows:64px!important;
  gap:10px!important;
  max-height:212px!important;
  min-height:212px!important;
  overflow:hidden!important;
  padding:0!important;
  align-content:start!important;
}
.phase876-paged-grid .quick-item,
.phase876-paged-grid .product-button,
.phase872-product-grid .quick-item,
.phase872-product-grid .product-button{
  height:64px!important;
  min-height:64px!important;
  max-height:64px!important;
  padding:8px 7px!important;
  border-radius:13px!important;
  line-height:1.05!important;
  white-space:normal!important;
}
.phase876-blank-tile{
  display:block!important;
  visibility:hidden!important;
  height:64px!important;
  min-height:64px!important;
}
.phase876-pager{
  display:grid!important;
  grid-template-columns:96px minmax(120px,1fr) 96px!important;
  gap:14px!important;
  align-items:center!important;
  margin:14px 0 4px!important;
  padding:0!important;
}
.phase876-pager button{
  min-height:42px!important;
  border-radius:14px!important;
  background:linear-gradient(135deg,#263f67,#071b38)!important;
  color:#fff!important;
  letter-spacing:.03em!important;
}
.phase876-pager span{
  text-align:center!important;
  font-weight:950!important;
  color:#805513!important;
}

/* Looser, readable entry panels. */
.phase87-work-panel,
.phase872-register-right,
.phase872-register-left,
.phase87-active-panel{
  border-color:#f0b96a!important;
  box-shadow:0 12px 28px rgba(164,104,22,.09)!important;
}
.phase87-service-section,
.phase87-profile-section,
.nested-panel{
  padding:18px!important;
}
.phase87-step-title{
  margin:14px 0 9px!important;
}
.phase87-detail-grid,
.phase87-compact-grid{
  gap:14px 18px!important;
}
.phase87-bottom-actions{
  margin-top:18px!important;
  gap:12px!important;
}
.phase87-client-row{
  gap:16px!important;
  margin-bottom:14px!important;
}

/* Balanced 40/60 split and even frames. */
.phase87-pos-split{
  grid-template-columns:minmax(440px,40%) minmax(0,60%)!important;
  gap:18px!important;
  align-items:start!important;
}
.phase872-pos-register{
  grid-template-columns:minmax(560px,60%) minmax(420px,40%)!important;
  gap:18px!important;
  align-items:start!important;
}
.phase872-register-left,
.phase872-register-right{
  padding:18px!important;
}
.phase872-cart-table-wrap{
  height:330px!important;
  min-height:330px!important;
  max-height:330px!important;
  overflow:hidden!important;
}
.phase87-shop-page .phase872-cart-table-wrap{
  height:390px!important;
  min-height:390px!important;
  max-height:390px!important;
}

/* Transaction tabs: plus creates a real new tab instead of only changing text. */
.phase872-transaction-tabs{
  display:flex!important;
  align-items:stretch!important;
  gap:0!important;
  height:48px!important;
  overflow:hidden!important;
}
.phase872-transaction-tabs span.active,
.phase872-transaction-tabs .tx-tab{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:48px!important;
  min-width:154px!important;
  padding:0 18px!important;
  border:0!important;
  border-right:1px solid #cfe0ef!important;
  background:#eaf7ff!important;
  color:#0875b1!important;
  font-size:17px!important;
  font-weight:950!important;
  cursor:pointer!important;
}
.phase872-transaction-tabs .tx-tab.active,
.phase872-transaction-tabs span.active{
  background:#e8f6ff!important;
  color:#0875b1!important;
}
.phase872-transaction-tabs .plus{
  position:static!important;
  height:48px!important;
  min-width:54px!important;
  width:54px!important;
  flex:0 0 54px!important;
  border-radius:0!important;
}

/* Left customer/totals boxes: buttons at bottom, no cramped middle. */
.phase872-bottom-split{
  gap:14px!important;
  align-items:stretch!important;
}
.phase872-totals-box,
.phase872-customer-box{
  padding:16px!important;
  border-radius:13px!important;
}
.phase872-customer-box{
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  min-height:150px!important;
}
.phase872-customer-box .muted-text,
.phase877-customer-help{
  margin:10px 0 12px!important;
  line-height:1.45!important;
}
.phase877-customer-actions{
  margin-top:auto!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:12px!important;
  align-items:end!important;
}
.phase877-customer-actions .button,
.phase87-shop-page .phase872-customer-box > .button,
.phase87-shop-page .phase872-customer-box > a.button{
  min-height:40px!important;
  height:40px!important;
  padding:8px 12px!important;
  border-radius:12px!important;
  font-size:14px!important;
  line-height:1.1!important;
  width:auto!important;
}
.phase87-shop-page .phase872-customer-box{
  min-height:220px!important;
  justify-content:flex-start!important;
}
.phase87-shop-page .phase872-customer-grid{
  gap:12px!important;
  grid-template-columns:minmax(160px,.78fr) minmax(200px,1fr)!important;
}

/* Shop keypad/function area: readable but not tight. */
.phase872-keypad,
.phase872-function-grid{
  gap:8px!important;
}
.phase872-keypad button,
.phase872-function-grid button{
  min-height:38px!important;
  border-radius:10px!important;
}
.phase872-keypad button{
  background:#fff!important;
  color:#061a38!important;
}
.phase872-payment-summary{
  padding:12px!important;
  margin:12px 0!important;
}
.phase872-payment-summary textarea{
  min-height:52px!important;
}

/* Keep standard list pages paged and avoid long page stretch. */
.phase876-paged-list > .list-row,
.phase876-paged-list > .card-lite,
.phase876-paged-list > .phase875-label-product-row,
.phase876-paged-list > .phase872-label-product-row,
.phase876-paged-list > .phase872-tag-order-card{
  margin-bottom:10px!important;
}
.phase876-list-pager{
  margin-top:12px!important;
  padding-top:12px!important;
}

/* Back button is a stable link now; keep it nice but not too large. */
.phase876-page-back-row{
  margin:4px 0 12px!important;
}
.phase876-back-button{
  min-height:40px!important;
  padding:9px 18px!important;
  border-radius:18px!important;
}

@media (max-width:1400px){
  .phase876-paged-grid,.phase872-product-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;grid-template-rows:repeat(3,64px)!important;max-height:212px!important;min-height:212px!important;}
}
@media (max-width:1180px){
  .phase87-pos-split,.phase872-pos-register{grid-template-columns:1fr!important;}
}