/* SmartPool 23:10 visual baseline. Business state and payment logic stay in their modules. */
:root{
  --sp-brand:#205f52;
  --sp-brand-hover:#174a40;
  --sp-brand-soft:#eaf4f0;
  --sp-rail:#173b33;
  --sp-rail-active:#315c51;
  --sp-rail-text:#d1e2dd;
  --sp-canvas:#edf1f5;
  --sp-surface:#fff;
  --sp-surface-subtle:#f7f9fb;
  --sp-ink:#243142;
  --sp-muted:#64748b;
  --sp-line:#dce4ed;
  --sp-line-strong:#c8d4df;
  --sp-focus:#b7791f;
  --sp-danger:#b23b22;
  --sp-refund:#c2410c;
  --sp-refund-soft:#fff3eb;
  --sp-success:#1c8a5a;
  --sp-radius-sm:8px;
  --sp-radius-md:12px;
  --sp-radius-lg:16px;
  --sp-shadow-sm:0 1px 2px rgb(36 49 66 / 5%);
  --sp-shadow-menu:0 12px 32px rgb(36 49 66 / 16%);
  --sp-motion-fast:120ms;
  --sp-motion-normal:180ms;
  --table-active:#3b6fe0;
  --table-active-soft:#eef4ff;
  --table-active-deep:#2152b8;
  --table-near:#f2711c;
  --table-near-soft:#fff3eb;
  --table-near-deep:#d4570b;
  --table-unpaid:#e5484d;
  --table-unpaid-soft:#fff1f1;
  --table-unpaid-deep:#c92a2f;
  --table-settled:#7c5cdb;
  --table-settled-soft:#f4f1ff;
  --table-settled-deep:#5b3db8;
  --table-pause:#9db4e8;
  --table-pause-soft:#f3f6fc;
  --table-pause-deep:#4f6386;
  --table-free:#22a06b;
  --table-free-soft:#fff;
  --table-free-deep:#1c8a5a;
  --table-unavailable:#d5dae1;
  --table-unavailable-soft:#f7f8fa;
  --table-unavailable-deep:#a7b0bc;
}

body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  text-rendering:optimizeLegibility;
}
button,input,select,textarea{font:inherit}
button{touch-action:manipulation}
strong,dd,.amount,.pw-total,.pw-price,.ck-amount,.rf-amount-card,.wb-card-value,.bd-amount{font-variant-numeric:tabular-nums}

