/* Mobile shell and Check Pay. Desktop composition and payment actions stay intact. */
@media (max-width:768px) {
  :root {
    --bloom-safe-top:env(safe-area-inset-top,0px);
    --bloom-safe-bottom:env(safe-area-inset-bottom,0px);
    --bloom-tabbar-height:calc(64px + var(--bloom-safe-bottom));
  }
  #app-screen { box-sizing:border-box; height:100dvh; padding-top:var(--bloom-safe-top); }
  #app-screen>.layout.layout-transfer { height:calc(100dvh - var(--bloom-safe-top)); min-height:0; }
  #mobile-tabbar.mobile-tabbar {
    box-sizing:border-box; height:var(--bloom-tabbar-height); min-height:var(--bloom-tabbar-height);
    padding:6px max(4px,env(safe-area-inset-right,0px)) calc(6px + var(--bloom-safe-bottom)) max(4px,env(safe-area-inset-left,0px));
    grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-rows:52px;
    align-items:stretch; gap:0; overflow:visible;
  }
  #mobile-tabbar .mobile-tab {
    box-sizing:border-box; width:100%; min-width:0; height:52px; min-height:52px;
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    padding:4px 1px; gap:4px; border-radius:11px; font:500 10px/13px Inter,system-ui,sans-serif;
  }
  #mobile-tabbar .mobile-tab-icon { display:grid; place-items:center; width:24px; height:24px; flex:none; line-height:1; }
  #mobile-tabbar .mobile-tab-icon .ui-icon { width:22px; height:22px; margin:0; }
  #mobile-tabbar .mobile-tab>span:last-child { display:block; width:100%; overflow:visible; white-space:nowrap; text-align:center; letter-spacing:-.2px; }
  #app-screen :is(.panel-body,.codes-panel-body,.redeem-feed) {
    scroll-padding-bottom:calc(var(--bloom-tabbar-height) + 16px);
  }
  #panel-settings .panel-body,
  .layout-transfer #panel-pay .pay-panel-body {
    padding-bottom:calc(var(--bloom-tabbar-height) + 20px);
  }
  /* Overlays use the full viewport; leave room for the notch and home indicator too. */
  dialog[open] { max-height:calc(100dvh - var(--bloom-safe-top) - var(--bloom-safe-bottom) - 24px)!important; }
  .layout-transfer #panel-pay .pay-panel-header {
    display:grid; grid-template-columns:minmax(0,1fr) 184px; align-items:center;
    gap:8px; height:auto; min-height:70px; padding:10px 12px; box-sizing:border-box;
  }
  .layout-transfer #panel-pay .pay-panel-heading { width:auto; min-width:0; gap:6px; }
  .layout-transfer #panel-pay .pay-panel-heading .back-btn { width:28px; min-width:28px; flex:0 0 28px; margin:0; }
  .layout-transfer #panel-pay .pay-panel-title-group { min-width:0; }
  #app-screen .layout-transfer #panel-pay .pay-panel-title-group .panel-title { font-size:20px!important; line-height:1.3; white-space:nowrap; }
  .layout-transfer #panel-pay .pay-account { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
  .layout-transfer #panel-pay .exchange-rate-control {
    display:grid; grid-template-columns:minmax(0,1fr) 82px; grid-template-rows:40px;
    width:184px; max-width:100%; min-width:0; min-height:0; height:50px;
    gap:6px; padding:4px; margin:0; justify-self:end; box-sizing:border-box;
  }
  .layout-transfer #panel-pay .exchange-rate-control label { display:none; }
  .layout-transfer #panel-pay .exchange-rate-value {
    display:flex; width:100%; height:40px; min-width:0; min-height:40px; flex-basis:auto;
    padding:0 5px; gap:2px; border-radius:9px; box-sizing:border-box;
  }
  .layout-transfer #panel-pay .exchange-rate-control input {
    min-width:0; width:100%; height:38px; padding:0; font-size:16px; line-height:normal; text-align:center; appearance:textfield; -moz-appearance:textfield;
  }
  .layout-transfer #panel-pay #usd-rate-input::-webkit-inner-spin-button,
  .layout-transfer #panel-pay #usd-rate-input::-webkit-outer-spin-button { -webkit-appearance:none; display:none; margin:0; width:0; }
  .layout-transfer #panel-pay .exchange-rate-unit { padding:0; font-size:10px; flex:none; }
  .layout-transfer #panel-pay .exchange-rate-control button {
    width:82px; min-width:0; height:40px; min-height:40px; padding:0 5px;
    font-size:11px; line-height:1.3; border-radius:9px; box-sizing:border-box;
  }
  .layout-transfer #panel-pay .payment-row-controls {
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px;
    gap:8px; align-items:end; margin-top:12px; padding-top:12px;
  }
  .layout-transfer #panel-pay .payment-row-controls>.pay-control {
    grid-column:auto; grid-row:auto; width:auto; min-width:0;
  }
  .layout-transfer #panel-pay .payment-row-controls>.pay-control:first-child { grid-column:1; grid-row:1; }
  .layout-transfer #panel-pay .payment-row-controls>.biz-method-control { grid-column:2/4; grid-row:1; min-width:0; }
  .layout-transfer #panel-pay .payment-row-controls>.pay-control:has(.payment-status-select) { grid-column:1; grid-row:2; }
  .layout-transfer #panel-pay .payment-row-controls .pay-control select {
    min-width:0; width:100%; min-height:44px; height:44px; font-size:16px;
  }
  .layout-transfer #panel-pay .payment-row-controls>.payment-order-actions {
    grid-column:2; grid-row:2; width:100%; min-width:0; margin:0; align-self:end;
  }
  .layout-transfer #panel-pay .payment-row-controls .payment-fulfillment-action {
    grid-column:2; grid-row:2; width:100%; min-width:0; min-height:44px; height:44px;
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding:0 6px!important; margin:0!important; font-size:11px!important; border-radius:10px;
  }
  .layout-transfer #panel-pay .payment-row-controls>.payment-history-btn:not(.payment-load-more) {
    grid-column:3; grid-row:2; width:44px; min-width:44px; height:44px; min-height:44px; margin:0;
  }
  .layout-transfer #panel-pay .payment-row-controls .payment-fulfillment-action .ui-icon { width:16px; height:16px; flex:none; margin:0; }
  .layout-transfer #panel-pay .payment-row { min-width:0; }
  .layout-transfer #panel-pay .payment-row-info { min-width:0; }
  .layout-transfer #panel-pay .payment-row-amount { font-size:18px; white-space:nowrap; }
  .layout-transfer #panel-pay .payment-day-header { gap:8px; }
}
@media (max-width:359px) {
  #mobile-tabbar .mobile-tab { font-size:9px; letter-spacing:-.3px; }
  .layout-transfer #panel-pay .pay-panel-header { grid-template-columns:minmax(0,1fr); gap:6px; }
  .layout-transfer #panel-pay .exchange-rate-control { grid-row:2; }
  .layout-transfer #panel-pay .payment-row { grid-template-columns:minmax(0,1fr); }
  .layout-transfer #panel-pay .payment-row-amount { grid-column:1; justify-self:start; margin-top:4px; }
}

