:root{
  --rf-vh: 1vh;
}

@media (max-width: 900px){
  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  body.rf-mobile{
    overflow-y:auto !important;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
    overscroll-behavior-y:contain;
  }

  body.rf-mobile :is(.page,.app,.shell,.stage){
    width:100%;
    max-width:100%;
    min-width:0;
    height:auto !important;
    min-height:calc(var(--rf-vh) * 100) !important;
    padding-left:max(8px, env(safe-area-inset-left)) !important;
    padding-right:max(8px, env(safe-area-inset-right)) !important;
    padding-bottom:max(8px, env(safe-area-inset-bottom)) !important;
    gap:8px !important;
  }

  body.rf-mobile :is(.workspace,.content,.wrap,.layout,.sheet,.mainTableBlock,.layout-grid,.grid,.subgrid,.summary,.status-panel,.statusbar,.stats,.form-grid,.filters,.filter-row,.grid-toolbar,.sheetGrid,.zaleGrid,.group-grid){
    min-width:0;
  }

  body.rf-mobile :is(.wrap,.content,.workspace,.layout,.sheet,.mainTableBlock){
    flex-direction:column !important;
    align-items:stretch !important;
  }

  body.rf-mobile :is(.layout-grid,.grid,.subgrid,.summary,.status-panel,.statusbar,.stats,.form-grid,.filters,.filter-row,.grid-toolbar,.sheetGrid,.zaleGrid,.group-grid,.grid2,.toolbar-grid,.paletteGrid,.plan-tip-grid){
    grid-template-columns:1fr !important;
  }

  body.rf-mobile :is(.topbar,.header,.toolbar,.actions,.top-actions,.status-actions,.editor-actions,.table-actions,.sub-actions,.inline-actions,.top-left,.top-right,.topbar-left,.topbar-right,.left,.right,.title-row,.statusRow,.status-row,.toolbar-left,.toolbar-right,.chips,.filtersBar,.summaryFiltersBar,.mainTotalBar){
    min-width:0;
    flex-wrap:wrap !important;
    align-items:flex-start !important;
    gap:8px !important;
  }

  body.rf-mobile :is(.titlebox,.title-wrap,.titleBlock,.topbar-left,.topbar-right,.toolbar-left,.toolbar-right,.field,.filter,.filter-control,.control,.filt,.fltGroup,.sideField){
    min-width:0 !important;
    max-width:100% !important;
  }

  body.rf-mobile :is(.panel,.subpanel,.card,.main-card,.side-card,.grid-card,.sidePanel,.table-panel,.table-shell,.table-wrap,.tableWrap,.tablewrap,.sumWrap,.summaryWrap,.sideTableWrap,.matrix-wrap,.ranking-wrap,.mini-table,.status-card,.status-box,.summary-card,.main-head,.side-head,.side-body,.bucket,.note-box,.readonly-box,.table-card,.lock-card,.lockCard,.sideTable){
    position:relative !important;
    inset:auto !important;
    float:none !important;
    clear:both !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  body.rf-mobile :is(.table-panel,.table-shell,.table-wrap,.tableWrap,.tablewrap,.sumWrap,.summaryWrap,.sideTableWrap,.matrix-wrap,.ranking-wrap,.mini-table,.table-card,.sideTable){
    overflow:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  body.rf-mobile :is(.table-wrap,.tableWrap,.tablewrap,.sumWrap,.summaryWrap,.sideTableWrap,.matrix-wrap,.ranking-wrap,.mini-table,.table-panel,.table-shell,.table-card,.sideTable){
    height:auto !important;
    min-height:0 !important;
    max-height:min(58svh, 560px) !important;
  }

  body.rf-mobile :is(.sidePanel,.side-card,.side-body,.main-card,.bucket,.summary-card,.status-card,.card,.panel,.subpanel,.lock-card,.lockCard){
    height:auto !important;
    max-height:none !important;
    flex:1 1 auto !important;
  }

  body.rf-mobile :is(.tablewrap,.tableWrap,.table-wrap,.table-panel,.table-shell,.table-card,.sideTable) table{
    width:max-content !important;
    min-width:100% !important;
  }

  body.rf-mobile :is(.sumWrap,.summaryWrap,.ranking-wrap,.matrix-wrap,.sideTableWrap) table{
    width:max-content !important;
    min-width:640px !important;
  }

  body.rf-mobile table{
    max-width:none;
  }

  body.rf-mobile :is(.tablewrap,.tableWrap,.table-wrap,.sumWrap,.summaryWrap,.sideTableWrap,.matrix-wrap,.ranking-wrap,.sidePanel,.card,.panel,.subpanel,.table-panel,.table-shell,.table-card,.sideTable) + :is(.tablewrap,.tableWrap,.table-wrap,.sumWrap,.summaryWrap,.sideTableWrap,.matrix-wrap,.ranking-wrap,.sidePanel,.card,.panel,.subpanel,.table-panel,.table-shell,.table-card,.sideTable){
    margin-top:10px !important;
  }

  body.rf-mobile :is(.title,.title-wrap h1,.titleBlock h1,.card-top h1){
    white-space:normal !important;
    line-height:1.15 !important;
    font-size:clamp(18px, 5vw, 24px) !important;
  }

  body.rf-mobile :is(.subtitle,.panel-subtitle,.status-sub,.hint,.note,.footer-note,.footerNote,.title-wrap .subtitle,.subtitle span,.message,.helper-note,.note-box,.delivery-tip-line2,.status-small,.cardTitle,.summary-title,.bucketTitle){
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    line-height:1.35 !important;
  }

  body.rf-mobile :is(.chip,.pill,.badge,.role-chip,.role-badge,.sync-badge,.meta-pill){
    white-space:normal !important;
    max-width:100%;
  }

  body.rf-mobile :is(.field.span-2,.field.span-3,.field.span-4,.span-2,.span-3,.span-4){
    grid-column:span 1 !important;
  }

  body.rf-mobile :is(input,select,textarea,button,.btn,.btn-soft,.btnAdd,.btnMenu,.back-btn,.icon-btn,.fab,.btnMini,.btnTop,.subbtn,.ghost-btn,.primary-btn){
    font-size:16px !important;
    max-width:100%;
  }

  body.rf-mobile :is(input,select,textarea){
    min-height:40px;
  }

  body.rf-mobile textarea{
    min-height:88px;
  }

  body.rf-mobile :is(.modal,.modalBody,.modalHead,.modalFoot,.modal-header,.modal-footer,.modal-content,.modal-backdrop .modal,.modal-box,.modal-card,.pm-modal){
    max-width:calc(100vw - 16px) !important;
    width:calc(100vw - 16px) !important;
  }

  body.rf-mobile :is(.modal,.modal-backdrop .modal,.modal-box,.modal-card,.pm-modal){
    max-height:calc((var(--rf-vh) * 100) - 16px) !important;
    margin:8px auto !important;
  }

  body.rf-mobile :is(.modalBody,.modal-body,.pm-modal-body){
    max-height:calc((var(--rf-vh) * 100) - 140px) !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  body.rf-mobile .table-fit{
    transform:none !important;
    transform-origin:top left !important;
    width:max-content !important;
    min-width:100% !important;
    height:auto !important;
  }

  body.rf-mobile .table-fit > table,
  body.rf-mobile .table-fit table{
    width:max-content !important;
    min-width:100% !important;
  }
}