/* One rail, topbar and account menu for both the table board and every POS page. */
.sp-rail{
  width:80px;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:16px 8px 20px;
  overflow-y:auto;
  background:var(--sp-rail);
  color:var(--sp-rail-text);
  scrollbar-width:thin;
}
.sp-rail-logo{
  display:grid;
  place-items:center;
  flex:0 0 36px;
  width:36px;
  height:36px;
  margin:0 0 12px;
  border:1px solid rgb(255 255 255 / 20%);
  border-radius:11px;
  color:#fff;
  font-size:16px;
  font-weight:800;
  letter-spacing:-.5px;
}
.sp-rail-button,.sp-rail-current{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex:0 0 58px;
  width:64px;
  min-height:58px;
  padding:7px 4px;
  border:0;
  border-radius:11px;
  background:transparent;
  color:inherit;
  font-size:12px;
  font-weight:500;
  line-height:1.2;
  text-align:center;
}
.sp-rail-button{cursor:pointer}
.sp-rail-button:hover{background:rgb(255 255 255 / 8%);color:#fff}
.sp-rail-current{background:var(--sp-rail-active);color:#fff;box-shadow:inset 0 0 0 1px rgb(255 255 255 / 5%)}
.sp-rail-icon{display:block;width:22px;height:22px}
.sp-rail-button:focus-visible,.sp-account summary:focus-visible,.sp-account-menu button:focus-visible{outline:2px solid #f3c76a;outline-offset:2px}

.sp-topbar{
  position:relative;
  z-index:10;
  display:flex;
  align-items:center;
  gap:20px;
  height:56px;
  min-height:56px;
  padding:0 24px;
  border-bottom:1px solid var(--sp-line);
  background:var(--sp-surface);
  color:var(--sp-ink);
}
.sp-topbar-product{display:flex;align-items:center;gap:18px;min-width:0}
.sp-topbar-product>strong{flex:none;font-size:15px;font-weight:700}
.sp-topbar-product>span{overflow:hidden;color:var(--sp-muted);font-size:13px;text-overflow:ellipsis;white-space:nowrap}
.sp-shift{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:4px 11px;
  border:1px solid #bfd8d0;
  border-radius:999px;
  background:var(--sp-brand-soft);
  color:var(--sp-brand);
  font-size:12px;
  white-space:nowrap;
}
.sp-account{margin-left:auto;flex:none;font-size:12px}
.sp-account details{position:relative}
.sp-account summary{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:4px 6px;
  border-radius:8px;
  cursor:pointer;
  list-style:none;
}
.sp-account summary::-webkit-details-marker{display:none}
.sp-account summary:hover{background:var(--sp-surface-subtle)}
.sp-account-avatar{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--sp-brand-soft);
  color:var(--sp-brand);
  font-size:12px;
  font-weight:700;
}
.sp-account-copy{display:grid;gap:1px;min-width:0}
.sp-account-copy>strong{max-width:120px;overflow:hidden;font-size:12px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.sp-account-copy>small{color:var(--sp-muted);font-size:10px}
.sp-account-chevron{color:var(--sp-muted);font-size:15px}
.sp-account details[open]{z-index:20}
.sp-account-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:168px;
  padding:6px;
  border:1px solid var(--sp-line);
  border-radius:12px;
  background:#fff;
  box-shadow:var(--sp-shadow-menu);
}
.sp-account-menu button{
  display:block;
  width:100%;
  min-height:38px;
  margin:0;
  padding:8px 12px;
  border:0;
  border-radius:8px;
  background:#fff;
  color:var(--sp-ink);
  font-size:13px;
  text-align:left;
}
.sp-account-menu button:hover{background:var(--sp-surface-subtle)}
.sp-account-menu .sp-logout{color:var(--sp-danger)}

.ps-unified{height:100dvh;min-height:0;overflow:hidden;background:var(--sp-canvas)}
.ps-unified .ps-body{grid-template-columns:80px minmax(0,1fr);height:100%;min-height:0}
.ps-unified .ps-workspace{display:grid;grid-template-rows:56px minmax(0,1fr);min-width:0;min-height:0}
.ps-unified .ps-surface{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain}

/* Shared controls retain module-specific refund, danger and disabled semantics. */
.wb button,.ps button,.staff-shell button{transition:background-color var(--sp-motion-fast) ease,border-color var(--sp-motion-fast) ease,color var(--sp-motion-fast) ease,box-shadow var(--sp-motion-fast) ease}
.wb button:focus-visible,.ps button:focus-visible,.staff-shell button:focus-visible{outline:2px solid var(--sp-focus);outline-offset:2px}
.wb input:focus-visible,.ps :is(input,select,textarea):focus-visible,.staff-shell :is(input,textarea):focus-visible{border-color:var(--sp-brand);outline:2px solid rgb(32 95 82 / 18%);outline-offset:1px}
.ps :is(button,input,select,textarea):disabled,.wb :is(button,input,select,textarea):disabled{cursor:not-allowed}
.ps .secondary,.wb .secondary{border-color:var(--sp-line-strong)}

/* Appendix 121–124: exact table-state palette, readable cards and independent scrolling. */
.wb .wb-card.wb-state-active{border-top-color:var(--table-active);background:var(--table-active-soft);--state-color:var(--table-active-deep)}
.wb .wb-card.wb-state-near{border-top-color:var(--table-near);background:var(--table-near-soft);--state-color:var(--table-near-deep)}
.wb .wb-card.wb-state-unpaid{border-top-color:var(--table-unpaid);background:var(--table-unpaid-soft);--state-color:var(--table-unpaid-deep)}
.wb .wb-card.wb-state-settled{border-top-color:var(--table-settled);background:var(--table-settled-soft);--state-color:var(--table-settled-deep)}
.wb .wb-card.wb-state-pause{border-top-color:var(--table-pause);background:var(--table-pause-soft);--state-color:var(--table-pause-deep)}
.wb .wb-card.wb-state-free{border-top-color:var(--table-free);background:var(--table-free-soft);--state-color:var(--table-free-deep)}
.wb .wb-card.wb-state-unavailable{border-top-color:var(--table-unavailable);background:var(--table-unavailable-soft);--state-color:var(--table-unavailable-deep);color:var(--table-unavailable-deep)}
.wb .wb-card{border-radius:12px;box-shadow:var(--sp-shadow-sm)}
.wb .wb-card:hover{box-shadow:0 4px 14px rgb(36 49 66 / 10%)}
.wb .wb-card:focus-visible{outline:3px solid var(--sp-focus);outline-offset:2px}
.wb-progress{background:var(--table-active)}
.wb-state-near .wb-progress{background:var(--table-near)}
.wb-state-pause .wb-progress{background:var(--table-pause)}
.wb-near-tag{background:var(--table-near)}
.wb-counter-free{border-left-color:var(--table-free)!important}
.wb-counter-free>strong{color:var(--table-free-deep)}
.wb-counter-near{border-left-color:var(--table-near)!important}
.wb-counter-near>strong{color:var(--table-near-deep)}
.wb-counter i{background:var(--table-active)}
.wb-counter-pause i{background:var(--table-pause)}
.wb-counter-unpaid i{background:var(--table-unpaid)}
.wb-counter-settled i{background:var(--table-settled)}
.wb-counter-unavailable i{background:var(--table-unavailable)}

/* Table detail: primary work first, secondary consumption operations second. */
.pw-aside,.ck-aside,.rf-aside{scrollbar-width:thin;scrollbar-color:var(--sp-line-strong) transparent}
.pw-action-card{border-color:var(--sp-line);border-radius:12px;box-shadow:var(--sp-shadow-sm)}
.pw-action-primary{padding:12px;border-color:#c7ddd5;background:var(--sp-brand-soft)}
.pw-action-primary>button{width:100%;margin-top:10px}
.pw-primary-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pw-primary-actions button{min-width:0;margin:0;padding-inline:8px}
.pw-action-primary [data-show-bill]{border-color:var(--sp-brand);background:var(--sp-brand);color:#fff}
.pw-aside>h2{font-size:17px;letter-spacing:-.2px}
.pw-heading,.ck-heading,.rf .rf-heading{min-width:0}
.pw-heading>div,.ck-heading>div{min-width:0}
.pw-heading h1,.ck-heading h1{overflow-wrap:anywhere}
.pw-card,.ck-card,.rf-card{border-color:var(--sp-line);box-shadow:var(--sp-shadow-sm)}
.pw-total{border:1px solid #d2e5dc;background:var(--sp-brand-soft)}
.pw-total strong{letter-spacing:-.6px;line-height:1.2}
.pw-badge{border:1px solid #c9e5d6;font-weight:500;white-space:nowrap}
.pw-tabs{scrollbar-width:thin}
.pw-fees table,.ck-row,.rf-summary{font-variant-numeric:tabular-nums}
.pw-checkout-footer{flex-shrink:0}

/* Refund orange and destructive red are deliberately different. */
.rf-role-cash,.rf-lines-total strong,.rf-amount-card>strong,.rf-group-totals strong,.rf-feedback,.sv-refund-warning{color:var(--sp-refund)}
.rf-amount-card,.rf-confirm-total{background:var(--sp-refund-soft)}
.rf button:not(.secondary),.rf-confirm button:not(.secondary){border-color:var(--sp-refund);background:var(--sp-refund)}
.staff-card b,.staff-line b{color:var(--sp-refund)}
.staff-actions button{background:var(--sp-refund)}
.staff-actions button.secondary{background:#fff;color:var(--sp-ink)}
.staff-error{color:var(--sp-danger)}

@media(max-width:1100px){
  .sp-topbar{padding-inline:18px}
  .sp-topbar-product{gap:12px}
  .pw-layout,.ck,.rf-layout{grid-template-columns:minmax(0,1fr) 300px}
}
@media(max-width:850px){
  .sp-topbar-product>strong{display:none}
  .sp-account-copy>small{display:none}
  .ps-unified .ps-body{grid-template-columns:62px minmax(0,1fr)}
  .ps-unified .sp-rail,.wb .sp-rail{width:62px;padding-inline:4px}
  .ps-unified .sp-rail-button,.ps-unified .sp-rail-current,.wb .sp-rail-button,.wb .sp-rail-current{width:54px}
}
@media(max-width:760px){
  .pw-layout,.ck,.rf-layout{grid-template-columns:minmax(0,1fr)}
  .sp-topbar{padding-inline:12px;gap:10px}
  .sp-account-copy{display:none}
  .sp-account-chevron{display:none}
  .sp-shift{max-width:150px;overflow:hidden;text-overflow:ellipsis}
  .pw-primary-actions{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .ps-unified .ps-body{grid-template-columns:56px minmax(0,1fr)}
  .ps-unified .sp-rail{width:56px;padding-inline:2px}
  .ps-unified .sp-rail-button,.ps-unified .sp-rail-current{width:50px}
  .sp-topbar-product>span{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}