/* A full-width staff field prevents long employee names from disappearing. */
@media(max-width:768px){
 .layout-transfer #panel-pay .pay-panel-header{grid-template-columns:minmax(0,1fr);gap:8px}
 .layout-transfer #panel-pay .exchange-rate-control{grid-row:2;width:100%;grid-template-columns:minmax(0,1fr) 108px;height:54px;grid-template-rows:44px}
 .layout-transfer #panel-pay .exchange-rate-value,.layout-transfer #panel-pay .exchange-rate-control button{height:44px;min-height:44px}
 .layout-transfer #panel-pay .exchange-rate-control button{width:108px;font-size:12px}
 .layout-transfer #panel-pay .payment-row-controls{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .layout-transfer #panel-pay .payment-row-controls>.pay-control:first-child{grid-column:1/-1;grid-row:1}
 .layout-transfer #panel-pay .payment-row-controls>.biz-method-control{grid-column:1;grid-row:2}
 .layout-transfer #panel-pay .payment-row-controls>.pay-control:has(.payment-status-select){grid-column:2;grid-row:2}
 .layout-transfer #panel-pay .payment-row-controls>.payment-order-actions,.layout-transfer #panel-pay .payment-row-controls .payment-fulfillment-action{grid-column:1;grid-row:3}
 .layout-transfer #panel-pay .payment-row-controls>.payment-history-btn:not(.payment-load-more){grid-column:2;grid-row:3;justify-self:end}
 .layout-transfer #panel-pay #payout-ledger-toggle{min-height:44px!important}
}

#app-screen #panel-pay #payout-ledger-toggle:focus-visible{outline:2px solid var(--blue)!important;outline-offset:3px;box-shadow:none!important}